React 애플리케이션을 Dockerize하는 방법

React 애플리케이션을 Docker화하면 개발 워크플로를 간소화하고 다양한 개발 단계에서 일관된 환경을 보장하며 배포 프로세스를 단순화할 수 있습니다. 이 가이드는 Docker 환경 설정부터 Docker 이미지 구축 및 실행까지 React 애플리케이션을 Dockerize하는 단계를 안내합니다.

전제 조건

1. Docker: Docker가 컴퓨터에 설치되어 있는지 확인합니다. Docker 공식 홈페이지에서 다운로드 받으실 수 있습니다.

2. React 애플리케이션: create-react-app 또는 다른 방법을 사용하여 생성된 React 애플리케이션이 있어야 합니다. 없는 경우 create-react-app을 사용하여 기본 앱을 만들 수 있습니다.
   

npx create-react-app my-react-app
cd my-react-app

1단계: Dockerfile 만들기

Dockerfile은 애플리케이션용 Docker 이미지를 빌드하는 방법에 대한 일련의 지침이 포함된 스크립트입니다. React 애플리케이션의 루트 디렉터리에서 다음 내용이 포함된 Dockerfile이라는 파일을 만듭니다.

# Use an official node runtime as a parent image
FROM node:16-alpine

# Set the working directory
WORKDIR /app

# Copy the package.json and package-lock.json files to the working directory
COPY package*.json ./

# Install the dependencies
RUN npm install

# Copy the rest of the application code to the working directory
COPY . .

# Build the React app
RUN npm run build

# Install a simple server to serve the React app
RUN npm install -g serve

# Set the command to run the server
CMD ["serve", "-s", "build"]

# Expose port 3000
EXPOSE 3000

2단계: .dockerignore 파일 생성

.dockerignore 파일은 Docker 이미지에 파일을 복사할 때 무시해야 하는 파일과 디렉터리를 지정합니다. 이렇게 하면 이미지 크기를 줄이고 빌드 프로세스 속도를 높일 수 있습니다. 다음 내용으로 루트 디렉터리에 .dockerignore 파일을 만듭니다.

node_modules
build
.dockerignore
Dockerfile
.git
.gitignore

3단계: Docker 이미지 빌드

React 애플리케이션용 Docker 이미지를 빌드하려면 애플리케이션의 루트 디렉터리로 이동하여 다음 명령을 실행하세요.

docker build -t my-react-app .

이 명령은 Docker에게 현재 디렉터리(.)를 컨텍스트로 사용하여 my-react-app 태그가 있는 이미지를 빌드하도록 지시합니다.

4단계: Docker 컨테이너 실행

Docker 이미지가 빌드되면 다음 명령을 사용하여 컨테이너에서 실행할 수 있습니다.

docker run -p 3000:3000 my-react-app

이 명령은 로컬 시스템의 포트 3000을 컨테이너의 포트 3000에 매핑하여 브라우저의 http://localhost:3000에서 React 애플리케이션에 액세스할 수 있도록 합니다.

5단계: Docker Compose(선택 사항)

여러 컨테이너를 관리하거나 더 많은 구성을 추가하려는 경우 Docker Compose를 사용할 수 있습니다. 다음 내용으로 루트 디렉터리에 docker-compose.yml 파일을 만듭니다.

version: '3'

services:
  react-app:
    build: .
    ports:
      - "3000:3000"

docker-compose.yml 파일에 정의된 서비스를 시작하려면 다음 명령을 실행합니다.

docker-compose up

결론

이 단계를 수행하면 React 애플리케이션이 성공적으로 Docker화되었습니다. 애플리케이션을 Docker화하면 다양한 환경에서 일관성이 보장될 뿐만 아니라 배포 프로세스도 단순화되어 애플리케이션을 더 쉽게 관리하고 확장할 수 있습니다.

추가 리소스

• Docker 문서
• React 문서
• Docker Compose 문서

프로젝트의 특정 요구 사항에 따라 Dockerfile 및 Docker Compose 구성을 자유롭게 사용자 정의하세요. Dockerizing을 즐겨보세요!