我有一个端口转发问题，求大佬们协助

[AndreasG]

我现在有三个容器开着，路由器开放了三个端口， 我想能不能开放一个端口用拼接 url 方式转发到不同的内网服务下，

server {  
    listen 10086 ssl;  
    server_name abc.com;
        location / {  
        proxy_pass http://192.168.0.100:10086;
        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;
        }


        location /book {  
        proxy_pass http://192.168.0.100:10010;
        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;
        }
    }

类似这样配置了 nginx 之后 直接访问 abc.com:10086 端口访问全部没问题 但是转发的第二个端口

abc.com:10086/book

并不能成功转发到 192.168.0.100:10010 浏览器调试发现使用 abc.com:10086/book 发出的请求中 css js 之类的都是

abc.com:10086/static/?.css
abc.com:10086/static/?.js

而并没有到

abc.com:10086/book/static/?.css
abc.com:10086/book/static/?.js

状态都是 404 了 问了一下 gpt 说是需要找到真实的静态资源地址，这个容器的话怎么搞呢？还是说我的 nginx 需要配置其他配置项才可以呢，求大佬们帮助

[ssiitotoo]

要实现所有静态都走 book 你需要更改静态入口文件的路劲添加 book 要不然 默认都是请求/

[doveyoung]

如果你的 192.168.0.100:10010 能识别 192.168.0.100:10010/book 这个路径，可以试试修改 nginx 的 proxy_pass 配置
proxy_pass http://192.168.0.100:10010 ; --> proxy_pass http://192.168.0.100:10010/book ;
如果你后端真正的服务识别不了 /book 这个路径，你可以在 nginx 额外加 server 配置 book.abc.com proxy_pass 到 192.168.0.100:10010

我看你的 /book 还加了 proxy_set_header ，这样会让你后端真正的服务接收到 {host: abc.com} ，不知道这符不符合你的期望

[jupiterISme]

location /book {
proxy_pass http://192.168.0.100:10010/book;
...
}
试试这个

[sagaxu]

你的网站支持部署到非根路径吗？网站不支持也是白搭。

[zizon]

说明你
http://192.168.0.100:10010 host 的页面的资源路径写的就是 static/?.css

你要么把页面的资源路径也写成 book/static/?.css
要么找个插件在 nginx 上把后端 proxy 对象返回的页面里的对应资源路径给 rewrite 了.

[coolfan]

不行，对 url 的 path 匹配必须要求应用程序本身考虑到这个行为并适配。

比如有些网页请求的资源是/static/main.js, 虽然你访问的是 abc.com/book/ 但是浏览器还是会访问 abc.com/static/main.js

用子域名可以完美解决，book.abc.com 对应 book ； film.abc.com 对应 film 。 写多个 server ，其中的 server_name 配置对应的子域名

[oouz]

是不是需要换一下 /book 和 / 配置的位置，把/book 换到 / 的前面去。
我记得之前看到过好像这个配置的匹配是按顺序匹配，你现在/ 放在最前面，不管是 abc.com:10086 还是 abc.com:10086/book 都会被 / 匹配成功。所以都走的 192.168.0.100:10086

把这两个换一下位置试试？

[jadeborner]

前端 publicpath 加上 book

[ltaoo1o]

上面的人已经说到根本原因了，静态网站需要做一些配置，如果是 `vite` 项目， `base` 需要配置为 `/book`。

我刚好有一个这种项目，我分别有 `/pc`、`/mobile` 两个网站，通过 `www.domain.com/pc` 和 `www.domian.com/mobile` 访问，我的目录结构如下

```
apps
- flix_prod_web
- pc
index.html
static
- mobile
index.html
static
```

nginx 配置

```
location /mobile {
alias /apps/flix_prod_web/mobile;
try_files $uri $uri/ /mobile/index.html;
}
location /pc {
alias /apps/flix_prod_web/pc;
try_files $uri $uri/ /pc/index.html;
}
```

前端我用了 `browser history`，这样可以保证刷新时不会 404 。

我是问 GPT 实现的，具体原理我也不懂。

[JayZXu]

只用 nginx 是无法实现这个分流的
核心原因在于编译好的前端去请求地址时是写死的，你代理的两个地址实际上只区分的入口，即 index.html 。但是后续请求的接口和静态资源没办法区分了

前端是自己写的，可以通过修改 publicpath 或者 base 参数重新打包

不是自己写的，要么通过域名在 nginx 做 server_name 分流，要么本地写 host 实现主机名访问再通过 nginx 的 server_name 分流

[guoguobaba]

https://zhuanlan.zhihu.com/p/577030920

原理和这个比较类似

[wxd21020]

兄弟，上 lucky ，搜一下 lucky

[partner666]

你想实现的效果需要在前端改，或者这样？ location /book {
proxy_pass http://192.168.0.100:10010/;
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;
}

[R77]

location ~ ^/(js|css|images)/ {
proxy_pass http://xxx;
}

可以试试，类似的

[AndreasG]

@JayZXu 多谢老哥

[AndreasG]

@R77 我试了一下静态地址请求拼接的方式，静态文件都加载成功了，您这个方式获取静态资源是完全可行的，但是由于还有后端接口貌似不通，最后使用了二级域名解决了这个问题，多谢老哥解答

[AndreasG]

@partner666 当时试了一下，还是不太行，貌似不符合我这个情况，不过多谢帮助！

[AndreasG]

@wxd21020 卧槽我搜了一下感觉这个好用啊，从来没听说过，学到了老哥

[AndreasG]

@guoguobaba 貌似最底层原因是这个，但是前端项目我没法改，多谢老哥

[AndreasG]

@ltaoo1o 我查了查貌似要改前端东西，不过我这不好改，不过多谢老哥