git action 이용해서 자동 배포를 해봤다. + 외주 근황썰

외주 근황 :

오랜만에 블로깅이네요... 정말 바빴습니다. 클로즈 베타를 눈앞에 두고 있는 상황이었기 때문에 자발적으로 야근에 참여하고 (대표님은 안 해도 된다고 하시지만 안 하면 시간 못 맞출 거 같아서 안될 거 같아요 대표님...) 정신없이 프로젝트 개발에 힘쓰고 회의에 참여해서 주도적으로 열심히 회사생활을 하고 있습니다. 외주인데도 불구하고 직접 주 5일 출근하는 걸 원하셨기 때문에 말만 외주지 사실 비정규직 같은 느낌입니다. 다음 주 월요일에 외주 연장이 될지 말지 결정되는데 좋은 결과가 있었으면 좋겠네요.

 

이 회사에 고용된 이유이자 메인 업무는 사실 이미 만들어진 프로젝트에서 클로즈베타를 진행하면서 생기게 될 문제점들을 파악하며 QA를 진행하는 거였습니다. 하지만 계획된 건 언제나 지켜질 수 없습니다. 약속됐던 프로젝트 개발기간이 미뤄지면서 QA 업무를 할 수 없었고 프로젝트 개발에 참여해야 했습니다. 맡은 업무는 어드민 페이지를 제작하는 거였고 다행히 기한안에 어드민 페이지를 제작할 수 있었습니다. 어드민 페이지를 제작해 주면 배포 작업과 자동 배포 파이프라인을 구축하는 건 메인 개발팀이 해주기로 했었는데 (메인 개발팀도 외주로 의뢰된 팀입니다. 즉 저희 회사에 프론트엔드는 저 혼자입니다.) 개발팀이 다른 개발이 더 급해진 관계로 자동 배포를 부탁하게 됐습니다. 자동 배포와 배포를 많이 해보지 않았기 때문에 걱정이 앞섰지만 차근차근 공부하면서 진행하면 괜찮을 거 같다고 판단 후 오늘 퇴근 전까지 배포와 자동 배포를 마무리하겠다고 말했습니다. (말하자마자 속으로 저질러버렸다고 생각한 건 덤입니다.)

 

원래 내 계획은 이랬다.

• 프로젝트에 도커파일을 작성한다.
  • Dockerfile : 어떤 이미지를 베이스로 사용할지,
    어떤 파일을 복사할지, 어떤 명령을 실행할지가 적혀있다.
• git action을 작성한다.
  • git action : main 브랜치에 push가 감지되면 도커파일을 읽고 도커 이미지를 빌드하고
    도커 허브에 로그인을 한 뒤 도커 허브에 빌드된 이미지를 푸쉬한다.
    ec2 인스턴스에 web hook을 이용해서 도커 허브를 pull 하라는 명령을 전달한다.
• ec2 인스턴스에 web hook을 이용할 임시 서버를 만든다.
  • web hook으로 전달된 명령을 받아서 실행시킨다.
  • 위 명령은 docker hub을 pull 하라는 명령이다.
  • pull을 하고 이미지로 컨테이너를 생성하고 컨테이너를 실행시킨다.

 

위 순서대로 차근차근하고 있었는데 ec2 인스턴스 연결을 목전에 두고 ec2 인스턴스 안 쓰고 s3와 cloudfront로 배포하는 걸로 변경됐다..

그래서 s3로 배포하는 방법을 다시 찾아보게 됐다. 배포하는 방법을 2가지나 찾아보게 됐으니 뭐 일석이조라고 생각하고 있다.

 

s3 + cloudfront로 배포하기

• git action을 작성한다.
  • git action : main 브랜치에 push가 감지되면 npm install, build를 한다.
    그리고 aws에 로그인을 하고  s3 버킷과 연결 후에 업로드한다.
    추가적으로 cloudfront의 캐싱전략을 무효화하는 명령어도 삽입한다. (+ 캐싱전략을 무효화하지 않으면 배포가 즉각적으로 반영되지 않아서 불편하다.)
• AWS IAM으로 등록된 버킷의 access_key_id와 access_secret_key, bucket_name을 알아내고
  git_action의 환경변수에 등록한다.

ec2 인스턴스에 배포하는 방법보다 훨씬 간결하고 더 쉽다. 위 과정에서 도메인을 입히고 싶으면 Route53을 이용하면 되는데 어드민 페이지라서 도메인을 입히지 말자는 의견이 나와서 생략했다.

 

아래는 s3에 업로드를 하기 위해 작성한 git action 파일이다.

name: Build React App

on:
  push:
    branches:
      - main

jobs:
  build:
    name: react build & deploy
    runs-on: ubuntu-latest

    steps:
      - name: checkout Github Action
        uses: actions/checkout@v3

      - name: Cache npm dependencies
        uses: actions/cache@v3
        with:
          path: ~/.npm
          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

      - 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

      - name: Upload to S3
        run: aws s3 sync ./dist s3://${{ secrets.AWS_S3_BUCKET_NAME }}

      - name: CloudFront Invalidation
        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_ID }} --paths "/*"

 

자동배포 구축 완료