0
Help us understand the problem. What are the problem?

posted at

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項目

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?