如何配置Nginx反向代理将/pic/映射到Docker部署的Picsur服务

问题根源在于Picsur返回的页面资源使用了根相对路径（如/assets/css/xxx.css），浏览器会直接向www.example.com/assets/...发起请求，而非你期望的www.example.com/pic/assets/...。无需修改Docker应用配置，通过Nginx的sub_filter模块即可重写响应内容中的路径，实现正确反向代理。

修改后的Nginx配置 #

将原有的location /pic块替换为以下配置：

location /pic {
    # 转发请求到Picsur服务
    proxy_pass http://127.0.0.1:8888;
    # 重写请求路径，去掉/pic前缀
    rewrite ^/pic/(.*) /$1 break;

    # 重写响应内容中的根相对路径，添加/pic前缀
    sub_filter '/assets' '/pic/assets';
    sub_filter '/api' '/pic/api';
    sub_filter '/static' '/pic/static';
    # 确保所有匹配的路径都被替换，而非仅第一个
    sub_filter_once off;

    # 传递必要代理头，保证应用正确处理请求
    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;
}

配置说明 #

1. sub_filter指令：针对Picsur返回的HTML、CSS、JS等内容中的路径进行替换，将所有以/assets、/api、/static开头的根相对路径，替换为带/pic前缀的路径。你可根据Picsur实际使用的路径前缀，补充或调整sub_filter规则。
2. sub_filter_once off：默认sub_filter仅替换第一个匹配项，设置为off会替换所有匹配路径。
3. 代理头配置：传递请求头给Picsur服务，确保应用能正确识别请求来源与协议。

注意事项 #

• 确保Nginx安装了ngx_http_sub_filter模块，主流Linux发行版的预编译Nginx包默认包含该模块；若未包含，需重新编译Nginx时添加--with-http_sub_filter_module参数。
• 修改配置后执行nginx -s reload，重载配置生效。

内容的提问来源于stack exchange，提问作者Chaim Liu