前後端分離項目，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;
    }
}