采用Nignx部署VUE項目，配置負載均衡。

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                #查看端口號