프론트엔드 컨테이너화 및 트러블슈팅

블로그 포스트: Docker와 Docker Compose를 사용하여 프론트엔드 구성하기

소개

이번 포스트에서는 Docker와 Docker Compose를 사용하여 프론트엔드 애플리케이션을 구성하는 방법을 소개합니다. 최근 프로젝트에서 Docker와 Docker Compose를 사용하면서 겪었던 볼륨 마운트 관련 시행착오를 정리하여, 여러분이 비슷한 문제를 겪지 않도록 도움이 되기를 바랍니다.

사전 필요작업

아래의 명령어 등으로 프로젝트 루트 디렉토리 내, Next.js 앱 생성.

npx create-next-app@latest my-next-app

Docker와 Docker Compose로 프론트엔드 구성하기

먼저, Dockerfile과 docker-compose.yml 파일을 작성하여 프론트엔드 애플리케이션을 Docker 컨테이너에서 실행할 수 있도록 합니다.

Dockerfile 작성

아래는 Node.js와 Next.js를 사용하여 프론트엔드 애플리케이션을 실행하기 위한 Dockerfile 예제입니다.

# Node.js 18 버전을 사용하는 기본 이미지 설정
# 주의할 점 : Node 14 이미지는 Next.js 와 호환이 안 될 수 있음.
FROM node:18-alpine

# 작업 디렉토리 설정
WORKDIR /app

# Next.js 애플리케이션 시작
CMD ["sh", "-c", "npm install && npm run dev"]

docker-compose.yml 작성

docker-compose.yml 파일을 작성하여 Docker 컨테이너를 구성합니다.

version: '3.8'

services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app
      - /app/node_modules
    environment:
      NODE_ENV: development
    command: sh -c "npm install && npm run dev"

docker-compose up 명령어의 내부 실행 순서

docker-compose up 명령어를 실행하면 다음과 같은 순서로 작업이 진행됩니다:

1. 이미지 빌드: 지정된 서비스의 이미지가 빌드되지 않은 상태라면 docker-compose build가 자동으로 실행됩니다.
2. 컨테이너 생성: 빌드된 이미지를 사용하여 컨테이너를 생성합니다.
3. 볼륨 마운트: docker-compose.yml 파일에 정의된 대로 로컬 디렉토리를 컨테이너 디렉토리에 마운트합니다.
4. 환경 변수 설정: docker-compose.yml 파일에 정의된 환경 변수를 컨테이너에 설정합니다.
5. 명령어 실행: docker-compose.yml 파일의 command에 정의된 명령어를 실행하여 컨테이너를 시작합니다.

빌드 시점의 주의점

빌드 시점에는 Dockerfile만 사용되기 때문에 docker-compose에서 마운트한 볼륨이 적용되지 않습니다. 이는 빌드 시점에 로컬 파일 시스템의 파일들이 컨테이너에 복사되지 않음을 의미합니다.

잘못된 볼륨 마운트 설정 방법

잘못된 Dockerfile

# Node.js 18 버전을 사용하는 기본 이미지 설정
FROM node:18-alpine

# 작업 디렉토리 설정
WORKDIR /app

# npm install 시, package*.json 파일을 찾지 못해 오류 발생.
RUN npm install

# Next.js 애플리케이션 시작
CMD ["sh", "-c", "npm run dev"]

잘못된 docker-compose.yml

version: '3.8'

services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app
      - /app/node_modules
    environment:
      NODE_ENV: development
    command: sh -c "npm run dev"

올바른 볼륨 마운트 설정 방법

마지막으로, Dockerfile과 docker-compose.yml을 바탕으로 올바른 볼륨 마운트 설정 방법을 소개합니다.

개선된 Dockerfile

# Node.js 18 버전을 사용하는 기본 이미지 설정
FROM node:18-alpine

# 작업 디렉토리 설정
WORKDIR /app

# 필요에 따라 이 방식을 채택할 수 있다.
# 필자는 프론트엔드 루트 디렉토리를 컨테이너에 마운트할 예정.
# 불필요한 COPY 등이 발생함.

# package.json 및 package-lock.json 파일을 복사하고 의존성 설치
COPY package*.json ./
RUN npm install
# 나머지 파일 복사
COPY . .

# Next.js 애플리케이션 시작
CMD ["sh", "-c", "npm run dev"]

개선된 docker-compose.yml

version: '3.8'

services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app
      - /app/node_modules
    environment:
      NODE_ENV: development
    command: sh -c "npm run dev"

최종 Dockerfile

# Node.js 18 버전을 사용하는 기본 이미지 설정
FROM node:18-alpine

# 작업 디렉토리 설정
WORKDIR /app

# Next.js 애플리케이션 시작
# 컨테이너 실행 시, 의존성 설치 및 서버 시작 -> 불필요한 COPY 등 제거.
CMD ["sh", "-c", "npm install && npm run dev"]

최종 docker-compose.yml

version: '3.8'

services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app
      - /app/node_modules
    environment:
      NODE_ENV: development
    command: sh -c "npm install && npm run dev"

결론

이 포스트에서는 Docker와 Docker Compose를 사용하여 프론트엔드 애플리케이션을 구성하는 방법을 소개했습니다. docker-compose up 명령어의 실행 순서와 빌드 시점의 주의점을 이해하고, 올바른 볼륨 마운트 설정 방법을 통해 개발 환경을 효율적으로 구성할 수 있습니다. 이를 통해 여러분의 개발 프로세스가 더욱 원활해지기를 바랍니다.