ubuntu中利用nginx部署vue專案的完整步驟

2022-02-20 13:00:43

1.安裝nginx

更新源列表

apt-get update

安裝nginx

apt-get install nginx

檢查nginx是否安裝，輸入如下命令後若出現版本號則安裝成功

nginx -v

啟動nginx

server nginx restart

在瀏覽器輸入ip地址，若出現如下頁面則啟動成功

2. 打包上傳vue專案到伺服器

打包

我的專案使用的是vs code，在終端輸入如下命令進行打包

npm run build

上傳

打包完成後會有dist檔案，該檔案為打包完成後的專案,該檔案中有index.html和static兩個內容。

將該dist檔案上傳到伺服器的某個位置即可

我上傳到/home/ubuntu檔案中

設定nginx

修改nginx.conf

安裝nginx後，nginx的預設目錄是/etc/nginx

在該目錄中有nginx.conf檔案，輸入如下命令，使用vi開啟該檔案

vi nginx.conf

我的nginx.conf檔案原內容如下

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;
	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# SSL Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##

	gzip on;

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
}


#mail {
#	# See sample authentication script at:
#	# http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
# 
#	# auth_http localhost/auth.php;
#	# pop3_capabilities "TOP" "USER";
#	# imap_capabilities "IMAP4rev1" "UIDPLUS";
# 
#	server {
#		listen     localhost:110;
#		protocol   pop3;
#		proxy      on;
#	}
# 
#	server {
#		listen     localhost:143;
#		protocol   imap;
#		proxy      on;
#	}
#}

在http模組中加入如下內容,表示組態檔要參照hosts資料夾下的host字尾的檔案。該host字尾檔案就是用來設定vue專案的，一個host檔案設定一個vue專案

include /etc/nginx/hosts/*.host;

修改後檔案如下

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;
	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# SSL Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##

	gzip on;

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
	include /etc/nginx/hosts/*.host;#新新增的一行
}


#mail {
#	# See sample authentication script at:
#	# http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
# 
#	# auth_http localhost/auth.php;
#	# pop3_capabilities "TOP" "USER";
#	# imap_capabilities "IMAP4rev1" "UIDPLUS";
# 
#	server {
#		listen     localhost:110;
#		protocol   pop3;
#		proxy      on;
#	}
# 
#	server {
#		listen     localhost:143;
#		protocol   imap;
#		proxy      on;
#	}
#}

建立*.host檔案

在/etc/nginx中建立hosts資料夾

mkdir hosts

在host檔案中建立syt.host檔案，檔名隨便命名

在檔案中新增如下內容

server {
        listen       8080;#自己設定埠號
        server_name  syt;#自己設定專案名稱
        #access_log  logs/host.access.log  main;
        location / {
            root   /home/ubuntu/dist;#這裡寫vue專案的所在地址
            index  index.html;#這裡是vue專案的首頁，需要保證dist中有index.html檔案
        }

        error_page   500 502 503 504  /50x.html;#錯誤頁面
    
       
    }

重啟nginx