nginx運行vue項目，並對后端做負載均衡

一、打包vue項目

　　WebStorm打包vue項目過程參考：Vue_打包並發布項目。

二、部署至nginx

1.上傳項目

　　將打包結果（dist文件夾）通過SFTP上傳至Linux服務器（我用的是虛擬機），位置隨意，我放到了nginx解壓文件夾同級目錄下。

 2.創建配置文件

　　進入nginx解壓文件夾下創建配置文件，custom.conf是我創建的配置文件。

 custom.conf文件內容如下:

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
     
    # 配置后端接口地址
    # 由於tomcat版本原因，upstream的命名不能帶下划線
    upstream apiServer{
        server 192.168.153.128:8101 weight=1;
        server 192.168.153.129:8101 weight=1;
    }

    server {
        listen       8080;
        server_name  localhost  192.168.153.131;

        location / {
        # 設置項目路徑
            root   /nginx/dist;
            index  index.html index.htm;
        }

        #請求轉發，給后端做負載均衡
        location /api/ {
            add_header X-Content-Type-Options nosniff;
            proxy_set_header X-scheme $scheme;
            # 作用是我們可以獲取到客戶端的真實ip
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_hide_header X-Powered-By;
            proxy_hide_header Vary;
            proxy_pass http://apiServer;
        }

        #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;
        }
    }

}

3.啟動nginx

　　通過命令行啟動nginx。

/usr/local/nginx/sbin/nginx -c /nginx/nginx-1.20.1/conf/custom.conf

三、訪問項目網址

　　啟動后打開瀏覽器輸入 http://192.168.153.131:8080 測試是否正常運行。這里的192.168.153.131是Linux虛擬機實際IP地址，同時也是上邊配置文件server_name中寫明的IP。由於虛擬機系統為centos7命令行版，所以在主機瀏覽器輸入地址進行訪問。