通过 apache mod_proxy 替换 Webpack 3 devserver 热模块答案

【问题标题】：Webpack 3 devserver hot module replacement through apache mod_proxy通过 apache mod_proxy 替换 Webpack 3 devserver 热模块
【发布时间】：2018-05-30 11:28:52
【问题描述】：

我有一个项目，我们使用 webpack 的 devserver 进行本地开发。我们还有用于实时重新加载的热模块替换：hot module replacement

我们的前端在 docker 中运行。有了这个前端，我们还有 apache 的 mod_proxy。想法是让所有 http 调用都通过 mod_proxy。所以浏览器会将http发送到mod_proxy，然后代理到前端。这在没有热模块更换的情况下运行良好。但由于某种原因，我们无法进行热模块更换工作。我猜是因为热模块替换使用了 web sockets，并且默认情况下没有启用通过 apache 的 mod_proxy 进行隧道 web socket 调用？

有人能够做到这一点吗？你是怎么做到的？开发服务器/热模块更换需要哪些配置？你用了apache的mod_proxy web socket隧道：mod_proxy_wstunnel，你是怎么配置的？您不需要回答之前列出的所有子问题，我只需要有关如何使其工作的信息。

【问题讨论】：

标签： apache webpack mod-proxy hot-module-replacement mod-proxy-wstunnel

【解决方案1】：

A.是的。我可以在 Apache2 中使用以下配置来实现这一点

<Location /sockjs-node>
        RequestHeader set Host "localhost:4200"
        RequestHeader set Origin "http://localhost:4200"
        ProxyPass ws://localhost:4200/sockjs-node
        ProxyPassReverse ws://localhost:4200/sockjs-node
        CacheDisable on
</Location>
<Location /sockjs-node/info>
        ProxyPass http://localhost:4200/sockjs-node/info
        ProxyPassReverse http://localhost:4200/sockjs-node/info
        CacheDisable on
</Location>

B.我的 apache2 服务器启用了 mod_proxy 和 mod_proxy_wstunnel。

C.我正在将此配置用于我的 Angular 7 开发。

【讨论】：