github Action 을 CI/CD 세팅하기

 

깃허브에 push 하면 AWS S3 에 자동 배포되고 cloudfront의 캐시도 update 하기

 

 

github action 코드를 작성할 폴더 생성

Project 
      └── .github
              └── workflows

 

 

.github 폴더와 이안에 workflows 폴더를 생성을 하고 

.yml 파일을 만들어서 아래 코드를 작성한다.

name: Deploy To S3 And Invalidate Cloudfront

on:
  push:
    branches:
      - main

jobs:
  deploy:                               # job 의 이름을 작성 아무이름 작성가능
    runs-on: ubuntu-latest
    steps:
      - name: Github Repository 파일 불러오기
        uses: actions/checkout@v4          # githubmarketplace 라이브러리 사용

      - name: 의존성 설치
        run: npm i

      - name: 빌드하기
        run: npm run build

      - name: AWS Resource에 접근할 수 있게 AWS 인증 설정            # 라이브러리 사용
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-region: ap-northeast-2
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

      - name: S3 기존 파일들 전체 삭제
        run: |
          aws s3 rm --recursive s3://practice-aws-react-pokemon

      - name: S3 에 빌드된 파일 업로드하기
        run: aws s3 cp ./dist s3://practice-aws-react-pokemon/ --recursive

      - name: Cloudfront 캐시 무효화
        run: aws cloudfront create-invalidation --distribution-id E162ULSLM68WN9 --path "/*"

< 코드 작동 순서 >

1. on 에는 main 브랜치에 push 할때 jobs를 실행 한다는 의미이다.

2. github 의 레포지토리에 있는 파일을 불러오고

3. 의존성을 설치 한 뒤 빌드를 한다

4. AWS 인증 설정을 하고

5. ASW S3 버킷의 기존 파일을 모두 삭제

6. 빌드한 파일을 S3버킷에 업로드

7. Cloudfront 캐시 무효화를 한다.

 

여기서 AWS 인증을 위해서는 ACCESS ID 와 Secret 을 발급 받아서 github 에 설정을 해줘야 한다.

 

AWS ACCESS ID 와 Secret발급 받기

 

 1) IAM 이라는 서비스로 들어간다.

 

 

2) 사용자 생성으로 들어간다.

 

 

3) 사용자 이름을 입력하고

4) 직접 정책 연결을 선택하고

   S3full 을 선택

 

 

5) cloudfrontfull 선택 하고 다음을 클릭한다.

 

 

6) 사용자 이름과 선택 유형이 나타난다. 사용자 생성을 클릭해서 만들어준다.

 

 

7) 만들어진 사용자로 들어가면 보안자격증명탭에 엑세스 키 만들기를 클릭한다.

 

 

 

8) AWS 외부에서 실행되는 애플리케이션을 선택하고 다음을 누른다. 

 

9) 태그 선택사항은 작성해도 되고 안해도 된다.

   이후 엑세크 키와 비밀 액세스 키를 잘 저장해 놓고 유출되지 않게 잘 보관한다.

 

github에 엑세스키 넣기

1) 레포지토리로 들어가서 Settings라는 탭을 클릭한다.

 

2) 왼쪽 탭에 Secrets and variables > Actions로 들어가서 

 

 

3)    New repository secret 을 2개 생성하여서

      Name 에는  Action 코드의 변수명

      secret 에는 AWS 에서 복사한 변수명을 각각 넣어준다.