【React+docker-compose】localhost:3000 へアクセスができない

Question

前提・実現したいこと

ブラウザで localhost:3000 に接続するとサイトが表示されるようにしたいです。

発生している問題・エラーメッセージ

docker-composeでReactを使ったサイトを作ろうとしているところです。

docker-compose upをしたところ、以下のように正しくコンパイルしたように見えます。

$ docker-compose up
Starting ringoyaki-web ... done
Attaching to ringoyaki-web
ringoyaki-web |
ringoyaki-web | > ringoyaki@0.1.0 start /usr/src/app
ringoyaki-web | > webpack serve
ringoyaki-web |
ringoyaki-web | ℹ ｢wds｣: Project is running at http://localhost:3000/        
ringoyaki-web | ℹ ｢wds｣: webpack output is served from /
ringoyaki-web | ℹ ｢wds｣: Content not from webpack is served from /usr/src/app
ringoyaki-web | ℹ ｢wdm｣: asset bundle.js 1.39 MiB [emitted] (name: main)
ringoyaki-web | asset index.html 178 bytes [emitted]
ringoyaki-web | runtime modules 24.9 KiB 10 modules
ringoyaki-web | modules by path ./node_modules/ 1.29 MiB
ringoyaki-web |   modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
ringoyaki-web |   modules by path ./node_modules/webpack/hot/ 4.46 KiB 5 modules
ringoyaki-web |   modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules       
ringoyaki-web |   modules by path ./node_modules/scheduler/ 31.8 KiB 4 modules
ringoyaki-web |   modules by path ./node_modules/url/ 37.4 KiB 3 modules
ringoyaki-web |   modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
ringoyaki-web |   modules by path ./node_modules/react/ 70.6 KiB 2 modules
ringoyaki-web |   modules by path ./node_modules/react-dom/ 875 KiB 2 modules
ringoyaki-web |   modules by path ./node_modules/strip-ansi/ 296 bytes 2 modules
ringoyaki-web | modules by path ./src/ 856 bytes
ringoyaki-web |   ./src/index.tsx 486 bytes [built] [code generated]
ringoyaki-web |   ./src/components/App.tsx 370 bytes [built] [code generated]
ringoyaki-web | webpack 5.21.2 compiled successfully in 3263 ms
ringoyaki-web | ℹ ｢wdm｣: Compiled successfully.

しかし実際にブラウザで localhost:3000 に接続しようとすると、
ERR_EMPTY_RESPONSEとなってしまいます。

該当のソースコード

以下にDockerfileを示します。

FROM node:14.15.5-slim
WORKDIR /usr/src/app

COPY package*.json ./
RUN npm install
COPY . .

以下にdocker-compose.ymlを示します。

version: "3"
services:
  web:
    container_name: ringoyaki-web
    build: .
    volumes:
      - ./:/usr/src/app
      - /usr/src/app/node_modules
    command: sh -c "npm run start"
    ports:
      - "3000:3000"

その他のソースコードは
https://github.com/skytomo221/ringoyaki
に公開しています。

試したこと

Firefox以外でEdgeやGoogle Chromeでもアクセスを行いましたが、
同じく接続できませんでした。

ローカルでnpm installしてnpm run startをして
ブラウザでlocalhost:3000にアクセスした場合は正しくサイトに接続できました。

docker-compose psで確認してもちゃんとPortsはつながっているようです。

$ docker-compose ps
    Name                   Command               State           Ports
-------------------------------------------------------------------------------
ringoyaki-web   docker-entrypoint.sh sh -c ...   Up      0.0.0.0:3000->3000/tcp

WSL のバージョンも2であることを確認しました。

$ wsl --list --verbose
  NAME                   STATE           VERSION
* Ubuntu                 Stopped         1
  docker-desktop         Running         2
  docker-desktop-data    Running         2

セキュリティソフトはWindows Defenderのみです。

Microsoft Defender ファイアウォールをすべて無効にして、
試してみましたがうまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

DockerはDocker Desktopでインストールしました。

• OS: Windows 10 Home
• OSビルド: 19042.804
• docker: Docker version 20.10.2, build 2291f61
• docker-compose: docker-compose version 1.27.4, build 40524192
• ブラウザ: Firefox Browser 85.0.2 (64 ビット)

Answer 1

こんにちは。
念のため、portsの指定をstringで明示してはいかがでしょうか。
また、FWなどでもブロックされないかもご注意下さい。

    ports:
      - "3000:3000"

Ref. https://docs.docker.com/compose/compose-file/compose-file-v3/#ports

追記：

Dockerfile側にも、EXPOSE 3000 があってもいいかなと思います。（単体でdocker runの場合も鑑み）
また、npm run start => webpack serve に該当しますが、docker-composeでコンテナとWindows側のポートをフォワードしているので、webpack serve --host 0.0.0.0 にすると如何でしょう。

（※開発環境ということで　--host 0.0.0.0　をひとまず指定）

Comments

[skytomo]

回答ありがとうございます。
文字列に変えて、
Microsoft Defender ファイアウォールをすべて無効にして、
試してみましたがうまくいきませんでした。
質問の記事の編集させていただきます。

[suama]

ありがとうございます！
package,jsonのところで "webpack serve” しているので、こちらを
"webpack serve --host 0.0.0.0” としてみていかがでしょう？

ホスト側（Windows) から見て、ポート的にはlocalhostにマップされますが、コンテナ内で起動しているnode.jsのアプリケーション的には、コンテナ内がlocalhostに当たるので、Windowsからプロキシされて届くリクエストは、外部からIP指定でアクセスされるため。

[skytomo]

--host 0.0.0.0 を追加したところ、アクセスできるようになりました！
docker runは今は使いませんが、今後のことも考えて、
EXPOSE 3000 も追加しておきます。ありがとうございます。

[suama]

よかったです！
その上で、ファイアウォールや「これはなくても大丈夫かな？」といった設定を外してみていってくださいね。