docker-composeのPORT番号について

はじめに

docker-composeでポート番号を指定する項目について、意味がいまいち分かっていなかったので自分用にメモ。
ポート番号の項目を色々試してみて、挙動を確認してみる。

3000:3000の場合

React用のdocker-composeを用意。
ポート番号のところは3000:3000にしてみる。

docker-compose.yml

version: '3'

services:
  front-end:
    build: ./docker/react
    container_name: react
    tty: true
    volumes:
      - ./:/usr/src/app
    ports:
      - 3000:3000

コンテナに入ってyarn startしてみると、ターミナルに以下の表示が。

どうやらhttp:localhost:3000が開かれている様子。

ホスト側でhttp:localhost:3000に入ってみると、ちゃんと初期画面が表示される。

これが、ポート番号を特にいじらなかった場合。

3000:4200の場合

次に、ポート番号を3000:4200としてみる。
<Host Port>:<Container Port>なので、ホスト側のポート番号が3000で、コンテナ側が4200になっている。

コンテナ側はポート番号を4200にしたので、.envファイルを以下のように書き換える。

.env

PORT=4200

コンテナに入ってyarn startしてみると、以下のような表示が得られる。

しかし、これの通りhttp:localhost:4200を入力しても、アクセスできない。

ホスト側はポート番号を3000としているので、http:localhost:3000にアクセスする必要がある。
http:localhost:3000を入力すると、ちゃんと初期画面が表示される。