[Docker] Docker 배포_React 프로젝트 (코딩온)

 

 

 

 

 

Docker로 React 프로젝트를 배포하는 실습을 해보자.

 

우선 React 프로젝트를 생성할 Visual Studio Code와 Docker Desktop은 설치 및 실행이 완료된 상태여야 한다.

 

 

 

 

1. React 프로젝트 생성

 

먼저 Visual Studio Code에서 터미널을 열어 배포 실습을 진행하는 데에 필요한 React 프로젝트를 생성해 준다.

 

 

 

React 프로젝트를 생성하는 명령어는 아래와 같다.

 

 npx create-react-app react-with-docker 

 

 

 

 

이렇게 프로젝트를 자동 생성해 준다.

 

 

 npm start  명령어로 프로젝트를 로컬 환경에서 실행해 볼 수 있으며,

Docker를 활용해 배포를 진행해 보는 실습이니 따로 프로젝트를 수정하진 않고 진행한다.

 

 

 

2. Dockerfile 생성 및 작성

 

 

프로젝트의 최상단인 루트 경로에 Dockerfile을 생성한다.

 

 

 

 

 

 

생성한 Dockerfile을 열어 아래 코드와 같이 작성한다.

 

 

# 이미지 정의
FROM node:18-alpine

# 작업 공간
WORKDIR /app

# package.json 파일을 컨테이너로 복사
COPY package.json .

# npm install 명령 실행 (의존성 설치)
RUN npm install

# 프로젝트의 모든 파일을 컨테이너로 복사
COPY . .

# 3000 포트 외부에 노출
EXPOSE 3000

# npm start 명령을 실행하여 프로젝트 시작
CMD ["npm", "start"]

 

 

 

각 코드에 대한 해석을 정리해 보았다.

 

FROM node:18-alpine	FROM 명령어로 node:18-alpine 이미지를 기반으로 컨테이너 생성
WORKDIR /app	WORKDIR 명령어로 작업 디렉토리 (컨테이너 안, 파일을 저장하고 실행하는 기본 위치) 를 /app으로 설정
COPY package.json .	COPY 명령어로 package.json 파일을 컨테이너의 작업 디렉토리 (/app)으로 복사
RUN npm install	RUN 명령어로 컨테이너 내에서 npm install 명령어로 의존성 설치
COPY . .	소스코드, 정적 파일을 포함한 모든 파일을 컨테이너의 /app 디렉토리로 복사
EXPOSE 3000	컨테이너의 3000번 포트를 외부에 노출
CMD ["npm", "start"]	컨테이너가 시작될 때 npm start 명령어를 실행해 프로젝트 실행

 

 

 

 

3. Dockerfile 실행

 

 

이미지를 생성하는 build 명령어를 실행한다.

 

 docker build -t my-react-app . 

 

 

명령어 실행 시 Dockerfile에 작성한 명령어를 기반으로 이미지를 생성한다.

 

시간이 조금 걸린다 ⌛

 

 

 

완료되면 Docker Desktop에서도 확인할 수 있다.

 

 

 

 

 

4. 포트 번호 변경

 

docker run --name react-with-docker-pj2 -d -p 4000:3000 my-react-app

docker run --name {컨테이너 이름} -d -p {호스트 포트}:{컨테이너 포트} {이미지 이름}

 

 

기본으로 설정되어 있는 리엑트 프로젝트의 포트 번호인 3000번 포트가 아닌 다른 포트 번호로 배포하고 싶다면,

컨테이너 실행 시, 위와 같이 p 옵션으로 호스트 포트와 컨테이너 포트를 매핑해주어야 한다.

 

 

위 코드를 보면 4000은 호스트 포트로 외부에서 접근 가능한 포트,

3000은 컨테이너 포트로 같은 Docker 컨테이너에서 접근할 수 있는 포트이다.

 

이 두 포트를 연결하는 명령어인 것이다.

 

 

 

 

Dockerfile에서도 EXPOSE 명령어로 외부에 노출할 포트를 추가로 지정해주어야 한다.

 

 

 

 

이렇게 하면 Docker Desktop에서 두 개의 컨테이너의 포트가 다르게 설정된 것을 확인할 수 있다.