應用八：Vue之在nginx下的部署實踐

 

最近有時間研究了下前端項目如何在nginx服務器下進行部署，折騰了兩天總算有所收獲，汗~~

所以就想着寫篇文章來總結一下，主要包括以下三個方面：

 

1、打包好的vue項目如何進行部署。

2、如何反向代理后端服務接口。

3、vue項目二級訪問目錄在nginx下的配置。

 

說明：nginx服務器的安裝及vue項目如何進行打包不在本文的討論范圍，后面的所有實踐說明都是基於個人的本地服務，和項目真實的應用環境稍微有點差別（其實這點差別可以忽略）。

 

一、如何部署vue項目。

假設我們打包好的項目地址為：d:\demo\dist，然后在nginx安裝目錄下的conf文件夾中找到配置文件nginx.conf並用文本打開，在配置文件的http模塊內加入以下配置

server {
        listen       8011;
        server_name  127.0.0.1;
		
        location / {
                root D:\demo\dist;
                try_files $uri $uri/ @router;
                index index.html index.htm;
        }
}

大家可能會看到http模塊下已經存在server模塊，但這個並不影響，因為server模塊可以配置多個；其中listen是自定義的端口號，server_name一般都是nginx服務器的IP，最關鍵的是在location的root屬性配上打包好的項目地址，index屬性對應的是默認的頁面名稱；配置完成后啟動nginx服務，通過http://127.0.0.1:8011就可以訪問到我們的項目頁面。

 

在上述配置完成后我們雖然可以訪問到項目頁面，但通常由於跨域等原因導致后台接口卻無法調通，這時我們可以使用nginx代理來解決。具體操作是前端所有請求都使用相對地址，假設都以“/api”開頭，說明一下“/api”並不是接口URL中真實存在，只是為了統一代理才加上的，然后在上述server模塊中添加以下配置

location /api/ {
        rewrite ^/api/(.*) /$1 break;
        proxy_pass http://10.10.10.10:9001;
}

屬性proxy_pass對應的就是后台服務地址，然后重啟nginx服務后整個項目運行正常。

 

二、后端服務接口的代理配置。

先看下面這段配置

server {
	listen       8012;
        server_name  127.0.0.1;
		
        add_header Access-Control-Allow-Origin * always;
        add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS always;
        add_header Access-Control-Allow-Credentials true always;
        add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,x-auth-token always;
	add_header Access-Control-Max-Age 1728000 always;
		
        if ($request_method = OPTIONS) {
            return 304;
        }
		
	location / {
		proxy_pass http://10.10.10.10:9001;
        }
}

http://127.0.0.1:8012就可以作為后台服務地址的一個代理地址，中間的那些配置是用來處理跨域問題，這樣就可以使用nginx代理地址來解決前文提到的接口調不通的問題。

 

nginx反向代理的另一個應用場景就是針對於微服務開發，也就是后台有多個服務地址的情況，我們可以使用nginx把多個地址映射到同一個IP+端口下，假如后台有三個微服務地址配置如下

server {
	listen       8012;
        server_name  127.0.0.1;
		
	location /u1/ {
		proxy_pass http://10.10.10.10:9001/;
        }
		
	location /u2/ {
		proxy_pass http://10.10.10.10:9002/;
        }
		
	location /u3/ {
		proxy_pass http://10.10.10.10:9003/;
        }
}

前端項目就可以通過http://127.0.0.1:8012/u1的方式訪問后台請求，需要注意的是proxy_pass的配置地址必須以“/”結尾。

 

三、如何配置vue項目的二級訪問目錄

一開始個人的想法是仍然按照前文提到的先部署好vue項目，然后再配置一次代理，添加二級目錄代理訪問已部署好的項目地址，具體配置如下

server {
	listen       8013;
        server_name  127.0.0.1;
		
	location /test/ {
		proxy_pass http://127.0.0.1:8011/;
        }
}

想着通過http://127.0.0.1:8013/test/就可以訪問到我們之前部署好的項目，但事實並非如此，囧~

 

其實思路並沒有錯，只是少了點配置（不是nginx的配置，而是vue項目的配置），首先需要給vue項目路由添加“base”字段，

 

然后在打包時要修改“assetsPublicPath”字段值，vue-cli3對應“publicPath”字段，

配置完成后重新打包，就可以通過http://127.0.0.1:8013/test/正常訪問項目了。