Frontend Dockerfile 작성
0. 전체 코드
(1)
# Stage 1: React 앱 빌드
# Node LTS 버전 사용
FROM node:22.13-alpine AS builder
# 작업 디렉토리 설정
WORKDIR /app
# 의존성 파일을 먼저 복사해서 캐시 활용
COPY package.json package-lock.json ./
# 의존성 설치
RUN npm ci --omit=dev
# 전체 소스 복사
COPY . .
# React 빌드
RUN npm run build
# Stage 2: Nginx로 정적 파일 서빙
# NGINX LTS 버전 사용
FROM nginx:1.26-alpine
# Nginx 설정 복사
COPY nginx-front.conf /etc/nginx/nginx.conf
# React 빌드 산출물 복사
COPY --from=builder /app/build /usr/share/nginx/html
# 포트 노출
EXPOSE 80
# NGINX 실행
CMD ["nginx", "-g", "daemon off;"]1. Stage 1: React 앱 빌드
(1) 베이스 이미지 선택 및 스테이지 이름 지정
FROM node:22.13-slim AS builder- node:22.13-alpine: Node.js LTS 버전 중 하나인 22.13의 알파인(alpine) 버전을 사용합니다.
- AS builder: 이 빌드 스테이지에
builder라는 이름을 붙여서, 나중에 다른 스테이지에서 이 스테이지의 결과물을 참조할 수 있게 합니다.
(2) 작업 디렉토리 설정
WORKDIR /app- 컨테이너 내에서
/app디렉토리를 작업 디렉토리로 설정합니다. 이후의 모든 명령어는 이 디렉토리 내에서 실행됩니다.
(3) 의존성 파일 복사
COPY package.json package-lock.json ./package.json과package-lock.json파일을 컨테이너의 현재 작업 디렉토리(/app)로 복사합니다.- 이 작업을 먼저 수행하는 이유는, 의존성 설치(
npm install)가 소스 코드 전체가 아니라 이 파일들만 변경될 때만 재실행되어 캐시 활용이 가능하게 하기 위함입니다.
(4) 의존성 설치
RUN npm ci --omit=dev- 프로젝트의 의존성들을 설치합니다.
package-lock.json을 기반으로 라이브러리들을 다운로드하고 설치합니다. --omit=dev옵션 추가 → 개발용 패키지(devDependencies) 제외 → 최종 컨테이너 크기 감소
(5) 전체 소스 복사
COPY . .- 프로젝트의 나머지 소스 코드를 모두 컨테이너로 복사합니다.
- 이렇게 하는 이유는, 의존성 설치 후에 실제 애플리케이션 코드를 복사함으로써 캐시 효율성을 높이기 위함입니다.
(6) React 빌드 실행
RUN npm run build- React 애플리케이션을 빌드합니다.
- 이 명령어는 보통
build폴더에 최적화된 정적 파일(html, css, js 등)을 생성합니다.
2. Stage 2: Nginx를 통한 정적 파일 서빙
(1) Nginx 베이스 이미지 선택
FROM nginx:1.26-alpine- nginx:1.26-alpine: 가벼운 Alpine Linux 기반의 Nginx LTS 버전을 사용합니다.
- 빌드 결과물만을 서빙하기 때문에 Node.js가 필요 없고, 대신 웹 서버인 Nginx를 사용하여 정적 파일을 빠르게 제공할 수 있습니다.
(2) Nginx 설정 파일 복사 (선택사항)
COPY nginx-front.conf /etc/nginx/nginx.conf- 커스텀 Nginx 설정 파일(
nginx-front.conf)을 컨테이너 내의 기본 설정 파일 위치(/etc/nginx/nginx.conf)로 복사할 수 있습니다.
(3) React 빌드 산출물 복사
COPY --from=builder /app/build /usr/share/nginx/html--from=builder옵션을 사용하여, 이전 스테이지(builder)에서 생성된/app/build폴더를 현재 스테이지의/usr/share/nginx/html디렉토리로 복사합니다.- Nginx는 기본적으로
/usr/share/nginx/html폴더의 파일들을 서빙하므로, 이 작업을 통해 빌드된 React 앱이 Nginx에 의해 제공됩니다.
(4) 포트 노출
EXPOSE 80- 컨테이너가 80번 포트를 사용함을 명시합니다.
- 이 포트는 HTTP 기본 포트로, 외부에서 접근할 때 사용됩니다.
(5) Nginx 실행
CMD ["nginx", "-g", "daemon off;"]- 컨테이너가 시작될 때 Nginx를 실행합니다.
daemon off;옵션은 Nginx가 포그라운드(foreground)에서 실행되도록 하여, Docker 컨테이너가 계속 실행 상태를 유지하도록 합니다.
志鐵心鏡