도커 파일 작성 기본 예제(React 프로젝트 예시)

이번 글에서는 리액트 프로젝트의 Dockerfile 작성 방법을

간단한 예제를 통하여 이해해보도록 하겠습니다.

(아래의 Step 1과 Step 2 부분의 내용을 이어서 한 파일로 작성해주시면 됩니다.)

 

 

Step 1. 애플리케이션 빌드

# Step 1: 애플리케이션 빌드
FROM node:22.6.0-slim AS builder

# 앱 디렉토리 생성
WORKDIR /app

# package.json 및 package-lock.json 파일 복사
COPY package*.json ./

# 모듈 설치
RUN npm install

# 코드 복사
COPY . ./

# 빌드 진행
RUN npm run build

 

도커 파일의 앞 부분에서는 애플리케이션 빌드를 진행하게 됩니다.

먼저, 원하는 node.js 버전을 선택하여 베이스 이미지로 고른 뒤,

위의 명령어 순서대로 진행해주시면 빌드 과정이 완료됩니다.

(여기서는 루트 디렉토리 내에 필요한 파일들이 있다고 가정했다는 점에 유의해주세요.)

 

 

Step 2. 애플리케이션 실행

# Step 2: 애플리케이션 실행
FROM node:22.6.0-slim

# 실행할 디렉토리 지정
WORKDIR /app

# 빌드된 파일을 제공하기 위해 serve 패키지 전역 설치
RUN npm install -g serve

# Step 1에서 빌드된 애플리케이션 복사
COPY --from=builder /app/build ./build

# 애플리케이션이 실행될 포트 설정
EXPOSE 80

# serve 명령어로 애플리케이션 실행
CMD ["serve", "-s", "build", "-l", "80"]

 

도커 파일의 뒷 부분에서는 Step 1에서 빌드한 파일을 실제로 실행하기 위한 환경을 설정하고

마지막 줄의 serve 명령어로 앱 실행을 진행시키는 명령어의 예시입니다.

 

참고로, 도커 빌드 시 node_modules 혹은 build 등의 디렉토리의 항목들은

로컬에 저장된 내용과 중복되어 포함되지 않는 것이 좋으므로,

Dockerfile.dockerignore 파일 내에 다음의 항목을 명시해주시면 좋습니다.

node_modules
build

 

이 글이 도커 작업 과정에 도움이 되셨으면 좋겠습니다. 잘 봐주셔서 감사합니다.