[1주] React 배포 자동화 Github actions, terraform, AWS S3

월간CS에서 1주차 react, next 배포, 배포 자동화 A부터 Z까지 수업을 참여하였습니다.

직접 실습하며 배웠던 내용, 실습 중 막혔던 부분과 해결과정들을 적어보려합니다.

 

 

👉 CI/CD란?  링크 클릭

👉 GitHub Flow 전략에 대한 이해 링크 클릭

👉 GitHub Action에 대한 이해 링크 클릭

 

🍖 CloudFront, S3 배포하기

 👉 aws cli  링크 클릭

 👉 terraform 링크 클릭

 

🍖 terraform이란?

클라우드 인프라스트럭처 자동화 도구

인프라를 구축, 변경, 버전관리위한도구로 코드로 인프라를 관리할 수 있게 한다.

 

🍖 Github Action

github action용 폴더를 만들고 꼭! .github > workflows > .yaml 순으로 생성해야한다.

deploy.yml파일 안에 내용 넣기

name: 배포 자동화 👉 action의 이름

on: 👉 action의 기능은 이벤트 기반, user 커밋을 푸시할 때 밑에 있는 내용들이 실행된다.
  push:
    branches: ["*"]

jobs:
  build:
    runs-on: ubuntu-latest👉 action이 실행될 때 구동되는 컴퓨터가 우분투면 좋겠다라는 것.
    steps: 👉 실제로 벌어지는일들나열할 때 사용
      - name: Checkout 👉 step의 이름,  *앞에 #사용 -> 구동되지않도록하는 것 
        uses: actions/checkout@v4
    	run : pwd 👉 실제 동작하는 코드
      - 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 탭을 클릭하여 배포 자동화 상황을 확인할 수 있다. 

 

 

 

 

🚨 실습 중 막혔던 부분과 해결했던 내용들

1. 가비아에서 구매한 도메인의 NS 수정하기 👉 수정하는 곳이 안보일 때?

My가비아 클릭 후 구매한 도메인을 확인하고 네임서버 옆 설정 버튼을 누르면

위처럼 호스트명을 넣을 input란이 보이는데, 나 같은 경우는 '안전 장금 해지 버튼' 만 보여서 막히는 상황 발생했다.

그럴 땐, '안전 장금 해지 버튼'을 클릭하여 해지 후 네임서버 탭을 다시 누르면 위 같은 input란을 볼 수 있다. 

여기에 dns_ns_record배열에 나온 4개의 문자열들을 차례대로 입력하면 되었다.

아마 '안전 잠금 해지 버튼은 도메인 구매 시 설정했던 부분인 듯하다'

 

 

2. gh 설치 했는데, gh: command not found

👉 GH cli 설치  링크 클릭

나같은 경우 window를 사용해서, 설치했는데 gh: command not found 문구가 자꾸 나오는 상황이었다. vscode 터미널에서 진행 중이었음. 그런데, vscode 창 끄고 cmd 창에서 진행하니 잘 되었다.😤

 

 

3. terraform 실행 중 에러발생, DNS 리소스 배포할 때, 하기의 코드 입력 시 이런 오류가 나왔다.

terraform apply -var="profile=monthly-cs" -var="domain_name=<가비아에서 구매한 도메인>"

오류: AWS 계정 세부 정보 검색 중: 공급자 자격 증명 확인 중: STS에서 호출자 신원 검색 중: 작업 오류 STS...

credentials문제인 부분으로 확인, AWS_ACCESS_KEY와 AWS_SECRET_ACCESS_KEY를 새로 발급받아 오류를 해결하였다.