[React] react프로젝트 github action으로 CI/CD 구축하기(aws S3, cloudfront)

 

해당 글은 aws S3 + cloudfront로 이미 배포된 프로젝트를 github action으로 배포 자동화를 하는 과정을 담은 글로,
S3 + cloudfront로 배포하는 전과정을 담고있지는 않습니다. 

 

 

계기

---

 사실 나는 devops와는 거리가 먼 프론트엔드 개발자라 그냥 github action으로 cicd하면 된다더라!!! 정도만 풍문으로 들었다ㅋㅋ 지난 프로젝트 때는 그냥 포트폴리오용 플젝이었고, 최종 완성된 프로젝트를 한번만 배포하고 유기....했기때문에 배포자동화가 필요없었다. 그러나 이번 Froggy 프로젝트는 향후 실제 유저 유치를 목표로 지속적인으로 기능이 추가될 예정이기 때문에 배포할 일이 잦을 예정이다. 매번 빌드하고 S3에 올리는 것이 귀찮으니 이참에 배포 자동화라는 것을 해보자!!!해서...하게되었다.
 생각보다 너무 간단한 과정이었지만 뭐든 처음엔 어색하고 헤매기 마련이니 나처럼 프론트엔드 배포자동화는 처음인 분들을 위해 내가 이해한 내용을 최대한 쉽게 정리해보았다.  

 

 

CI/CD란

---

지속적인 통합(Continuous Integration)

CI는 빌드 및 테스트 자동화를 의미합니다. 프로젝트를 진행할 때 개발자들이 각자의 feature 브랜치에서 작업을 하고 한개의 브랜치에서 통합하는 과정을 거치는데, 여기서 에러가 발생하면 다시 디버깅하고 다시 합치고 과정을 반복하게 됩니다. 이러한 반복되는 과정을 자동화하는 것이 CI입니다.

 

지속적인 서비스 제공(Continuous Delivery) or 지속적인 배포(Continuous Deployment)

CD는 배포 자동화를 의미합니다. CI과정에서 문제가 없이 테스트를 통과하고 빌드가 완료된다면, 자동으로 프로덕트에 해당내용을 반영합니다.

 

github action이란

---

소프트웨어 workflow를 자동화할 수 있도록 도와주는 도구들 중 하나.

github action는 push나 pull_request를 트리거로 테스트, 배포, 기타 반복적으로 실행할 작업 등을 실행시켜줍니다.

 

github action으로 배포 자동화하기

---

1. github action workflow 파일 생성

프로젝트의 .github 폴더에 workflows라는 폴더를 만들고 yaml 파일 하나를 만듭니다. 저는 전에 PR template를 적용하려고 해당 폴더를 만들어 두었었는데, 해당 폴더가 없다면 새로 만들어서 진행하시면 됩니다.

 

2. front-build.yaml 내용

파일을 만든 후 해당 브랜치에 이 파일을 push해 주시면 됩니다. 제가 이해하고 찾아본대로 주석을 달아두었습니다.

name: Front Deployment

# trigger가 되길 바라는 action을 입력합니다. push / pull_request가 있습니다.
# 저는 develop 브랜치에 push가 되면 actions을 실행하도록 설정했습니다.
on:
  push:
    branches:
      - develop

# 위의 이벤트가 트리거되면 실행할 목록입니다.
jobs:
  build:
    name: react build & deploy
    # runner가 실행될 환경을 지정합니다.
    runs-on: ubuntu-latest
    
    # name은 단계별로 실행되는 액션들의 설명을 담은 것으로, 나중에 github action에서 workflow에 표시됩니다.
    # uses 키워드로 Action을 불러올 수 있습니다.
    steps:
      
      # 레포지토리에 접근하여 CI서버로 코드를 내려받는 과정입니다.
      - name: checkout Github Action
        uses: actions/checkout@v3
      
      # workflow가 실행될 때 필요한 파일 중에서 거의 바뀌지 않는 파일들을 GitHub의 캐시에 올려놓고 CI 서버로 내려받습니다.
      # 프로젝트에서 자주 바뀌지 않는 수많은 패키지를 매번 다운받아 올리면 시간도 오래걸리고 네트워크 대역폭을 많이 사용하게됩니다.
      - name: Get npm cache directory
        id: npm-cache-dir
        run: |
          echo "::set-output name=dir::$(npm config get cache)"
      - uses: actions/cache@v3
        id: npm-cache
        with:
          path: ${{ steps.npm-cache-dir.outputs.dir }}
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      
      - name: install npm dependencies
        run: npm install
        
      - name: react build
        run: npm run build
      
      # aws에 접근하기 위한 권한을 받아옵니다.
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_S3_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_S3_SECRET_ACCESS_KEY_ID }}
          aws-region: ap-northeast-2
      
      # S3에 build 파일을 올립니다.
      - name: Upload to S3
        env:
          BUCKET_NAME: ${{ secrets.AWS_S3_BUCKET_NAME}}
        run: |
          aws s3 sync \
            ./build s3://$BUCKET_NAME
      
      # cloudfront로 배포되는 파일은 기본설정 상 24시간동안 캐시가 유지됩니다.
      # 배포 후 S3에는 최신 정적리소스가 올라가있지만 엣지로케이션엔 이전 파일이 올라가있는 상태라는 의미입니다.
      # 바로 변화가 반영되길 바란다면 invalidation을 해주면 됩니다.
      # 해당 부분은 과금될 수 있으니 확인 후 사용하세요!
      - name: CloudFront Invalidation
        env:
          CLOUD_FRONT_ID: ${{ secrets.AWS_CLOUDFRONT_ID}}
        run: |
          aws cloudfront create-invalidation \
            --distribution-id $CLOUD_FRONT_ID --paths /*

 

3. github secret 세팅하기

프로젝트 repo에 Settings - Security - Secrets and variables - Actions로 들어가서 New repository secret을 누릅니다.

 

3번 과정은 2번 템플릿에서 ${{ secret.변수명 }}에 변수명에 들어갈 키들을 등록해주는 겁니다. react .env파일과 유사합니다! 2번에 있는 템플릿을 그대로 사용하실 때, 등록해야할 secret은 4개입니다.

AWS_S3_ACCESS_KEY_ID : aws iam에서 발급받은 엑세스 키입니다.

AWS_S3_SECRET_ACCESS_KEY_ID : 엑세스 키를 발급받을 때 한번만 알려주는 secret입니다. 배포하실 때 따로 저장해두셨다면 그걸 사용하시면 되고 까먹으셨다면 엑세스키(CLI용도로)를 새로 생성해도됩니다. 

AWS_S3_BUCKET_NAME : S3 버킷 이름

AWS_CLOUDFRONT_ID : cloudfront Id

 

4. 확인하기

2번 템플릿을 보시면 저는 develop 브랜치에 푸시를 하면 github action이 작동하도록 설정했습니다. develop브랜치에 push를 하고 repo Actions 탭에서 성공 여부를 확인할 수 있습니다. 저는 빌드 에러랑 access key secret 불일치로 여러번 실패했는데 키를 새로 발급받아서 하니 잘 되었습니다!

 

연관된 다음 글

---

[React] github action 리액트 .env file 추가하기

 

 

References

---

https://kukim.tistory.com/144

https://seosh817.tistory.com/104