Github Actions을 사용하여 AWS S3에 React 배포

Github Actions를 사용하여 AWS S에 React 배포하는 방법 공유드립니다.

Github Actions이란?

Github Actions이란 Github에서 제공하는 워크플로우(workflow)를 자동화하도록 도와주는 도구이다. 테스트, 빌드, 배포 등의 다양한 작업들을 자동화하여 처리한다.

Github AWS KEY 설정

1. 프로젝트 설정에서 Secrets를 선택하여 New repository secret 선택합니다.

2. AWS_ACCESS_KEY_ID와 AWS_SECRET_ACCESS_KEY 설정

🚧 AWS_ACCESS_KEY_ID와 AWS_SECRET_ACCESS_KEY의 이름은 반드시 맞춰서 적어주셔야 합니다.

3.workflow 생성.

3-1. set up a workflow yourself 선택합니다.

3-2. yml 파일 생성합니다. (아래에 있는 코드 적용)

name: React build
on:
 push:                     # master Branch에서 push 이벤트가 일어났을 때만 실행
  branches:
 	- master

jobs:
 build:
  runs-on: ubuntu-18.04
  steps:
   - name: Checkout source code.   # 레포지토리 체크아웃
	 uses: actions/checkout@master

   - name: Cache node modules      # node modules 캐싱
     uses: actions/cache@v1
     with:
      path: node_modules
      key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
      restore-keys: |
        ${{ runner.OS }}-build-
        ${{ runner.OS }}-
   - name: Install Dependencies    # 의존 파일 설치
     run: npm install

   - name: Build                   # React Build
     run: CI= npm run build

   - name: Deploy                  # S3에 배포하기
     env:
      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
     run: |
	  aws s3 cp \\\\
	    --recursive \\\\
	    --region ap-northeast-2 \\\\
	    build s3://github-action-tutorial-hyeon # 자신의 레포지토리로 변경해주세요.

빌드

코드 merge 시 자동으로 빌드가 실행되며 성공적으로 빌드가 완료되면 AWS S3에 파일이 저장됩니다.

빌드 성공 시 AWS S3 파일 생성

AWS 웹 사이트 배포 설정

모든 빌드 파일 및 폴더를 업로드 완료했으면 이제 아래 이미지와 같이 속성 탭으로 넘어옵니다.

그리고 아래 이미지와 같이 해당 탭 맨 아래 존재하는 정적 웹 사이트 호스팅 부분에서 편집 버튼을 클릭합니다.

아래 이미지와 같이 정적 웹 사이트 호스팅을 활성화하고 호스팅 유형을 정적 웹 사이트 호스팅으로 설정합니다.

인덱스 문서의 경우 루트 경로( / )로 접근했을 때 보여질 문서를 의미합니다. 오류 문서의 경우 오류가 발생했을 때 보여질 문서로 이 예시에서는 루트 경로로 리다이렉션 되게 하기 위해 인덱스 문서 및 오류 문서 모두 index.html 로 설정합니다.

주의

정적 웹 사이트 호스팅을 완료하면 아래 이미지와 같이 버킷 웹 사이트 엔드포인트가 생성된 것을 확인할 수 있습니다. 아래 URL로 한 번 접속해봅시다.

그러면 이제 아래 이미지와 같이 403 Forbidden 오류를 반환한 것을 확인할 수 있습니다. 반환된 오류의 메세지를 확인해보면 AccessDenied라고 되어 있습니다. 이는 퍼블릭 액세스 권한을 막아놨기 때문입니다. 따라서 이제 버킷의 권한을 수정해줘야 합니다.

이제 해당 버킷의 권한 탭으로 넘어와 퍼블릭 액세스 차단(버킷 설정) 부분을 편집 버튼을 눌러 수정합니다.

아래 이미지와 같이 외부에서 조회할 수 있게, 다시 말해 어느 곳에서나 정적 웹 사이트를 열람할 수 있게 모든 퍼블릭 액세스 차단을 비활성합니다.

이제 아래 이미지와 같이 조금 내려와 버킷 정책 부분에서 편집을 눌러 정책을 설정해줍니다.

본인이 직접 정책을 입력할 수 있지만 조금 더 간단하게 설정하기 위해 아래 이미지와 같이 정책 생성기 버튼을 눌러 도움을 받습니다. 이때 버킷 ARN (이 예시에서는 arn:aws:s3:::next-js-deployment-practice ) 을 복사합니다.

이제 아래 이미지와 같이 정책을 선택합니다. 하나씩 정리하면 아래와 같습니다.

Select Type of Policy: 정책 유형을 의미합니다. S3 Bucket Policy를 선택합니다.
Effect: 정책의 유형을 허용(Allow) 또는 거부(Deny)로 선택할 수 있습니다. 허용(Allow)을 선택합니다.
Principal: 특정 부분에만 권한을 부여할 수 있습니다. **** 를 입력하여 모든 부분에 권한을 허용합니다.
Actions: 어떤 권한을 부여할 것인지 선택합니다. 정적 웹 사이트 열람, 다시 말해 조회( GET )만 허용하는 것이기 때문에 GetObject 만을 선택합니다.

이제 아래 이미지와 같이 Amazon Resource Name (ARN)에 아까 복사한 버킷 ARN (이 예시에서는 arn:aws:s3:::next-js-deployment-practice ) 을 입력하고 Add Statement 버튼을 클릭합니다.