NGINX 反向代理到运行 Web 应用程序的 docker 容器答案

【问题标题】：NGINX reverse proxy to docker container running web appNGINX 反向代理到运行 Web 应用程序的 docker 容器
【发布时间】：2018-02-22 15:17:21
【问题描述】：

在主机上，我在端口 4012 上有 docker 容器，而在 docker 容器中，webapp 在端口 3000 ( 0.0.0.0:4012->3000/tcp ) 上运行所以要访问网络应用程序，我只需转到http://hostname:4012 并且网页显示正常。我希望能够从我的浏览器转到http://hostname/metrics 运行相同的网页。

虽然我只是通过在主机上的 nginx.conf 中添加一个位置来实现这一点：
位置/指标{
proxy_pass http://localhost:4012;
}

加载的只是 index.html（我在 http://localhost:4012 和 http://hostname/metrics 看到相同的 html 源代码）但http://hostname/metrics 不会加载运行 web 应用程序所需的 javascript 资产。从开发人员工具中，我看到非代理站点加载资产，如下所示： http://hostname:4012/assets/styles.css 虽然去 /metrics 的代理版本尝试像这样加载： http://hostname/assets/styles.css

它不会像获取 index.html 那样将 /metrics 附加到资产... 我在这里想念什么？如果这意味着什么，webapp 运行在 nodejs express 服务器上，监听 docker 容器上的 3000 端口。

【问题讨论】：

标签： node.js docker nginx

【解决方案1】：

你需要让应用程序以这种方式运行

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="hostname:4012">';
}

因此，在 html 中添加 <base> 标签有助于将 /css 更改为 /metrics/css。然后绝对网址也使用sub_filter更改。

【讨论】：

详细说明问题？您需要检查 chrome 开发工具，看看它是否更正了网址
没有变化。开发工具中资产的 url 仍然没有附加 /metrics/ 这个更改
是否插入了<head>标签更改，能否检查html源代码？
它确实将基本 href 添加到。但我想通了.. 而不是 sub_filter '' '\n';我把 sub_filter '' '\nhostname:4012">';它奏效了。谢谢！
事实证明，这主要只负责加载 index.html 和 html 中调用的资产。我仍然在 .js 和一些资产加载方面遇到问题。例如，单击一个按钮会给我处理该按钮的 .js 文件中的错误：Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'hostname:4012/report/f03d8662-734f-41e8-80a6-736de6649fde' cannot be created in来源为“theservercname.net”和 URL 为“theservercname.net/metrics”的文档。