[1주차] GitHub Action에서 React 지속적 전달 구현하기 (CF, S3)

필요 프로그램 설치하기

• GH CLI

  https://github.com/cli/cli#installation

  https://cli.github.com/manual/

  설치 후 gh --version을 쳤을 때, 결과가 나와야 합니다.

GH CLI란?

GitHub 관련 CLI입니다.
Git과 GitHub은 완전히 별개의 프로그램입니다.

GH는 GitHUb 관련 기능이 많습니다.

GH 로그인하기

1. gh auth login 을 입력하고 엔터를 쭉 누르세요.

   

2. 브라우저가 열리면 Device Activation 코드를 입력해야 합니다.
   이 코드는 gh auth login 를 입력한 터미널에 출력이 됩니다.
   더블 클릭 후 복붙하고 Continue를 클릭하면 잠시 후 GH Credentials가 등록됩니다.

   

작업 환경 준비

1. 실습용 저장소 접속하기

   https://github.com/monthly-cs/2024-04-cicd-week-1-template

2. 실습용 저장소를 개인 저장소로 포크 뜨기

   

3. 해당 저장소를 클론 받기

   git clone https://github.com/<본인 GitHub UserName>/2024-04-cicd-week-1-template
   
   예)
   git clone https://github.com/unchaptered/2024-04-cicd-week-1-template.git 2024-04-cicd-week-1-template-practice

환경 변수 등록하기

gh secret set AWS_ACCESS_KEY -R <유저네임>/<저장소명> -b <AWS ACCESS KEY>
gh secret set AWS_SECRET_ACCESS_KEY -R <유저네임>/<저장소명> -b <AWS SECRET ACCESS KEY>
gh secret set AWS_S3_BUCKET -R <유저네임>/<저장소명> -b <가비아에서 구매한 도메인 이름>
gh secret set AWS_CF_DIST_ID -R <유저네임>/<저장소명> -b <CloudFront 배포 ID>

잠깐

아래와 같은 명령어를 통해서 환경 변수를 로컬 PC에서 등록할 수 있습니다.

gh secret set AWS_ACCESS_KEY -R unchaptered/2024-04-cicd-week-1-template -b 값값값
gh secret set AWS_SECRET_ACCESS_KEY -R unchaptered/2024-04-cicd-week-1-template -b 값값값
gh secret set AWS_S3_BUCKET -R unchaptered/2024-04-cicd-week-1-template -b 값값값
gh secret set AWS_CF_DIST_ID -R unchaptered/2024-04-cicd-week-1-template -b 값값값

운영 체제 별로 AWS Credentials은 아래 경로에 있습니다.

아래 문서를 통해서 생성한 IAM Credentials를 사용해주세요!
반드시 인프라 리소스를 생성할 때 사용한 monthly-cs를 사용해주세요!
https://inblog.ai/unchaptered/cloudfront-s3-oneclick-deploy-18023?traffic_type=internal

• Windows에서는 아래 경로를 열어서 직접 확인해주세요.

  C:\Users\admin\.aws\credentials

• MacOS에서는 아래 명령어를 입력해주세요.

  cat ~/.aws/credentials

GitHub Action 작성하기

GitHub Action 용 폴더 생성하기

GitHub Action의 자동화 파일은 아래 경로 아래에 생성해야 합니다.

.github
└ workflows
  └ *.yaml

따라서 클론받은 프로젝트의 루트 경로에 .github 폴더를 만들어주세요.
그리고 .github 폴더 안에는 workflows폴더를 만들어주세요.
 

GitHub Action 파일 작성하기

위에서 만든 폴더에 deploy.yml 이라는 이름으로 아래 파일을 넣어주세요.

name: 배포 자동화

on:
  push:
    branches: ["*"]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
    
      - name: Check Node v
        run: node -v
    
      - name: setup-node
        uses: actions/setup-node@v3
        with:
          node-version: 20
          
      - name: Install Dependencies
        run : yarn install
      
      - name: Build 
        run : yarn build
      
      - name: Upload to S3 
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY  }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY  }}
        run:
          aws s3 cp --recursive --region us-east-1 ./build s3://${{ secrets.AWS_S3_BUCKET  }}

      - name: Invalidate CloudFront Cache
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_EC2_METADATA_DISABLED: true
        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CF_DIST_ID  }} --paths "/*"

코드 커밋 후 푸쉬

변경 사항을 커밋하고 main 브런치에 푸쉬해주세요.

배포 자동화 모니터링하기

배포 자동화는 Action 탭에서 확인할 수 있습니다.

배포 자동화 테스트

~/src/pages/Home.tsx 파일에서 아래 코드를 변경하고 커밋해보세요!

• Before, 13번 라인

    return (
      <StBody>
        <div className="innerBody">
          <Button text="go Success" onClick={() => navigate(`/success`)} />
          <Button text="make Error" onClick={() => throwError()} />
        </div>
      </StBody>
    );
  

• After, 13번 라인

    return (
      <StBody>
        <div className="innerBody">
          <Button text="삐약삐약삐약삐약삐약삐약" onClick={() => navigate(`/success`)} />
          <Button text="make Error" onClick={() => throwError()} />
        </div>
      </StBody>
    );
  

실습 파일 삭제(필수!)

아래 순서에 맞춰서 제거헤주세요!

1. S3 객체 안의 대상 모두 지우기

   aws s3 rm s3://<가비아에서 구매한 도메인 이름> --recursive --profile monthly-cs
   
   예)
   aws s3 rm s3://unchaptered.shop --recursive --profile monthly-cs

2. 리소스 제거하기

   cd ./infra/website
   
   terraform destroy -var="profile=monthly-cs" -var="domain_name=<가비아에서 구매한 도메인>"

   cd ../dns
   
   terraform destroy -var="profile=monthly-cs" -var="domain_name=<가비아에서 구매한 도메인>"