사이드프로젝트에 CI/CD 적용하기

지난주 정보처리기사 시험까지 종료되어 드디어 취업준비에 다시 힘을 쏟을 수 있게 되었다.

 

그 중 원래 진행해오던 팀 사이드프로젝트가 각자의 바쁜 삶을 이유로 흐지부지 되고 있었는데 모두 여유를 되찾아 다시 시작하게 되었다.

 

나도 경력이 1년 6개월로 많진 않지만 팀원분들이 백엔드나 AWS사용 경험이 그다지 많지 않으셔서 내가 백엔드나 DB, AWS에 관한 지식을 많이 알려주고 싶었다. (물론 나도 백엔드를 주력으로  하지 않지만.. 그래도 내가 알고있는 선에서..)

 

그래서 얼마전에 팀원들에게 EC2 PEM키로 접속하고, 배포하는 방법까지 글로 작성하여 알려줬는데 팀원 중 한 분이 CI/CD에 관한 관심을 가지셔서 아주 간단한 CI/CD버전을 적용하고 방법을 가르쳐 주게 되었다.

 

---

 

CI/CD 적용 순서

 

일단 우리 프로젝트는 EC2에 프론트와 백엔드가 각각의 레포지토리로 존재한다. 그래서 따로 빌드 파일만 올려둔게 아니라 코드 자체가 올라가 있는 형태이다.

 

그래서 다음과 같은 순서로 CI/CD를 적용했다.

 

1. 개발자가 개발 브랜치에서 수정을 진행한 뒤 push한다.

2. 개발 브랜치를 main으로 PR을 올린다.

3. 코드 리뷰와 여러가지 수정까지 다 마치면 main으로 merge를 진행한다.

4. github action을 통해 EC2에서 변경된 main을 pull 받는다.

5. pull 받은 프로젝트를 빌드한다.

---

일단 여기까지는 프론트엔드와 백엔드 레포지토리 모두 동일하다. 그러나 프론트엔드는 nginx를 통해 빌드된 index.html의 경로만 찾아주면 되므로 여기서 완료이고 백엔드는 PM2를 사용하여 접근하기 때문에 PM2를 다시 켜주는 코드를 작성해야한다.

 

*백엔드 PM2를 적용하는 경우

6. PM2를 restart 하여 변경된 빌드파일을 켤 수 있도록 한다.

 

위와 같이 전행하면 아주 간단한 버전의 CI/CD는 완료된다.

실제로는 테스트도 진행하는 등 더 추가하면 좋지만 일단 간편한 배포를 위한 목적이었기 때문에 이정도만 진행하기로 했다.

 

 

github action

위에서 언급했듯이 나는 github action을 통해서 CICD를 진행했다.

github action을 이용하기 위해서 일단 프로젝트의 .github 폴더에 workflows라는 폴더를 만들고, 그 안에 deploy.yml파일을 생성했다.

 

그리고 파일 내용은 다음과 같다. (다음 yml은 백엔드 배포용인데, pm2를 제외하고 프론트와 매우 유사하니 이것만으로 설명글을 남긴다..)

 

name: Deploy Backend to EC2 (PR merged into main)

on:
  pull_request:
    branches: [main]
    types: [closed]

jobs:
  deploy:
    if: github.event.pull_request.merged == true
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Deploy to EC2
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.EC2_HOST }}
          username: ${{ secrets.EC2_USER }}
          key: ${{ secrets.EC2_SSH_KEY }}
          script: |
            set -e

            # Load NVM (required for yarn)
            export NVM_DIR="$HOME/.nvm"
            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

            # Add yarn global bin (pm2 resides here)
            export PATH=$PATH:$HOME/.yarn/bin

            echo "=== Backend: cd project ==="
            cd ${{ secrets.EC2_BACKEND_PATH }}

            echo "=== Backend: git pull ==="
            git pull origin main

            echo "=== Backend: yarn install ==="
            yarn install --frozen-lockfile

            echo "=== Backend: yarn build ==="
            yarn build

            echo "=== Backend: pm2 restart ==="
            pm2 restart all

            echo "=== Backend Deployment Completed ==="

 

일단 name은 그냥 이 액션이 진행할 이름일 뿐이다.

 

on: 부분이 트리거라고 보면 된다.

그 부분을 해석해보면

main 브랜치로 들어온 pull_request가 closed(닫힐)때 실행한다는 의미이다.

 

그 다음 조건문이다.

if: github.event.pull_request.merged == true

이건 PR이 merge된 경우만 실행된다는 의미이다.

그냥 close가 되면 실행되지 않고, merge로 close되어야 실행된다는 의미이다.

 

runs-on: ubuntu-latest

깃허브 액션이 우분투 환경에서 실행된다는 의미이다.

 

- name: Checkout
  uses: actions/checkout@v4

이건 공식 액션 라이브러리를 가져와 실행한다는 의미이다.

이 라이브러리는 레포지토리 코드를 가져오고, 특정 커밋 체크아웃을 하고, 기본 깃 환경을 구성한다.

 

- name: Deploy to EC2
  uses: appleboy/ssh-action@v1.0.3
  with:
    host: ...
    username: ...
    key: ...
    script: |
      ...

이 부분은 EC2로 SSH접속을 도와주는 라이브러리를 실행한다는 의미이다.

 

script: |
  git pull
  yarn install
  yarn build
  pm2 restart

이 부분이 EC2에 접속한 뒤 실행할 명령들이다.

아까 설명했듯이 pull 받고, 의존성 설치 후 빌드하고, 백엔드의 경우 pm2를 restart하는 과정이다.

 

 

환경변수

${{ secrets.EC2_HOST }} 이런식으로 작성한 부분은 환경변수이다.

깃허브의 setting에 들어가서 설정해주면 된다.

 

위 내가 설정한 파일에서 각 환경변수는 다음을 의미한다.

EC2_HOST	EC2 서버의 IP/도메인	SSH 접속 대상 서버 지정
EC2_USER	EC2 리눅스 사용자 계정	SSH 인증 시 사용자 정보
EC2_SSH_KEY	EC2 개인키(PEM)	SSH 접속 인증 키
EC2_BACKEND_PATH	백엔드 프로젝트 위치	git pull, install, build 실행 폴더

 

 

마치며..

이렇게 yml파일을 작성하고 환경변수를 등록함으로써 CICD를 간단히 구현해봤다.

팀원들도 쉽게 이해하려고 문서화를 따로 해뒀는데, 너무 자세한 설명글이 많았어서 블로그에는 최대한 간단하게만 작성해봤다.

나는 지식이 많지 않지만 누군가에게 내가 아는 것을 공유할때 굉장히 큰 보람을 느끼는 편이다.

그래서 빨리 배우고 누군가와 공유하는 스터디활동을 계속 이어나갈 예정이다.