[AdvICE] AWS S3와 AWS CloudFront로 정적 (React)웹 사이트 배포 및 GitHub를 이용한 자동 배포 설정

목차
1. S3 버킷 생성
2. S3 버킷 정책 업데이트
3. CloudFront 배포 생성

4. 사용자 생성(S3, CloudFront 권한 키 발급)
5. 정적 사이트(React) 업도르 및 GitHub 자동 배포
6. 배포된 URL 확인
7. 403 Forbidden 오류 (새로고침 오류)

---

1. S3 버킷 생성

효율적인 클라우드 스토리지 AWS S3의 개념

1) 우선 AWS 검색창에서 S3를 검색하고, 버킷 만들기 버튼을 누룬다.

2) "버킷 만들기"에서 리전 지역을 확인하고, 버킷 이름을 작성한다. (아무 이름으로 해도 상관없다)

3) 이어서 "버킷 만들기"에서 이미지와 같이 모든퍼블릭 액세스 차단을 해제하여 외부에서 이 버킷에 접근할 수 있도록 제한을 풀어준다.

 

4) 나머지 설정들을 기본값으로 두고 하단에 있는 버킷 만들기 버튼을 누른다.

 

5) 만들어진 "버킷" 페이지에서 상단에 있는 속성에 들어가서 맨 아래에 정적 웹 사이트 호스팅의 편집 버튼을 누른다.

 

6) "정적 웹 사이트 호스팅 편집" 페이지에서 먼저 활성화시키고, 정적 웹 사이트 호스팅을 선택한다. 그 다음 인덱스 문서에서 "index.html"를 입력한다.

 

7) 나머지는 생략해도 되고, 편집 완료하였으면 맨 아래에 있는 변경 사항 저장 버튼을 클릭한다.

---

2. S3 버킷 정책 업데이트

1) 다시 "버킷" 페이지에서 상단에 있는 권한에 들어가서 버킷 정책 항목의 편집 버튼을 누른다.

 

2) "버킷 정책 편집" 페이지에서 아래 이미지와 같이 직접 권한 정책을 설정한다.

- "Version": "2012-10-17" : 이 정책의 버전 정보를 지정. "2012-10-17"은 AWS에서 사용하는 정책 문서의 버전 날짜.

- "Statement": 정책 문장들을 위한 배열.

- "Sid": "PublicReadGetObject": 이 정책 문장의 고유 식별자(SID)

- "Effect": "Allow": 이 정책의 효과를 지정. 여기서는 액션을 "허용(Allow)"한다는 의미.

- "Principal": "*": 이 정책이 적용되는 주체를 지정. "*"는 모든 사용자(익명 사용자 포함)를 의미.

- "Action": "s3: 허용되는 액션을 지정. "s3"는 S3 버킷에서 객체를 읽는 권한 의미.

- "Resource": "arn:aws:s3:::www.ice-advice.kr/*": 이 정책이 적용되는 리소스를 지정. "www.ice-advice.kr" 버킷의 모든 객체를 대상으로 함다는 의미.

 

3) 버킷 정책 설정 완료하고 맨 아래에 변경 사항 저장 버튼을 누른다.

---

3. CloudFront 배포 생성

AWS CloudFront를 활용한 고속 콘텐츠 전송의 개념

 

1) AWS 검색창에서 CloudFront를 검색하고, 배포 생성 버튼을 누룬다.

 

2) "배포 생성" 페이지에서 우선 Origin domain에서 만든 버킷을 선택하고, 바로 아래에 생긴 경고창에서 웹 사이트 엔드포인트 사용을 누른다.

 

3) 이어서 "배포 생성" 페이지 설정 중에 기본 캐시 동작에서 뷰어 프로토콜 정책을 Redirect HTTP to HTTPS를 선택하고, 허용되는 HTTP 방법에서는 각자 프로젝트에 맞게 선택한다.

 

4) 나머지 설정들을 기본값으로 두고, 맨 아래에 배포 생성 버튼을 누르면 CloudFront 배포 생성이 완료된다.

---

4. 사용자 생성(S3, CloudFront 권한 키 발급)

1) AWS 검색창에서 IAM를 검색하고,  IAM에서 "사용자"에 들어가서 사용자 생성 버튼을 누른다.

 

2) 먼저 사용자 이름을 원하시는 이름으로 입력하고, 다음 버튼을 누른다.

 

3) 이어지는 "권한 설정"페이지에서 사용자에서 S3 권한을 주기 위해서 그룹 생성 버튼을 클릭한다.

 

4) 열린 창에서  사용자 그룹 이름을 자유롭게 설정하고, 검색창을 통해 s3를 입력해서 AmazonS3FullAccess를 선택한다. 권한 정책을 기본 값으로 두고 아래에 있는 사용자 그룹 생성 버튼을 누른다.

- "s3:*": S3 서비스 관련 액션 권한 허용("s3:*"로 시작하는 모든 액션을 의미) -> 나중에 보안을 위해 최소의 권한 설정 필요

- "Resource": "*": 권한이 적용되는 리소스를 지정. ("*"는 모든 리소스에 대해 권한을 적용한다는 의미) -> 나중에 보안을 위해 최소의 권한 설정 필요

 

5) "권한 설정"페이지에 돌아와서 이제는 CloudFront 권한을 주기 위해 그룹 생성 버튼을 한번 더 클릭한다.

6) 열린 창에서  사용자 그룹 이름을 자유롭게 설정하고, 검색창을 통해 cloudfront를 입력해서 CloudFrontFullAccess를 선택한다. 권한 정책을 기본 값으로 두고 아래에 있는 사용자 그룹 생성 버튼을 누른다.

 

7) "권한 설정"페이지에서 방금 생성한 권한 그룹 2개를 선택해서 하단에 있는 다음 버튼을 누르고, 이어지는 "검토 및 생성" 페이지에서 원하는 사용자에서 원하는 권한 그룹을 부여한 것이 맞는지 확인하고 하단에 있는 사용자 생성 버튼을 누른다.

 

8) 돌아온 "사용자" 페이지에서 방금 생성한 사용자(advice-dev)를 클릭한다.

 

9) 상단에 있는 보안 자격 증명을 선택하고, 아래로 내리면 엑세스 키에서 엑세스 키 만들기 버튼을 누른다.

 

10) 이어지는 "액세스 키 모범 사례 및 대안" 페이지에서 맨 위에 있는 Command Line Interface를 선택하고, 하단에 있는 동의 체크하고 다음 버튼을 누른다.

 

11) 다음 페이지에서 설명 태그 값을 생략하고 엑세스 키 만드기 버튼을 누른다.

12) 만들어진 공개 엑세스 키와 비밀 엑세스 키를 다운로드 받거나 따로 기록해둔다.

---

5. 정적 사이트(React) 업도르 및 GitHub 자동 배포

1) 우선 깃허브 레포지토리에 React 프로젝트를 올리고 Actions에서 Simple Workflow를 검색해서 Configure 버튼을 누른다.

 

2) Workflow의 이름을 자유롭게 입력하고 파일 안에 있는 스크립트를 지우고 이미지와 같이 새로운 스크립트를 입력한다.

name: Example workflow for S3 Deploy

on:
  push:
    branches:
      - main

jobs:
  run:
    runs-on: ubuntu-latest
    env:
      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

    steps:
      - uses: actions/checkout@v3

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build
        env:
          CI: false

      - name: Deploy
        uses: reggionick/s3-deploy@v3
        with:
          folder: build
          bucket: ${{ secrets.bucket }}
          bucket-region: ${{ secrets.region }}
          dist-id: ${{ secrets.id }}
          invalidation: /
          delete-removed: true
          no-cache: true
          private: true

- branches: main : 깃허브 main 브랜치에 소스코드가  push될 때마다 (자동 배포)실행된다.

- runs-on: ubuntu-latest: 가장 최신 ubuntu 가상머신을 통해 스크립트 실행한다.

- env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} : S3 및 CloudFront 사용 권한을 받기 위해.

- uses: actions/checkout@v3: 현재 리포지토리의 코드를 체크아웃한다. (만약 이 스텝이 없다면, 워크플로우가 실행되는 환경에는 리포지토리의 코드가 존재하지 않게 되고, npm install이나 npm run build 같은 명령을 실행할 수 없으며 빌드 결과물을 배포할 수도 없게 된다)

- run: npm install : 프로젝트의 모든 npm 의존성을 설치한다.

- run build, CI: false : 프로젝트를 빌드하고, 환경 변수 CI를 false로 설정하여 CI 환경에서의 경고를 무시한다.

- Deploy' 단계에서 reggionick/s3-deploy@v3 : 액션을 사용하여 S3 버킷으로 빌드된 파일을 배포한다.

• folder: 배포할 파일들이 있는 'build' 폴더를 지정한다. (S3로 업로드할 파일들이 위치한 폴더를 지정, 액션이 어떤 파일을 업로드해야 하는지 알 수 있도록 폴더 경로를 명시적으로 지정해야 한다)
• bucket: 배포 대상 S3 버킷 이름을 GitHub 시크릿에서 가져온다.
• bucket-region: S3 버킷의 리전을 GitHub 시크릿에서 가져온다.
• dist-id: CloudFront 배포 ID를 GitHub 시크릿에서 가져온다. (CloudFront 캐시를 무효화하기 위해 대상 배포의 ID를 지정)
• invalidation: / : "/" 로 설정하여 CloudFront 캐시를 전체 무효화한다. (사이트 전체의 변경 사항이 즉시 반영되도록 캐시를 무효화해야 한다. '/'로 설정하면 모든 경로의 캐시가 무효화되어 사용자들이 최신 콘텐츠를 받을 수 있게 한다.)
• delete-removed: true로 설정하여 로컬에서 삭제된 파일을 S3에서도 삭제한다.
• no-cache: true로 설정하여 업로드된 파일에 캐시 제어 헤더를 추가하지 않는다. (기본 설정을 유지하기 위해 자동으로 추가되는 캐시 제어 헤더를 방지)
• private: true로 설정하여 파일의 접근 권한을 비공개로 유지한다.

3) 모든 스크립트 입력을 완료하면, 하단 또는 오른쪽에 있는 Start commit 버튼을 누른다. ( Actions에서 실행이 실패된 것을 확인할 수 있는데, 그 이유는 스크립트 변수를 아직 등록하지 않았기 때문이다)

 

4) 상단 오른쪽에 있는 Settings를 선택하고, 외쪽 사이드바에서 Secrets and variadbles에서 Action을 클릭하면 보이는 페이지에서 New repository secret 버튼을 눌러 스크립트에서 작성한 모든 환경변수를 설정한다.

 

- secrets.AWS_ACCESS_KEY_ID : 공개 엑세스 키

- secrets.AWS_SECRET_ACCESS_KEY: 비밀 엑세스 키

- secrets.bucket: S3 버킷 이름

- secrets.region: S3 버킷의 리전

- secrets.id: CloudFront 배포 ID

 

5) Actions에서 새로운 workflow가 실행 중인 것을 확인하고, 문제가 없으면 성공적으로 완료된다.

---

6. 배포된 URL 확인

1) AWS의 CloudFront에서 배포한 URL에 접속해본다.

---

7. 403 Forbidden 오류 (새로고침 오류)

1) 접속한 CloudFront URL에서 새로고침하면 다음과 같은 오류가 발생하는 것을 확인할 수 있다.

2) 우선 AWS CloudFront에서 배포에 들어가서 상단에 있는 오류 페이지를 선택하고, 사용자 정의 오류 응답 생성 버튼을 누른다.

 

3) 이미지와 같이 http오류 코드는 "403"을 선택해주고 오류 페이지가 요청이 왔을 때 사용자에게 다시 index.html을 응답해주도록 설정한다. 오류 응답 사용자 정의에서 "예"를 체크, 응답 페이지 경로에는 "/index.html"을 입력, Http 응답 코드는 200을 선택해준다.
모든 설정을 입력하면 하단에 있는 사용자 정의 오류 응답 생성 버튼을 누른다.

 

4) 같은 방법으로 "404" http오류 코드도 설정해준다.

 

---

끝!