nginx部署踩坑 - 技术栈

部署需求

（IP为10）内网前端应用被代理到另外一台跳板机（IP为20）。本地浏览器IP为30
20跳板机禁止访问根目录，即禁/
前端路由路径为qtt，资源路径也为qtt

问题

1.资源也被禁用 2.访问x.x.x.20/qtt?token=xxx。接收不到token参数，前端直接跳转到首页。

ini 复制代码

//20服务器的nginx配置如下：
upstream qtt {
    ip hash;
    keepalive 100;
    keepalive timeout 300s;
    server x.x.x.10;
}
server {
    listen 80;
    server name localhost;
    server tokens off;
    port in redirect off;
 
    location /qtt {
        proxy_set header host $host;
        proxy_set header X-forwarded-for $proxy add x forwarded for;
        proxy set header X-real-ip $remote addr;
        proxy_pass http://qtt;
        proxy_connect timeout 308s;
        proxy_read timeout 300s；
    }
  }
  //10服务器nignx配置如下
    server {
        listen 80;
        server_name _;
         
       
       location / {
            root /usr/local/web/dist-ai;
            index index.html;
            try_files $uri $uri/ /qtt/index.html;
       } 
       
 
    }

解决问题

1.前端设置base路径qtt，新建qtt文件，将assets等文件复制到qtt文件中。

2.根据nignx日志显示访问x.x.x.20/qtt?token=xxx时

bash 复制代码

路径被重定向为x.x.x.20/qtt/?token=xxx。
因为try_files  $uri/会判断x.x.x.20/qtt?token=xxx是否文件如果是文件夹将会增加/指向qtt文件。
设置try_files $uri $uri/index.html /qtt/index.html; 此时try_files  $uri/index.html 因为qqt/index.html存在，直接返回index.html

bash 复制代码

//访问流程
访问：x.x.x.10/qtt
↓
Nginx 返回 /qtt/index.html
↓
浏览器加载 index.html，运行前端 JavaScript
↓
前端路由检测到 URL 中的 `/about`
↓
**自动切换到关于页面**

其实就是qtt被nginx当目录路径产生了重定向，单页应用因为重定向后路由为/qtt/？token=xx，找不到路由,前端直接跳转到/，所有才会出现参数丢失的现象。