nginx - 使用nginx部署vue项目到本地以及代理和负载均衡_C_心欲无痕_nginx vue alias

irpas 02-07 6097

本篇介绍打包后的vue项目使用nginx部署到本地以及接口的反向代理和负载均衡；前提：准备一个打包后的vue项目和安装nginx;

1，先安装nginx 下载链接：http://nginx.org/en/download.html 我安装的是：1.16.1版本的，如下：

然后解压到一个指定的文件夹就行；双击根目录的nginx图标，然后再访问 http://localhost/若出现以下页面表示启动成功：

也可以在任务管理器中查看是否启动成功：

2，打包vue项目在vue项目根目录的vue.config.js文件配置publicPath 路径；如下：

module.exports = { outputDir:'video', //打包后的文件夹名字及路径 publicPath: '/video/', // 生产的项目名 lintOnSave: false, }

然后运行 npm run build 打包完成；打包后的就是根目录下的video文件；

3，修改nginx配置文件

此步需要进入到nginx的 conf/nginx.conf下面新增一个路径监听，这个路径对应的就是vue项目打包后存放的本地的绝对路径，如下：

3.1 先进入到 nginx.conf里面

3.2 在配置文件里面加入我画红线的内容；alias 对应的就是本地打包后的项目文件夹存放的本地路径；注意：location /video/ 这个映射路径一定要对应 vue的publicPath : “/video/”

主要代码如下：

# 视频演示项目 http协议 location /video/ { alias D:/myProject/deployProject/video/; try_files $uri $uri/ /index.html last; index index.html index.htm; }

3.3 如果你部署的里面有接口的请求，那么需要设置反向代理和负载均衡，请好好的看下面案例：

upstream serve_backend { ip_hash; server 192.168.11.68:20201; server 192.168.11.69:20201 weight=1 down; server 192.168.11.70:20201 weight=2; server 192.168.11.71:20201 weight=3 backup; server 192.168.11.72:20201 weight=1 max_fails=3 fail_timeout=30s; }

说明:

（1）down：表示当前的server暂时不参与负载（2）weight：默认为1.weight越大，负载的权重就越大。（3）backup：其它所有的非backup机器down或者忙的时候，请求backup机器。所以这台机器压力会最轻。（4）上例中192.168.11.72:20201 设置最大失败次数为 3，也就是最多进行 3 次尝试，且超时时间为30秒；（max_fails 的默认值为 1，fail_timeout 的默认值是 10s。）（5）注意，当upstream中只有一个 server 时，max_fails 和 fail_timeout 参数可能不会起作用； weight\backup 不能和 ip_hash关键字一起使用。（6）最后在需要使用负载均衡的server中增加proxy_pass http://serve_backend/，对应upstream的名字。 nginx.conf的serve模块配置如下：

nginx.conf的serve模块配置如下：

http { include mime.types; default_type application/octet-stream; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; # 在这里设置负载均衡 # 上面有讲解 upstream serve_backend{ ip_hash; server 192.168.11.68:20201; server 192.168.11.69:20201 weight=1 down; server 192.168.11.70:20201 weight=2; server 192.168.11.71:20201 weight=3 backup; server 192.168.11.72:20201 weight=1 max_fails=3 fail_timeout=30s; } server { listen 80; server_name localhost; location / { root html; index index.html index.htm; } # 视频演示项目 http协议 location /video/ { alias D:/myProject/deployProject/video/; try_files $uri $uri/ /index.html last; index index.html index.htm; } # 在这里设置反向代理 # wxserver 是需要代理的标志 location /wxserver/ { proxy_pass http://serve_backend/; # 启用keep alive proxy_http_version 1.1; proxy_set_header Connection ""; # 获取 xforward和真实IP proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }

4，重启nginx 上面如果没有涉及到接口的请求，就不用设置第 3.3步骤了；设置完成后需要到任务管理器结束掉所有的nginx进程，然后进入到nginx根目录下双击nginx图标，重新启动nginx;

5，重新访问项目路径

然后再重新访问本地项目路径：http://localhost/video/login /video是nginx代理到本地的映射，一定要有 /login 是你vue项目的入口路由，一定要有后面就进入到你的项目了，使用的接口也是代理过的。

如下：部署成功；