<h1 id="%E5%89%8D%E6%8F%90">
<a class="header-anchor-link" href="#%E5%89%8D%E6%8F%90" aria-hidden="true"></a> 前提</h1>
<p>Next.js開発用コンテナとNext.jsアプリへの接続をリバプロするためのApache用のコンテナを立てたとき</p>
<h1 id="%E7%97%87%E7%8A%B6">
<a class="header-anchor-link" href="#%E7%97%87%E7%8A%B6" aria-hidden="true"></a> 症状</h1>
<p>Next.jsのホットリロードが動作しない</p>
<h1 id="%E5%8E%9F%E5%9B%A0">
<a class="header-anchor-link" href="#%E5%8E%9F%E5%9B%A0" aria-hidden="true"></a> 原因</h1>
<p>ホットリロードにwebsocketを使っているため、Apacheがwebsocket通信をNext.js開発用コンテナにリバプロできていない</p>
<h1 id="%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 解決方法</h1>
<p>httpd.confに</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">httpd.conf</span></div>
<pre class="language-conf"><code class="language-conf">ProxyPassMatch ^/(_next/webpack-hmr)$ ws://${Next.js開発用コンテナのホスト名}:${Next.js起動ポート番号}$1
</code></pre>
</div><p>を追加する</p>


Docker + Next.js + Apache でホットリロードが効かなくてハマったのでメモ

前提

症状

原因

解決方法

Discussion