应用八：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/正常访问项目了。
