프로젝트 CI/CD 도입기 -3 (컨테이너화)

Node JS, React 를 각각 컨테이너화 할 예정이다.

운영은 별개 서버에서 각 서비스가 운용되겠지만, 현재는 개발/테스트 중임으로 Docker Compose 를 사용하였다.

 

각 코드의 설명은 주석을 통해 기입하였다.

 

그리고 현재 개발 중인 코드는 backend 호출 url 을 env 를 통해 관리하고 있어, 그 부분이 설정 코드에 들어가 있으니

유의하여 참고하면 될 것 같다.

 

작업 순서

1. 백앤드 도커 구성

2. 프론트앤드 도커 구성

3. 도커 컴포즈 구성

 

* 도커 설치 과정은 생략

1. 백앤드 도커 구성

 

backend/Dockerfile

FROM node:18

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

# 환경변수를 고려한 실행 명령어 설정
CMD ["sh", "-c", "npm run start:${NODE_ENV}"]

 

 

 

2. 프론트앤드 도커 구성

백엔드와 거의 유사하지만, build 과정을 포함시켰고, nginx 레이어를 추가하였다.

* npm run build 을 실행환경 별 분리를 해둬, 이미지를 실행 환경 별 build 해야하는 문제가 있다. 추후 관련 변수를 다 외부로 뺼 예정이다.

 

frontend/Dockerfile

# 1단계: Node.js를 사용하여 빌드
FROM node:16-alpine as build

# 환경 변수 설정 (default는 dev)
ARG NODE_ENV=dev
ENV NODE_ENV=$NODE_ENV
ARG REACT_APP_API_BASE_URL
ENV REACT_APP_API_BASE_URL=$REACT_APP_API_BASE_URL

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

# 종속성 설치
COPY package*.json ./
RUN npm install

# 애플리케이션 빌드
COPY . ./
RUN npm run build:${NODE_ENV}

# 2단계: NGINX를 사용하여 빌드된 애플리케이션 제공
FROM nginx:alpine

# 빌드된 파일을 NGINX HTML 디렉토리로 복사
COPY --from=build /usr/src/app/build /usr/share/nginx/html

# 포트 노출
EXPOSE 80

# NGINX 실행 명령
CMD ["nginx", "-g", "daemon off;"]

 

3. 도커 컴포즈 구성

version: '3.8'
services:
  backend:
    build:
      context: ./backend
    ports:
      - "${BACKEND_PORT}:5985"
    environment:
      - NODE_ENV=${NODE_ENV}
    networks:
      - app-network

  frontend:
    build:
      context: ./frontend
      args:
        NODE_ENV: ${NODE_ENV}  # 빌드 시 사용할 환경변수
        REACT_APP_API_BASE_URL: http://localhost:${BACKEND_PORT}/
    ports:
      - "${FRONTEND_PORT}:80"
    depends_on:
      - backend
    networks:
      - app-network

networks:
  app-network:

volumes:
  db_data:

 

 

4. 실행방법

# 도커로 실행 
# 1. 이미지 build
# backend
docker build -t <이미지명>:<tag> .
# frontend 
docker build --build-arg NODE_ENV=dev REACT_APP_API_BASE_URL=<> -t frontend-dev .

# backend
# 개발 환경 실행
docker run -e NODE_ENV=dev -p 5985:5985 <이미지명>:<tag>
# 운영 환경 실행
docker run -e NODE_ENV=prod -p 3000:3000 <이미지명>:<tag>

# frontend
docker run -p 80:80 frontend-dev

# =====================================

# 도커 컴포즈 이용 
# 개발 환경에서 실행
BACKEND_PORT=5985 FRONTEND_PORT=3000 NODE_ENV=dev docker-compose up

# 운영 환경에서 실행
BACKEND_PORT=5986 FRONTEND_PORT=80 NODE_ENV=prod docker-compose up

#윈도우
$env:BACKEND_PORT=5986; $env:FRONTEND_PORT=80; $env:NODE_ENV="dev"; docker-compose up

유의사항

1. 유연한 환경

-> 추후 별도 서버로 서비스가 운용될 수 있음을 생각하여 구성

 

2. 웹서버 설치

-> nginx 를 frontend 에 붙여두었다.

 

3. 환경변수에 의한 실행환경 분기

-> 실행 시점에서 매개변수를 통해 환경 분기 및 최대한 한 이미지 빌드 과정을 줄이려고 신경썼다 (하지만 PWA 특성상, react 를 빌드 후 실행하는 구조라, arg 전달이 docker build 시점에 되어, image 를 재사용하는 케이스에 자유롭지 못했다. 관련 종속된 변수들을 외부로 빼는 작업이 필요하다)