前后端分离项目，ngnix如何在一台服务器部署多套前端代码

首先是ng的配置：

server
    {
        listen 80 default_server reuseport;
        #listen [::]:80 default_server ipv6only=on;
        server_name _;
        index index.html index.htm index.php;
        #root  /home/wwwroot/default;
        root  /home/wwwroot/dist; //指向第一套前端代码

        #error_page   404   /404.html;

        # Deny access to PHP files in specific directory
        #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }

        include enable-php.conf;

        location /nginx_status
        {
            stub_status on;
            access_log   off;
        }

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /.well-known {
            allow all;
        }

        location ~ /\.
        {
            deny all;
        }
        //这里配置第二套前端代码
        location /m/ {
            try_files $uri $uri/ /m/index.html;
            index index.html index.htm;
        }
		//这里配置第三套前端代码
	location /mperson/ {
            try_files $uri $uri/ /mperson/index.html;
            index index.html index.htm;
        }

        access_log  /home/wwwlogs/access.log;
    }

二，vue项目中也需要相应的改为ng里的前缀

1.index.html中头部加入<meta base="/m/">

2.router的index中加入base: '/mperson/',

3.config的index中assetsPublicPath改为ng的前缀,如:assetsPublicPath: '/m/',    注意：build和dev中都要改

第二种方式是使用二级域名的方式：

首先启动二级域名，不同的二级域名给不同的项目

server {
    listen    80;
    server_name example.com;
    location / {
       proxy_pass     http://localhost:8080;
       proxy_set_header  Host       $host;
       proxy_set_header  X-Real-IP    $remote_addr;
       proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

项目1

server {
    listen    80;
    server_name project1.example.com;
    location / {
       proxy_pass     http://localhost:8081;
       proxy_set_header  Host       $host;
       proxy_set_header  X-Real-IP    $remote_addr;
       proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

项目2

server {
    listen    80;
    server_name project2.example.com;
    location / {
       proxy_pass     http://localhost:8082;
       proxy_set_header  Host       $host;
       proxy_set_header  X-Real-IP    $remote_addr;
       proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}