[Github Action] Github Action을 통한 자동 배포 적용하기 (React + NGINX)

프로젝트 중 React를 통해 구현된 프로젝트가 있고, 해당 프로젝트는 NGINX를 통하여 배포가 되고 있다. 

 

React 소스코드가 수정되면 새로운 버전을 서버에 반영하기 위해서는 아래의 과정을 거쳐야 한다

1. 프로젝트 수정 파일을 Github에 Push 한다.

2. 배포 중인 서버에 접속해서 Github의 최신 버전을 Pull한다.

3. `npm run build`를 통하여 새로운 빌드 파일을 생성한다.

4. 서버 프레임워크를 재시작한다.

 

위의 과정을 한두 번 거치는 것은 크게 불편하지 않을 수 있지만, 위 과정이 많은 횟수로 지속된다면 생산성이 비효율적으로 전환될 수 있다. 예를 들어, 위 과정을 한 번 수행하는 데 1분이 걸린다면 10회에는 10분이 소요된다. 티끌 모아 태산이랄까? 개발자에게 시간은 곧 비용이자 효율이기 때문에 이러한 과정에 드는 시간을 줄이는 것은 필수적이라 생각한다. 

 

그래서 이런 과정을 자동화하여 개발자는 오로지 개발에만 집중할 수 있게 해 주는 개념이 CI/CD이다.

CI/CD는 지속적 통합(Continuous Integration) 및 지속적 제공/배포(Continuous Delivery/Deployment)를 의미하며, 소프트웨어 개발 라이프사이클을 간소화하고 가속화하는 것을 목표로 합니다.

 

여러 CI/CD 프레임워크가 있지만 Github에 친숙한 Github Action을 사용하여 위 1-4번의 과정을 자동화 하려고 한다. Github Action은 프로젝트 폴더에 .github/workflwos/${name}.yml 파일을 생성해서 특정 이벤트 발생에 따른 프로세스를 수행할 수 있도록 지시할 수 있다. 

 

프로젝트가 돌아가고 있는 서버의 구성은 아래와 같다.

- OS : Ubuntu 22.04

- Hosting : AWS EC2

- Frontend : React

 

자동화 하려고 하는 프로세스는 아래와 같다.

1. Github Repo `master` branch에 Push

2. `master` branch에 Push가 되었을 경우 EC2에 접속하여 `master` 브랜치의 파일을 pull 하여 가지고 온다.
3. 업데이트 된 프로젝트 파일을 바탕으로 `npm run build` 명령어를 수행한다.

4. NGINX를 재시작하여 최신 파일을 Serving 하도록 한다.

 

[1-4]를 자동화 하기 위해 deploy.yml 파일을 생성하여 설정하였다.

name: Deploy to AWS EC2

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Install SSH key
      uses: webfactory/ssh-agent@v0.5.3
      with:
        ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}

    - name: Deploy to EC2
      run: |
        ssh -o StrictHostKeyChecking=no ${{ secrets.EC2_USER }}@${{ secrets.EC2_HOST }} <<EOF
          cd ${{ secrets.PROJECT_PATH }}
          git pull origin master
          npm install
          npm run build
          sudo service nginx restart
        EOF

 

위 .yml 파일을 .github/worflows/deploy.yml에 위치하고, Github에 Push를 하면 위의 CI/CD 프로세스가 시작되고, 위 과정에 따라 최종적으로 EC2 인스턴스에 최종 프로젝트 파일이 제공된다. run 부분은 일반적으로 .sh 파일을 작성하여 설정하면 더 깔끔하다.

 

SSH_PRIVATE_KEY는 AWS에서 .pem을 사용하는 경우에 해당 파일에 기록되어 있는 데이터를 설정해 주면 된다. 기록되어 있는 데이터는 아래와 같은 포맷을 가지고 있다.

-----BEGIN RSA PRIVATE KEY-----
blar~ blar~
-----END RSA PRIVATE KEY-----

 

위의 과정을 그대로 따라하면 귀찮은 과정을 자동화 하여 개발의 질을 높일 수 있다!

---

참고
https://www.redhat.com/ko/topics/devops/what-is-ci-cd

CI/CD(CI CD, 지속적 통합/지속적 배포): 개념, 툴, 구축, 차이