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

深碍√TFBOYSˉ_ 2024-04-20 08:30 86阅读 0赞

首先是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;
        }
    }