docker上のwebpackサーバにポートフォワードで接続できない場合の解決策 [Remote Development]

実現したいこと

dockerコンテナ上でwebpackにより起動しているReactで作ったサイトに、ホスト(mac)のプラウザからアクセスしたい。

問題点

dockerfileのEXPOSE項目とdevcontainer.jsonのappPort項目にnode.jsのポート3333を指定

コンテナのポートフォワードがうまくいってるかは以下のコマンドで確認済み
bash
$ docker port $(docker ps -q)


3333/tcp -> 127.0.0.1:3333

dockerコンテナ内部からcurlでlocalhost:3333接続確認済み
しかし、ホスト側からは

curl: (52) Empty reply from server

となってしまい接続できない

curl: (7) Failed to connect to localhost port 3333: Connection refused

ではないのでコンテナには届いてるっぽいん

解決方法

原因: ホスト解決がうまくできてなかった
webpack.config.jsのmodule.exportsのhostにコンテナのIPアドレスを指定

...

module.exports = {
...

devServer: {
+     host: '172.17.0.2',
+     disableHostCheck: true,
      port: 3333,
      contentBase: "./dist"
    },    
...

}
...

コンテナのIPアドレスはコンテナ側でcat /etc/hostsまたはhostname -iとするか、
ホスト側でdocker inspect $(docker ps -q)で確認できる

最後にwebpack-dev-serverを再起動する

参考

dockerコンテナ上でnode.jsのサーバを起動し、ホスト端末からアクセスする - Qiita

dockerホストが割り当てたIPアドレス

webpack-dev-serverで起動したアプリをlocalhostではなく0.0.0.0で外部に公開する方 | tackeyy.com
- webpack.config.jsのhost項目