[react] Next.js + Docker + Nginx EC2 를 기준으로 Github Actions로 배포 자동화 CI / CD - 1

 

프로젝트를 하면서 정말 계속 수동으로 배포를 하는것에 번거로움을 느꼈다. CI / CD 를 미루고 미루다가 이번에 한 번 제대로 알아보고 적용해보기로 했다.

 

- 프론트 Next.js 사용

- 백엔드는 Spring, Nginx 사용

- Docker와 AWS EC2 사용

 

이미 프론트 배포는 한 번 해 놓은 상태라서, 배포 진행 과정은 나중에 정리하고 우선 CI / CD 하는 작업을 정리해보려 한다.

1. 프로젝트에 Dockerfile 만들기

FROM node:21-alpine AS builder

WORKDIR /app

COPY package*.json ./

# npm 설치
RUN npm install

COPY . .

# Next.js를 빌드한다.
RUN npm run build
#RUN npm run export

# 이미지 생성
FROM nginx

# 오픈할 포트를 적어둔다.
EXPOSE 3000

RUN rm /etc/nginx/conf.d/default.conf
RUN rm -rf /etc/nginx/conf.d/*

# default.conf을 /etc/nginx/conf.d/ 경로에 있는 default.conf에 복사한다.
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

COPY --from=builder /app/out /usr/share/nginx/html

이 부분에서도 굉장히 빌드할 때 오류가 많이 났었던 과정 중 하나였다. 차근차근 이해한대로 정리를 해보자면,

1 . dockerfile에서 nodejs의 버전을 명시해주고, builder라는 별칭을 부여한다.
2. work 디렉토리를 /app으로 설정한다.
3. package.json을 copy 해온다.
4. npm install 한다.
5. copy 해온다.
6. npm run build 한다.
7. nginx를 연결한다.
8. default.conf을 /etc/nginx/conf.d/ 경로에 있는 default.conf에 복사한다.
9. 아까 전의 별칭인 builder에 /app/out 를 복사한다.

 

이렇게 Dockerfile를 설정해준다.

2. 프로젝트에 nginx 폴더 만들기

아까 위에 nginx -> default.conf 과정 (8번) 을 해주기 위해서, 우리 프로젝트에 nginx/default.conf 파일이 있어야 한다.

 

루트경로에 nginx 폴더 / default.conf 파일을 만들어준다.

 

server {
    listen 3000;

    location / {

        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

 

이렇게 default.conf 파일을 만들어준다.

3. github 를 들어가서 github action 설정하기

 

프로젝트 레포지토리에 들어가서 Actions 을 눌러서 새로운 Actions을 생성한다.

 

name: Docker Image CI

on:
  push:
    branches: [ "main" ]

jobs:

  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
    - name: Login Dockerhub
      env:
        DOCKER_USERNAME: ${{secrets.DOCKERHUB_USERNAME}}
        DOCKER_PASSWORD: ${{secrets.DOCKERHUB_PASSWORD}}
      run: docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD      

    - name: Build the Docker image
      run: docker build -t 도커아이디/도커저장소이름 .
    - name: taging
      run: docker tag 도커아이디/도커저장소이름:latest 도커아이디/도커저장소이름:latest
    - name: Push to Dockerhub
      run: docker push 도커아이디/도커저장소이름:latest

이렇게 .github/workflows에 이렇게  넣어주면 된다.

❗️주의할 점 run할 때, 도커아이디/도커저장소이름 형식으로 해주어야 함

 

그리고 github에서 DOCKER_USERNAME, DOCKER_PASSWORD 를 깃허브 secrets에 넣어

야한다.

레포지토리 설정을 들어가서 Secrets and variables에 들어가면 Actions 이 있다. 여기서 추가해주면 된다.

DOCKERHUB_USERNAME, DOCKERHUB_PASSWORD는 우리가 도커 허브 들어가서 로그인 회원가입할 때 사용하는 아이디 비밀번호를 넣어주면 된다.

다 작성했다면, 이제 저기 위의 Commit changes 버튼을 누르면 된다.

 

그 후 Actions을 확인해보면, 정상적으로 Github와 Docker 연결이 완료되었다.

이제 커밋 푸시를 할 때 마다 github Actions이 작동된다.

다음 글에서는 , 이렇게 Docker와 연결했다면 이것을 EC2와 연결하는 작업을 해볼 것이다.