应用八：Vue之在nginx下的部署实践

最近有时间研究了下前端项目如何在nginx服务器下进行部署，折腾了两天总算有所收获，汗~~

所以就想着写篇文章来总结一下，主要包括以下三个方面：

 

1、打包好的vue项目如何进行部署。

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

3、vue项目二级访问目录在nginx下的配置。

 

说明：nginx服务器的安装及vue项目如何进行打包不在本文的讨论范围，后面的所有实践说明都是基于个人的本地服务，和项目真实的应用环境稍微有点差别（其实这点差别可以忽略）。

 

一、如何部署vue项目。

假设我们打包好的项目地址为：d:demodist，然后在nginx安装目录下的conf文件夹中找到配置文件nginx.conf并用文本打开，在配置文件的http模块内加入以下配置

server {
        listen       8011;
        server_name  127.0.0.1;
		
        location / {
                root D:demodist;
                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/正常访问项目了。