Docker와 Nginx를 활용해 react 프로젝트 ec2에 배포 및 jenkins를 활용한 CI/CD 구축 + docker compose 활용 - 2(docker 및 nginx 설정)

docker 및 nginx 작업 과정 및 설명

docker, docker-compose, nginx, jenkins, react, ec2 배포

1. 배포 흐름 요약 및 q&a
2. 배포 프로젝트 docker 및 nginx 파일 설정
3. 젠킨스와 깃랩 연결 및 ci/cd 설정

1. 도커 파일 작성

프로젝트 최상단 디렉토리에 다음과 같이 Dockerfile을 작성해주자

# Dockerfile

# 스테이지 1
# 베이스 이미지: 노드 (alpine: 경량 버전, builder: stage)
FROM node:18.12.1-alpine as builder

# 작업 경로 설정
WORKDIR "/app"

# 의존성 설치
COPY package.json yarn.lock ./
RUN yarn install --production=false
# 프로젝트 가져오기
COPY . .

# 환경변수 설정
ENV PATH /front-end/node_modules/.bin:$PATH

# 빌드
RUN yarn build

# 스테이지2
# 베이스 이미지: 엔진엑스(웹서버)
FROM nginx

# 작업경로 생성하고 설정
RUN mkdir /app
WORKDIR /app

# 기존 엔진엑스 설정파일 지우고 우리가 작성한 설정파일로 대체
RUN rm /etc/nginx/conf.d/default.conf
COPY ./nginx.conf /etc/nginx/conf.d

# builder 스테이지 (바로 위)의 빌드 파일을 가져온다(경량화) 
COPY --from=builder /app/build /app/build

# 3000번 포트 열어두기
EXPOSE 3000

# nginx를 포그라운드로 실행
CMD ["nginx", "-g", "daemon off;"]

빌드(노드) - 서버 연결(nginx)의 두 단계로 구성된 멀티스테이징 도커파일이다.

빌드 단계

✔ 노드 버전(프로젝트 버전에 맞는 버전)을 베이스 이미지로 설정한다.

• -apline은 리눅스에서 쓰는 경량버전
• as builder는 해당 빌드 스테이지의 이름 (이후 nginx 스테이지에 이름을 접근한다)

✔ 연결된 레포지토리로부터 프로젝트를 가져와 빌드를 해준다 (본 프로젝트는 yarn을 사용했다. npm을 사용했으면 npm 명령어를 입력해주면 된다.)

서버 배포 단계

✔ nginx를 베이스 이미지로 설정한다.

✔ nginx의 default 설정 파일을 우리가 작성한 nginx 설정파일로 바꿔준다.

✔ builer 스테이지에 생성한 빌드 파일을 가져온다

✔ 3000번 포트를 열어두고 nginx를 포그라운드로 실행한다

2. nginx.conf 파일 작성

도커파일 중간에 보면 nginx 설정을 해주는 부분이 있다. 해당 설정파일을 같은 위치 (./nginx.conf)에 작성해주자

server {
    listen 3000;
    location / {
        root    /app/build;
        index   index.html;
        try_files $uri $uri/ /index.html;
    }
}

✔ nginx를 위에서 설정한 3000번 포트에 대해서 열어두고 파일의 경로를 지정해주는 내용의 간단한 설정파일이다

✔ 해당 파일을 /etc/nginx/conf.d 경로에 넣어주면 컨테이너 내부의 메인 설정파일인 /etc/nginx/nginx.conf 파일에서 해당 경로에 있는 각 서버의 개별 설정 파일을 읽어들이는 방식(include)이다.

✔ 참고로 해당 nginx는 이후 리버스 프록시 및 ssl을 적용할 ec2 서버 자체의 nginx가 아니라 frontend 컨테이너 내부의 nginx기 때문에 헷갈리면 안된다!

3. docker-compose.yml 작성 (선택)

같은 위치에 docker-compose.yml 파일을 작성해주자

사실 이 부분은 위에도 언급했듯이 선택사항이라 프로젝트 전체에서 굳이 멀티컨테이너 관리를 할 필요가 없으면 생략해도 된다.

version: "3.7"

services:
  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: ./Dockerfile
    ports:
      - "3000:3000"
    restart: always

✔ 싱글 컨테이너라 컨테이너 이름과 도커파일 위치, 포트 번호만 적은 간단한 파일이다

✔ 이렇게 적은 docker-compose.yml 파일이 도커에 대한 실행파일 역할을 하게 돼 이후 jenkins의 쉘스크립트가 매우 단순해진다.

---

여기까지가 프로젝트 파일에서 도커 및 nginx 설정 파일을 적는 부분이다.

다음 글에서는 이제 해당 프로젝트가 업로드된 gitlab 레포지토리를 jenkins와 연결해 CI/CD를 구축해보겠다.