Dockerのコンテナに接続できません

Question

実現したいこと

dbコンテナ、api(ruby on rails)コンテナ、front(nodejs, npmから、ビルドツールはviteを使って、react & typescriptのプロジェクトを作成したい)コンテナの3つを連携させて起動したいです。

しかし、localhost:3000 でfrontコンテナに接続できず、困っています。

db, api については既に成功していて、apiコンテナについてはホストマシンからlocalhost:3001でアクセスできています。
そのため、実現したいこととしてはfrontコンテナを正常に起動させたい、ということになります。

状況

本当はすべてコンテナ内でイチから作成したかったのですが、実力不足で諸問題が解決できず、とりあえずホストマシンのPC上でプロジェクト作成　→　コンテナ化ができそうだと思ったのでやってみました。

やったことは、

① asdf から、nodejs をインストール
LTS版（安定版と捉えています）で最も新しいものが 20.13.1 でしたので、そちらをインストール
$ asdf install nodejs 20.13.1
$ asdf local nodejs 20.13.1
npm のバージョンは、10.5.2 でした。安定版のサポートと一致しています。

② プロジェクト雛形作成
frontのアプリケーションコードを置きたい場所（frontend/）にて、
$ npm create vite@latest -- --template=react-ts
latestとあるが viteは5.2.3でいいかと聞かれ、 y 押下
正常に作成されました。

③ パッケージインストール、サーバー起動を試してみた
npm install でパッケージ依存解決
node_modulesディレクトリ、package-lock.jsonファイルが作成された
$ npm run dev から、ポート番号5173 で、開発環境にアクセスできました。

ソースコード

Dockerfile、docker-compose（frontコンテナ部分だけ載せます）は、以下のとおりです。

FROM node:20.13.1

WORKDIR /front

COPY package.json package-lock.json /front

RUN npm install

COPY . /front
EXPOSE 3000

CMD ["npm", "run", "dev"]

services:
（中略）
  # front container
  front:
    container_name: front
    build:
      context: ./frontend
      dockerfile: Dockerfile.dev
    volumes:
      - ./frontend:/front
      - /front/node_modules
    ports:
      - "3000:5173"

相談させていただきたい所

$ docker compose up -d　　は正常に動作しました。
プロセスを確認すると、以下のようになっていました。

❯ docker compose ps

NAME      IMAGE          COMMAND                   SERVICE   CREATED          STATUS          PORTS
api       hoge-api       "/usr/bin/entrypoint…"   api       26 seconds ago   Up 24 seconds   3001/tcp, 0.0.0.0:3001->3000/tcp
db        mysql:8.0.36   "docker-entrypoint.s…"   db        26 seconds ago   Up 24 seconds   0.0.0.0:3306->3306/tcp, 33060/tcp
front     hoge-front     "docker-entrypoint.s…"   front     26 seconds ago   Up 24 seconds   0.0.0.0:3000->5173/tcp

ホストマシン3000番で、コンテナの5173番につながっているように見えます。

コンテナのログを見ると、

❯ docker logs front

> frontend@0.0.0 dev
> vite

Re-optimizing dependencies because vite config has changed

  VITE v5.2.11  ready in 177 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

このようになっていて、やはり5173番で開いているように見えます。

疑問点まとめ

まとめますと、困っていることは、
localhost:3000 から frontコンテナに接続できないことです。
解決策が思い浮かばず、ヒントとしてどこを見れば良いかもピンときていません。

どなたか、お力添えをいただけますと幸いです。

Answer 1

npm run dev の処理内容を vite --hostのように、 --host オプションをつけてみてください。
現状だとlocalhostのみ受け付けているようなので、コンテナ内からのlocalhostでしかアクセスできないように見受けられます。

参考
https://github.com/vitejs/vite/discussions/3396

Comments

[inoda]

解決しました。ありがとうございました。
少し落ち着いて調べてみると、かなり多くの記事が出てきました。お恥ずかしい限りです。

私の後学のために少し補足しておきますと、
$ npm run dev --host　だけでは、オプション？として認識されず、npm run dev のみの時と同じ処理になってしまうことがあるようです。(UNIX環境特有っぽい？)
なので、UNIXでの引数表現として、
$ npm run dev -- --host のように、間に -- を入れて明記する必要があるようでした。

ネットワークやインフラ関係、とても理解度が低いことがわかりましたので勉強しなおそうと思います。

お忙しい中、浅い質問に優しく返していただきまして、ありがとうございました。