[AWS] Github Action과 연동하여 배포하기(프론트엔드)

GitHub Action

: Github Action은 Github에서 제공하는 배포 서비스

Github는 MS에 인수되면서 기존의 소스저장소(CI)의 기능에서 DevOps플랫폼으로 발전중

👉요즘 트렌드는 CI/CD의 통합 (소스저장소와 배포시스템 통합)
👉CI/CD를 만든다 = 배포 파이프라인을 만든다=소스를 push하면 바로 인프라에 배포할 수 있는 환경을 만든다

Github Action에서 배포를 하려면?

👉github가 IAM과 연동하여 S3와 CloudFront 2개의 서비스에 접근

1. index.html이 소스 Repository에서 push 됐을 때,
   해당 index.html을 S3 CloudFront로 연결된 인프라 환경에 배포하려면
   첫번째로, S3에 index.html 파일이 업로드 되어야함.
   ✅github action에서 s3에 배포할 수 있는 권한이 필요(IAM)
   IAM의 assess id와 secret key를 github actino과 연동시킨다.
   두번째로, S3에 업로드 된 파일이 CloudFront에도 변동 되게 하기 위해선 CloudFront에 캐싱 된 기존의 소스를 invalication 시키고, 새롭게 캐싱이 될 수 있도록 해야함
2. GitHub action 사용법

   👉Github 소스 Repository에
   .github/workflows/main.yml 추가

Github Action에 배포해보기

1. IAM의 권한 설정을 변경해준다
   

2. IAM과 연동할(Github Action을 사용할) Git Reopsitory를 생성 > action 탭
   

3. repository url을 복사하여 pycharm과 연동
   Git > clone > url 탭에 복사한 url 붙여넣기 (Git과 연동된 python 프로젝트 생성)
   

4. (+)GitActionCloudFront문서에서 Git Action을 쓰기 위한 방법들을 문서로 볼 수 있음 (CloudFront, S3에 관한 .yml문서들을 market place에서 찾아 쓸 수 있음)

5. 만들어진 repository에 index.html을 만들어준다.
   .github/workflows/main.yml 도 추가해주어야 하기 때문에 프로젝트의 디렉토리 구조를 맞춰준디 파일을 추가해줌

• main.yml

name: my-front
on:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
      AWS_REGION: 'ap-northeast-2'
    steps:
      - name: Checkout source code.
        uses: actions/checkout@master
      - name: Upload binary to S3 bucket
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --acl public-read --exclude '*' --include 'index.html'
        env:
          AWS_S3_BUCKET: ${{ secrets.BUCKET_NAME }}
      - name: Invalidate cache CloudFront
        uses: chetan/invalidate-cloudfront-action@master
        env:
          DISTRIBUTION: ${{ secrets.DISTRIBUTION_ID }}
          PATHS: '/index.html'
        continue-on-error: true

6. 작성한 파일들을 commit하고 push해준뒤 repository에 가보면
   2번 과정과는 다르게 action 탭에서 git action이 동작하고 있는 걸 확인할 수 있다.
   
7. git action과 iam도 연동을 해줘야함 (key id 와 access key 필요)
   

• Repository의 Settings탭
  (위 그림의 노란 네모쳐진 부분 전부를 settings에서 추가해줘야함)
  (IAM을 만들 때 따로 저장해둔 ACCES_KEY 와 SECRET KEY,
  BUCKET_NAME, DISTRIBUTION_ID를 추가 )
  
• main.yml 다시 push(재배포) > Action tab에서 오류 없이 초록 체크창이 뜬 걸 확인가능 (배포 된 것!)
  

8. 배포가 잘 됐는지 확인하기 위해 index.html의 코드를 살짝 바꾸고, 다시 commit 후 push를 해주면, 내역이 push되면서 git actions가 다 시 돌아가는 걸 확인할 수 있다!