About docker-compose PORT number

Introduction

I didn't understand the meaning of the item to specify the port number in docker-compose, so I made a note for myself. Try various items of port number and check the behavior.

In the case of 3000: 3000

Prepare docker-compose for React. Try to set the port number to 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

When I enter the container and try yarn start, the following display is displayed in the terminal. Apparently http: localhost: 3000 is open.

When you enter http: localhost: 3000 on the host side, the initial screen is displayed properly.

If this is the case if you didn't mess with the port number.

For 3000: 4200

Next, let's set the port number to 3000: 4200. Since <Host Port>: <Container Port>, the port number on the host side is 3000 and the port number on the container side is 4200.

Since the port number is set to 4200 on the container side, rewrite the .env file as follows.

.env

PORT=4200

If you enter the container and try yarn start, you will get the following display. However, as you can see, even if I enter http: localhost: 4200, I cannot access it. Since the host side sets the port number to 3000, it is necessary to access http: localhost: 3000. If you enter http: localhost: 3000, the initial screen will be displayed properly.