nginx - 使用nginx部署vue项目到本地以及代理和负载均衡

本篇介绍打包后的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项目的入口路由，一定要有
后面就进入到你的项目了，使用的接口也是代理过的。

如下：部署成功；

在这里插入图片描述

nginx - 使用nginx部署vue项目到本地以及代理和负载均衡

猜你喜欢