Question

我在Docker容器上的服务器上运行了多个webapps，这些容器映射到自己的端口。我正在尝试使用NGINX完成反向代理，所以我不必去http://hostname:4012访问webapp，而是http://hostname/metrics来到同一页面。通常，像这样的简单proxy_pass会使这个工作：

location /metrics/ {
proxy_pass http://localhost:4012/;
}

这是因为它涉及到index.html，但不会加载html中的任何脚本。我通过添加sub_filter以在html中创建基本URL来修复它：

location /metrics/ {
            proxy_pass http://localhost:4012/;
            sub_filter_once off;
            sub_filter 'http://localhost:4012/' '$scheme://$host/metrics/';
            sub_filter '<head>' '<head>\n<base href="http://hostname:4012/">';
    }

这允许加载index.html中包含的主要JS文件，显示页面，但不完全。缺少某些图标和字体，这些图标和字体由.css中的相对URL调用。但更重要的是，我的一个应用程序上的某些JS被破坏了......我点击了我页面上的一个按钮，它什么也没做，抛出这个错误：

ReactErrorUtils.js：51未捕获的DOMException：无法执行＆＃39; pushState的＆＃39; on＆＃39; History＆＃39;：带URL的历史状态对象＆＃39; http://hostname:4012/report/81e006c3-949f-4b5d-82b8-ee8c8ba0e337＆＃39; 无法在包含来源的文档中创建＆＃39; http://cname.net＆＃39;和URL ＆＃39; http://cname.net/metrics/＆＃39;

关于如何解决这个问题的任何想法？奇怪的是，如果我把它放在nginx中的根/位置，单个应用程序将完全工作，如下所示：

location / {
proxy_pass http://localhost:4012/;
}

关于我如何使用/metrics/位置的任何想法，以便我可以将我的所有应用代理？

NGINX反向代理不加载资产，docker web app上的相对URL

0 个答案: