[Gatsby] S3 + CloudFront + Github Action 으로 배포하기

코린·2023년 8월 24일

CI/CD S3 blog cloudfront gatsby

개츠비로 기술블로그 만들고 배포하기

목록 보기

4/9

🌍 배포해봅시다!

일단 배포하기에 앞서서!!! 전…. 돈이 없는 그지 백수 이기 때문에 만에하나.. 서버비용이 발생하묜!??!?!?!?

그렇기 때문에 일단 비용이 얼마 드는지 찾아봤습니다.

그래서.. 돈이 안든다는 건가..? 아마두…메이비..?

꼭 이런 페이지들은 돈 얼마 드는지 안 알려주더라고요.. 그래서 걍 구글에 냅다 쳤습니다.

AWS S3 요금 정리

23년 2월에 쓴 글이니까 일단 믿고 정리해보자면

■ 요금 산정 방식

저장 용량
저장 기간
송신 트래픽

■ 무료 항목

S3 → S3 (동일 계정)
S3 → EC2 (동일 Region, 다른 계정도 OK)
S3 → CloudFront
인터넷 → S3

일단 머 그렇다니까 돈 안드는거겠죠..? 몰라여.. 일단 냅다 합니다~~~

🌍 이제 지지진짜 배포해봅시다!

참조블로그

📍 AWS 가입하기

aws 에 접속해서 가입해주면 됩니다!

근데 괜히 사람 쫄리게 카드정보 넣으라고 하니까 카드 꼭 준비해야합니다~

암튼 시키는대로 다 가입합니데이

📍 S3 버킷 만들기

버킷만들기 눌러서 만들어주면 됩니다!

Block all public access 를 해제하지 않고 만들었습니다!

저걸 해제하면 퍼블릭으로 접근이 가능해서 s3만으로도 배포가 가능합니다.

하지만 저희는 cloudfront 써서 그걸로 접속할거니까 해제하지 않습니다!

📍 cloudfront 연동

원본 도메인을 눌러 아까 만든 s3 버킷을 선택합니다.

이름은 맘대로 하셔도 되는데 전 그냥 s3와 동일하게 했습니다.

엑세스를 설정해줍니다.

이거는 목적에 맞게 설정하시면 됩니다!

선택사항

원하는 도메인이 있다면

여기에 추가해주면 됩니다. 안해도 무방합니다.

추가사항

원하는 도메인을 가진 페이지를 배포하고 싶다하면

Route 53 에서 도메인을 구매하고 연결시켜 주면 됩니다.

이 부분은 참조블로그 3번 항목을 참조하시면 됩니다.

전 안했기 때문에 설명드릴부분이 없어송,, SKIP~~

📍 IAM 생성하기

엑세스관리 - 사용자로 들어가 사용자생성 버튼을 눌러줍니다.

이름을 설정해줍니다.

이제 이 사용자에게 권한을 줘야합니다.
직접 정책 연결을 선택합니다.

AmazonS3FullAccess 와CloudFrontFullAccess 정책을 연결해 주었습니다.

📍 Github Action 작성

Settings - Secrets and variables - Action

여기서 값들을 추가해줍니다.

순서대로

IAM 사용자 키
: IAM 키 생성 시 복사
AWS 지역
: s3 버킷만들 때 설정한 지역을 넣어주면 됩니다.
IAM 사용자 비밀 키
: IAM 키 생성 시 복사
cloudfront id
: cloudfront 접속시 뜨는 영어 id
s3 버킷 이름
: s3 버킷 생성할 때 설정한 이름

yml 파일 생성

name: Deploy

on:
    push:
        branches:
            - main

jobs:
    deploy:
        runs-on: ubuntu-latest

        steps:
            - name: Checkout source code.
              uses: actions/checkout@v3

            - name: Install Dependencies
              run: npm install

            - name: Build
              run: npm run build

            - name: Configure AWS Credentials
              uses: aws-actions/configure-aws-credentials@v2
              with:
                  aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
                  aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
                  aws-region: ${{ secrets.AWS_REGION }}

            - name: Deploy to s3
              run: aws s3 sync ./public s3://${{ secrets.DEV_AWS_S3_BUCKET }} --delete

            - name: CloudFront 캐시 무력화 설정
              uses: chetan/invalidate-cloudfront-action@v2
              env:
                  DISTRIBUTION: ${{ secrets.DEV_AWS_DISTRIBUTION_ID }}
                  PATHS: '/*'
                  AWS_REGION: ${{ secrets.AWS_REGION }}
                  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
                  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

yml 파일 형식으로 위와 같이 코드를 작성해줍니다.

참고하셔야 할 점!
- name: Deploy to s3
              run: aws s3 sync ./public s3://${{ secrets.DEV_AWS_S3_BUCKET }} --delete
이것의 의미는 public 폴더에 있는 모든 파일을 S3 버킷에 배포하겠다는 의미입니다!
만일 사용자의 폴더에 public이 아니라 다른이름의 폴더에 있는 파일을 올리고 싶다면 '맞는경로+폴더명' 으로 변경해주어야 합니다!

main 브랜치가 push가 발생할 때 마다 코드가 실행될 것 입니다.

그래서 해당 내용을 푸시하고