포트 맵핑

우리가 이미지를 만들 때 로컬에 있던 파일(package.json)등을 컨테이너에 복사해줘야 했습니다.
그것과 비슷하게 네트워크도 로컬 네트워크에 있던 것을 컨테이너 내부에 있는 네트워크에 연결 시켜줘야 합니다.

리액트는 3000번 포트를 이용해서 실행이 됩니다.

하지만 3000번 포트에서 사이트가 안 열릴 경우에는,
컨테이너 안에 3000번을 접근하지 못한다면 "포트매핑"을 해줘야합니다.

포트 매핑의 핵심에 대해 알아보겠습니다.

포트 매핑은 로컬 호스트의 포트와 컨테이너 내부의 포트를 연결하여 브라우저가 컨테이너 내부 애플리케이션에 접근할 수 있도록 하는 것입니다.

브라우저: http://localhost:3000을 통해 로컬 네트워크의 3000번 포트에 요청을 보냅니다.
로컬 네트워크: 브라우저의 요청은 로컬 호스트에서 지정된 포트(3000번)로 전달됩니다.
컨테이너: 로컬 네트워크의 포트 3000번은 컨테이너 내부의 포트 3000번과 매핑됩니다. 이 매핑은 -p 3000:3000 옵션으로 설정됩니다.
컨테이너 네트워크: 컨테이너 내부의 3000번 포트는 컨테이너 안에서 동작하는 애플리케이션으로 연결됩니다.

그림을 다시 설명하자면,
브라우저가 로컬 네트워크를 통해 컨테이너의 포트로 연결되는 과정이 나타나 있고
-p 3000:3000 명령어는 로컬 호스트(왼쪽)와 컨테이너 내부(오른쪽) 간의 포트 연결을 설정합니다.

이 설정으로 인해 브라우저에서 localhost:3000에 접속하면, 컨테이너 내부 애플리케이션이 응답을 제공합니다.