AWS S3 HTTPS 정적 웹 사이트 호스팅 및 배포 자동화

mminjg·2022년 7월 17일

S3 aws cloudfront github actions https ssl

AWS S3에서 정적 웹 사이트 호스팅을 하고, CloudFront 배포로 웹 사이트를 제공하고자 한다.

도메인 등록

Route 53에서 도메인을 구매하였다.

HTTPS 정적 웹 사이트 호스팅

버킷 생성

도메인 이름 버킷 생성

S3 > 버킷 > 버킷 만들기

버킷 이름은 도메인과 같아야 한다.

퍼블릭 액세스 차단 비활성화

퍼블릭 액세스 차단을 비활성화 설정한다.

버킷 정책 편집

버킷 > 권한 > 버킷 정책 편집

{
    "Version": "2012-10-17",
    "Id": "Policy1608529503037",
    "Statement": [
        {
            "Sid": "Stmt1608529502358",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-tcat.com/*"
        }
    ]
}

다음과 같이 입력하여 정책을 편집한다.

정적 웹 사이트 호스팅 활성화

버킷 > 속성 > 정적 웹 사이트 호스팅 편집

정적 웹 사이트 호스팅을 활성화하고 인덱스 문서와 오류 문서에 index.html을 입력한다.

파일 업로드

확인을 위해 리액트 빌드 파일을 업로드 한다.

서브 도메인 버킷 생성

퍼블릭 액세스 차단 비활성화, 버킷 정책 편집은 위와 동일하다.

정적 웹 사이트 호스팅 리디렉션 설정

정적 웹 사이트 호스팅을 활성화하고 호스팅 유형을 객체에 대한 요청 리디렉션으로 설정한다. 호스트 이름을 입력하고 https를 선택한다.

SSL 인증

https 설정을 위해 SSL 인증서를 발급받아야 한다. CloudFront를 이용하기 위해서는 꼭!!! 리전을 버지니아 북부로 설정해야 한다.

Certificate Manager 인증서 요청

AWS Certificate Manager > 인증서 > 인증서 요청

'Route 53에서 레코드 생성' 버튼을 누른다.

Route 53 > 호스팅 영역 에서 레코드를 확인할 수 있다.

CloudFront 배포

CloudFront는 AWS에서 제공하는 CDN 서비스이다. CloudFront는 엣지 로케이션이라고 하는 데이터 센터의 전 세계 네트워크를 통해 콘텐츠를 제공하는데, CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 엣지 로케이션으로 요청이 라우팅되므로 가능한 최고의 성능으로 콘텐츠가 제공된다.
참고

CloudFront 배포 생성

CloudFront > 배포 > 배포 생성

원본 도메인에는 S3 정적 웹 호스팅 주소를 작성한다.

Redirect HTTP to HTTPS를 선택한다. 최종 사용자는 두 프로토콜 모두 사용할 수 있지만, HTTP 요청은 자동으로 HTTPS 요청으로 리디렉션된다.

대체 도메인 이름에 내 도메인을 작성하고 사용자 정의 SSL 인증서를 선택한다.

서브 도메인도 마찬가지로 동일하게 배포를 진행한다.

Route53 레코드 생성

Route53 > 호스팅 영역 > my-tcat.com > 레코드 생성

트래픽 라우팅 대상 - CloudFront 배포에 대한 별칙을 선택하고 자동완성되는 주소를 선택한다.

서브 도메인에 대한 레코드도 생성한다.

Route 53 > 호스팅 영역 에서 레코드를 확인할 수 있다.

배포 설정

Access Denied 방지

React에서는 react-router-dom을 이용해 라우팅을 하는데, 이 때문에 특정 route로 접속 했을 때 403, 404 에러가 발생한다.

CloudFront > 배포 > 오류페이지 > 사용자 정의 오류 응답 생성

403, 404 각각의 오류에 대해 응답 페이지 경로를 /index.html로 설정해준다.

Cache 문제, 파일 무효화 설정

CloudFront는 자동으로 24시간 동안의 캐시가 적용되어 배포가 적용되는 데 오랜 시간이 걸린다.

CloudFront > 배포 > 오류페이지 > 무효화 > 무효화 생성

객체 경로에 /*을 추가한다.

캐시 문제 때문에 매번 이렇게 배포마다 파일 무효화를 생성해 주어야 하는데, 이를 Github Actions에서 AWS CLI로 자동으로 수행하도록 할 수 있다.

Github Actions으로 배포 자동화

AWS IAM 사용자 추가

IAM이란 AWS 리소스에 대한 액세스를 안전하게 제어할 수 있는 웹 서비스이다. 여기서는 리소스(S3)에 접근할 수 있는 IAM 사용자를 추가할 것이다.

IAM > 액세스 관리 > 사용자 > 사용자 추가

사용자 이름을 작성하고, 액세스 키 - 프로그래밍 방식 액세스를 선택한다.

기존 정책 직접 연결을 선택하고 AmazonS3FullAccess와 CloudFrontFullAccess를 선택한다.

완료하고 .csv 다운로드받아 ID와 Access Key를 확인한다.

Github Secrets 설정

Github Repository > Settings > Actions secrets > New repository secret

ID와 Access Key, Cloudfront ID, .env에 작성된 것들을 secrets로 설정해준다.

Github Actions

Github Repository > Actions > set up a workflow yourself
main-deploy.yml 파일을 작성한다.

name: Deploy to Production
 
on:
  push:
    branches:
      - main
 
jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - name: Checkout source code
        uses: actions/checkout@master
 
      - name: Cache 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: yarn install
 
      - name: Build
        env:
          CI: ''
          REACT_APP_SERVER: ${{ secrets.REACT_APP_SERVER }}
          REACT_APP_OCR_SERVER: ${{ secrets.REACT_APP_OCR_SERVER }}
          REACT_APP_OAUTH2_REDIRECT_URI: ${{ secrets.REACT_APP_OAUTH2_REDIRECT_URI }}
        run: yarn run build
        
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-2
 
      - name: Upload to S3
        run: |
          aws s3 cp \
            --recursive \
            --region ap-northeast-2 \
            build s3://my-tcat.com
            
      - name: Invalidate files
        run: |
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.AWS_DISTRIBUTION_ID }} \
            --paths "/*"