一个服务器端口部署两个前端服务

46 阅读1分钟
server {
        listen 80 default_server;
        listen [::]:80 default_server;

        server_name _; //配置域名

        index index.html index.htm;

        root 主项目的dist目录;

        location / {

               try_files $uri $uri/ /index.html;
        }




    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    // 第二个项目 使用 vue3 vue-router的 history模式 createWebHistory('/manage/')
    
    //静态文件的处理 因为你打包后 index.html的js、css引入 都会加上manage路径 所以需要处理(vite.config.js:   base: '/manage/')
    location ^~ /manage/assets/ {
        alias /opt/app/agent-management/dist/assets/;
        access_log off;
        expires 1y;
        add_header Cache-Control "public";
    }

    location /manage/api/ {
       proxy_pass 服务地址+端口号+/api/;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
       proxy_connect_timeout 60s;
       proxy_send_timeout 60s;
       proxy_read_timeout 60s;
   }

    location /auth/ {
       proxy_pass 服务地址+端口号+/auth/;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
       proxy_connect_timeout 60s;
       proxy_send_timeout 60s;
       proxy_read_timeout 60s;
   }

    location /manage/ {
        alias  第二个项目的dist地址 + /;
        //这里就是把路由交给前端处理
        try_files $uri $uri/ /manage/index.html;
    }

    // 这里是为了保障 /manage开头的路由都重定向到/manage/ 进而交给前端路由处理 
    location = /manage {
        return 301 /manage/;
    }
}