[AWS/GIT] GitHub Action을 이용한 자동 배포 만들기 - 프론트

🐱 GitHub Action을 이용한 자동 배포 만들기

✅ S3 CloudFront와 GitHub Action을 이용해서 CI/CD 만들기

✅ 만드는 이유는 소스를 push 하면 바로 인프라에 배포하는 환경을 만들기 위해서.

✅ 배포 파이프라인, CI/CD 라고 함.

 

 

1. IAM 권한 추가

(1) IAM 서비스 접속, 사용자 이름 클릭 !

 

 

 

 

(2) 권한 추가 클릭 !

 

 

 

(3) 기존 정책 직접 연결 -> CloudFrontFullAccess 선택하여 권한 추가 

 

 

 

(4) 권한에 S3, CloudFront에 대한 권한 확인 완료 !

 

 

2. GitHub Action을 이용한 배포 준비 

 

 

 

(1) GitHub repository 만들고 Pycharm 연동하기

*️⃣ 방법 !

[GIT] Git과 Pycharm 연동하기

 

(2) 문서 보기

*️⃣ GitHub Action 사용법 참고 문서 

GitHub Marketplace: actions to improve your workflow

 

 

(3) 배포할 index.html 파일 추가

 

 

 

(4) 배포 스크립트 추가 

✅ .github/workflows/main.yml

✅ 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

 

 

(5) [(3),(4)] 파일 Commit, push 하기

 

 

 

(6) GitHub 에서 Action 메뉴 클릭하여 Action 확인 !

✅ AWS Access key 를 설정하지 않아서 오류 발생. (7)번에서 해결 !

 

 

 

(7) secret 설정하기

✅ Setting -> secrets -> New repository secret

✅ 이전에 복사해 둔 iam 사용자의 AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY를 각각 추가 !

 

✅ 같은 방법으로 BUCKET_NAME (S3 참고), DISTRIBUTION_ID(CloudFront 참고) 추가 !

 

 

(8) 다시 커밋, 푸시 해서 확인하기

✅ 초록색 체크 모양 뜨면 성공 !

✅ CloudFront에서 URL 접속하면 에러 없이 잘 나타남 

 

 

(9) 성공 확인

✅ index 파일 수정 후 commit, push 했을 때, 바로 반영됨.