実現したいこと
dockerコンテナ上でwebpackにより起動しているReactで作ったサイトに、ホスト(mac)のプラウザからアクセスしたい。
問題点
dockerfileのEXPOSE項目とdevcontainer.jsonのappPort項目にnode.jsのポート3333を指定
コンテナのポートフォワードがうまくいってるかは以下のコマンドで確認済み
$ 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項目