nginx 部署多個前端項目

NGINX中單設置一個web前端很容易，改變端口，改變root指向基本就搞定了，那麼，假設我們有多個前端項目部署在同一個域名下，該怎麼設置呢？

1. 先假設我們有一個應用，http://domain就可以訪問了， 現在改版了希望可以訪問舊的應用http://domain，同時也可以通過http://domain/new訪問新應用，那麼首先第一步就是需要對新的前端項目進行一些配置。
     a. 在vue.config.js中設置 publicPath: '/new/',

     b. 在路由index.js中設置   base:'/new/',

     c. 在index.html中加入<meta base=/new/>

    2. 修改NGINX設置，基本就是使location /指向原來的web前端，  location /new指向新的web前端

          a. 先在NGINX目錄下/usr/share/nginx/html 創建新的文件夾new,把新項目的static,index.html放置於new目錄，注意不是dist放到new目錄

         new 目錄結構

b.  vim /etc/nginx/nginx.conf，修改server 部份

 

#For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/
 
#user nginx;
user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
 
# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
    worker_connections 1024;
}
http {
    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  /var/log/nginx/access.log  main;
    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    #include /etc/nginx/conf.d/*.conf;
    server {
        listen       8099;
        server_name  localhost;
        #此爲nginx本身index目錄
        #root         /usr/share/nginx/html;
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        location / {
         此爲舊應用index,static目錄
                root /usr/share/nginx/html/dist;
                try_files $uri $uri/ @router;
                index index.html index.htm;
             
        }
 
        location /new {
           #此爲新應用index,static目錄，同時注意這裏是alias,不是root，還有以及new的後面有/結尾
                alias /usr/share/nginx/html/new/;
                try_files $uri $uri/ /new/index.html;
                index index.html index.htm;
              
        }
        location @router {
                rewrite ^.*$ /index.html last;
        }
        error_page 404 /404.html;
            location = /40x.html {
        }
        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    } 
# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2 default_server;
#        listen       [::]:443 ssl http2 default_server;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#        }
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }
}

c.  /usr/sbin/nginx -t 驗證conf文件是否配置正確

d. /usr/sbin/nginx -s reload 重新加載NGINX配置生效
    3. 最後通過http://localhost:8099就能訪問到舊前端，而通過http://localhost:8099/new就能訪問到新前端

網上有其他很多寫的NGINX反向代理部署多個前端，其前提應該是這個應用都已經可以正常訪問，只不過是在某個域和端口進行轉發，使用戶訪問方便。
    
在些過程中遇到的一些問題：
    1. 一開始只對NGINX進行了設置，在new文件夾下放了一個index.html,這樣只能訪問到index,而不能訪問到新的項目，因爲一些編譯好的文件路徑不對，導致沒法加載
    2. 404錯誤，一般來說就是配置和真實的路徑不符合
    3. 設置多個前端的時候需要把原來默認的全局ROOT 路徑註釋掉
    4. 注意每行設置最後的分號，反正我自己好幾次忘了
    5. 重啓NGINX可能發生的錯誤： 
        a. nginx[13499]: nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)，使用 netstat -ntpl或者ps -ef | grep nginx找到相應進程，然後kill 進程ID
        b. nginx start failed,pid找不到，   ./nginx -c -/etc/nginx/nginx.conf