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