Github Action을 이용한 AWS S3로 자동 배포하기

항상 버셀이나 네트리파이로 프론트 배포를 진행했었는데 aws s3로 배포해보는 경험도 필요하다 생각이 들어서

이렇게 기록용으로 하나씩 써봅니다..

 

 

1. Github Action 이용하기

배포할 레포지토리에 접속후

액션을 클릭하고 node.js configure 클릭을 해준다.

 

누르게 되면 아래와 같은 화면이 뜨게 된다.

on:
  push:
    branches: [ "develop" ]
  pull_request:
    branches: [ "develop" ]

develop 브랜치에다 push를 해주면

jobs 아래의 작업들을 실행하겠다는 뜻임

 

 strategy:
      matrix:
        node-version: [18.x, 20.x, 22.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

노드 버전은 이렇게 세분화 하지 않아도 되고 한가지만 선택해도 된다.

나는 22.x 버전을 선택했음

 

    - run: npm ci
    - run: npm run build --if-present
    - run: npm test

이 부분은 나는 yarn을 이용했기때문에

본인이 사용한 패키지 매니저에 따라 바꿔주면 된다.

 

 - run: yarn install
 - run: yarn build

yarn에서는 --if-present를 지원하지 않기때문에 지웠고

test 같은 경우에도 따로 테스트 프레임워크를 사용하지 않아서 지웠음

 

오른쪽 상단의 커밋체인지버튼으로 디벨롭에 추가해주면 초기 설정은 끝났다. 추후에 시크릿키 설정은 버킷 생성후에 추가 해주면 된다!

2. 버킷생성하기

콘솔에 s3검색후 해당 페이지에 접속하기

s3는 파일도 저장하고 정적인 웹사이트를 배포할때도 사용할 수 있다.

 

버킷 만들기 클릭

 

버킷 이름은 본인이 원하는 이름으로 지정해주면 되고

aws 리전 같은경우에는 기본으로 아시아 태평양(서울)로 지정되어 있는데 이것같은경우에는

오른쪽 상단에 보이는 서울 저부분이 리전 설정하는 부분이다. 이 부분을 서울로 지정해주어야

버킷 aws 리전도 서울로 지정이 된다.

 

AWS 리전(Region)이란
AWS 인프라를 지리적으로 나누어 배포한것을 의미한다.
사용자와 리전이 가까울수록 네트워크 지연을 최소화 할 수 있다.

 

 

 

그리고 따로 내가 체크해야할건 여기 기본 암호화에있는 버킷키만 비활성화를 체크해준 후 버킷 만들기를 해주면 된다.

다른건 건들필요없다.

그럼 이렇게 생성이 된 모습을 볼 수 있다.

 

다음은 생성한 버킷을 웹 사이트 호스팅을 위해서 사용할 수 있게 설정해주어야한다

 

생성된 버킷을 클릭한다음

속성 탭을 누른후 맨 밑으로 내리면

정적 웹 사이트 호스팅 편집을 누른후

 

활성화를 체크하고 

인덱스문서에

index.html을 작성해준다.

오류 문서같은경우에는 추후에 배포시

http://배포주소/ 까지는 접속이 되지만

http://배포주소/example 

이런식으로 뒤에 더 붙게 되면 접속이 불가해지기 때문에

오류문서에도 index.html을 작성해준다.

 

 

변경 사항을 저장해주면 이렇게 엔드포인트가 생성이된다!

하지만 당장 접속을 하게되면

 

이런식으로 뜨기때문에

버킷 정책을 변경해주어야한다.

 

3.버킷 정책 변경해주기

s3에 올라간 react 정적 파일을 웹에서 엑세스 할 수 있게 버킷 정책을 변경해주고 추가해준다.(s3 버킷에 익명의 사용자들이 파일을 조회할 수 있도록 권한 설정)

 

편집을 눌러 차단을 해제해준다.

 

다음으론 버킷정책을 작성해주어야함

일단 버킷 ARN을 복사해두고

정책 생성기를 눌러준다

화면과 같이 설정하기

step1: s3에서 배포할거니가 S3 Bucket Policy를 선택

step2:

effect는 allow로 선택

Principal 는 *로 설정(모든 유저)

Actions는 GetObject를 선택(버킷 접근 권한)

복사해두었던 ARN을 붙여넣어주고 뒤에 /*를 붙여 작성해준다.

그리고 Add statement를 선택하면 정책이 생성된다.

 

이렇게 생성되었다면 Generate Policy를 선택

그럼 이렇게 josn이 생성된다

이거 전체 복사를 해주고

 

s3버킷 화면으로 돌아와 정책에 복사해준후 변경 사항 저장

여기까지 하고 다시 엔드포인트로 접속을 하게되면

403이 아닌 404가 뜨게된다.

404인 이유는 아무 파일도 안올렸기때문에 404가 뜨는것이다.

 

4.yml 파일 완성하기

- uses: awact/s3-action@master
      with:
        args: --acl public-read --follow-symlinks --delete
      env:
        SOURCE_DIR: './public'
        AWS_REGION: 'us-east-1'
        AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

이 부분을 복사한뒤 

아까 초반에 작성한 워크플로우에 붙여넣어주면 된다.

 

SOURCE_DIR는 본인이 빌드한 파일 경로를 작성해주면 되는데

나는 VITE를 통해서 빌드를 했기때문에 ./dist로 작성해주었다.

AWS_REGION은 버킷 생성할때 성정된 AWS 리전과 동일하면 된다. 나는 서울이라 ap-northeast-2로 작성해주었다.

 

 나머지 키들은 환경변수로 

 

settings/security/Secrets and variables/actions로 접속후 설정해주어야한다.

 

하지만 그전에 키를 발급 받아야한다.

 

IAM을 이용할건데

IAM(Indentity and Access Management)이란 
AWS 리소스에 대한 액세스를 안전하게 제어할 수 있는 웹 서비스이다.
IAM을 사용하여 리소스를 사용하도록 인증(로그인) 및 권한 부여(권한 있음)된 대상을 제어한다.

 

콘솔에 IAM 검색후

사용자에 와서 사용자 생성을 선택한다

사용자 이름을 지정해주고 다음 클릭

직접 정책 연결 선택후

s3 검색해서 AamzonS3FullAccess를 선택해주고

다음 / 사용자 생성버튼을 클릭해준다.

그럼 이렇게 성공적으로 사용자가 생성된 모습을 볼 수 있다.

생성된 사용자를 눌러주고 액세크 키 만들키를 선택해준다.

 

나는 깃허브 액션을 사용하기 때문에 서드파티 서비스를 선택해주었다.

액세스키 만들기 선택

그러면 이런식으로 키가 생성이되는데 따로 메모장에 복사해두거나 .csv 파일로 다운받아둬야한다

까먹으면 유저 또 만들어야함

나는 .csv 파일로 다운로드 해두는 편이다.

완료를 누른후 다시 깃허브 페이지로 넘어가면 된다.

 

그러면 앞에서 설명했던 환경변수 키를 넣어주면 되는데

 

New repository secret을 눌러 
yml에 작성했던 env 이름과 동일하게 작성해준 후

저장해두었던 키를 복사해서 추가해주면 된다.

 

AWS_S3_BUCKET 같은경우는 s3버킷 생성할때 만든 이름을 넣어주면 된다.

그리고 나는 추가로 서버 주소도 환경변수로 같이 넣어주었다.

 

저장을 해준후

actions로 다시 오게되면 

아래와 같이 실패했다고 뜰텐데 다시 rerun jobs를 눌러 다시 시도를 해주면된다.!

나는 타입스크립트를 사용하다보니 안쓰는 코드, 이미지, 타입에러가 있을경우엔 무조건 에러가 뜬다..

빌드할때부터 뜨니까 꼭 정리후 배포하기...

이렇게까지 하게되면

버킷에 파일들이 잘 올라가있는지까지 확인해주고

접속했을때 이렇게 뜨면 배포 성공

 

 

참고

GitHub Actions를 활용한 S3 + Cloudfront 자동 배포

AWS S3로 React 배포하기