如何在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