采用Nignx部署VUE项目，配置负载均衡。

时间：2024-03-07 10:18:27

vue的路由有哈希模式（Hash）与历史模式（History），哈希模式部署到web服务器（Tomcat，Apache、IIS）不需要安装URL重写，如果是历史路由模式，部署到Web服务器上之后要安装URL重写。

如果将vue部署到Nginx上，哪怕路由用历史模式，也不需要额外安装URL重写，还可以做负载均衡，方便好用。

下面记录下我用Nginx部署VUE项目的经过。

安装Nginx

【1】安装nginx

首先要安装Nginx，本次用windows版本的nginx部署。

Nginx下载地址：http://nginx.org/en/download.html

当前最新版本为nginx-1.21.4

下载完成后解压【nginx-1.21.4.zip】到你想要安装的目上录。

在nginx.exe文件的位置打开cmd命令行窗口，在命令行中输入 start nginx 命令启动nginx，

nginx默认用80端口，如果80端口被其它程序占用了就会启动失败，先要关掉占用的程序释放80端口。

 

 nginx启动成功后，在浏览器地址栏中输入 http://localhost ，打开nginx欢迎页面。

   

部署单个节点的Vue项目

【2】使用Nginx部署单个Vue项目

 打开nginx安装目录下的 config/nginx.conf文件，在http节点里面增加如下配置：

listen  表示监听的端口。

location节点下面的root 表示vue项目存放在 gninx 根目录下的某个路径，注意不是任意的目录，是nginx根目录下的某个路径。

    server {
        listen       8031;
        server_name  127.0.0.1;
        location / {
            root wwwroot/cjstore-mgr-1;
            try_files $uri $uri/ /index.html index  index.html index.htm;
        }
    }

 重新加载nginx配置文件，nginx - s reload，这样单个节点的vue项目就配置成功了。

 

部署Vue负载均衡

【3】配置集群模式

当单个节点的并发量无法满足需求的时候，可以将vue项目配置多节点集群模式。

按照第【2】步的方法，再多配置两个节点，listen端口号分别为8032、8033

配置upstream节点，这个节点用来配置负载均衡。

    #负载均衡配置
    upstream local-cjstore {
        server 127.0.0.1:8031 weight=1;
        server 127.0.0.1:8032 weight=1;
        server 127.0.0.1:8033 weight=1;
    }

 

配置负载均衡反向代理：

    server {
        listen       8030;
        server_name  127.0.0.1;
        location / {
            proxy_pass http://local-cjstore;
            proxy_set_header    Host                $http_host;
            proxy_set_header    X-Real-IP           $remote_addr;
            proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
            proxy_set_header    X-NginX-Proxy       true;
        }
    }

 

这样就配置好了，合起来的配置就是：

    #节点1
    server {
        listen       8031;
        server_name  127.0.0.1;
        location / {
            root wwwroot/cjstore-mgr-1;
            try_files $uri $uri/ /index.html index  index.html index.htm;
        }
    }
    #节点2
    server {
        listen       8032;
        server_name  127.0.0.1;
        location / {
            root wwwroot/cjstore-mgr-2;
            try_files $uri $uri/ /index.html index  index.html index.htm;
        }
    }
    #节点3
    server {
        listen       8033;
        server_name  127.0.0.1;
        location / {
            root wwwroot/cjstore-mgr-3;
            try_files $uri $uri/ /index.html index  index.html index.htm;
        }
    }
    
    #负载均衡配置
    upstream local-cjstore {
        server 127.0.0.1:8031 weight=1;
        server 127.0.0.1:8032 weight=1;
        server 127.0.0.1:8033 weight=1;
    }
    #反向代理负载均衡
    server {
        listen       8030;
        server_name  127.0.0.1;
        location / {
            proxy_pass http://local-cjstore;
            proxy_set_header    Host                $http_host;
            proxy_set_header    X-Real-IP           $remote_addr;
            proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
            proxy_set_header    X-NginX-Proxy       true;
        }
    }

然后重新加载nginx配置文件。

nginx -s reload

部署完成。

几个nginx命令

【windows版命令】

tasklist /fi "imagename eq nginx.exe"     #查看nginx是否启动

start nginx                             #启动nginx

nginx -s reload                      #重新加载配置

nginx -s stop                         #立即停止服务

nginx -s quit                          #从容停止服务

taskkill /f /t /im nginx.exe      #使用taskkill命令杀死nginx进程

 

【Linux版命令】

systemctl start nginx.service           #启动nginx

systemctl stop nginx.service           #systemctl 停止

systemctl restart nginx.service       #重启nginx

netstat -tlnp | grep nginx                #查看端口号

 

相关文章