React로 커머스 사이트 만들기 (8)-2: AWS S3 + CloudFront 배포

AWS S3 + CloudFront 배포

이전 (8)-1에 이어서 배포를 진행한다

 

버킷의 Properties 탭 맨 아래 파트 Static website hosting를 편집해 Disabled 상태로 되돌려놓는다

 

 

 

Permissions 탭에서는 Block public access 파트의 Edit 버튼을 클릭해 Block all public access를 클릭하여 변경사항을 저장한다. 이로써 퍼블릭 엑세스 차단이 다시 활성화되었다

 

 

 

CloudFront 페이지로 이동한다

https://us-east-1.console.aws.amazon.com/cloudfront/v3/home

 

 

우측의 Create distribution을 클릭한다

 

 

 

Origin domain으로 해당 버킷에 해당하는 도메인을 선택한다

그리고 Original access로 Origin access control settings를 선택한다

 

 

 

우측 하단의 Create contorl setting 버튼을 클릭한 뒤, 바로 Create 버튼을 눌러준다

 

 

 

 

Enable Origin Shield 부분에서 Yes를 체크한 뒤, Origin Shield region을 Asia Pacific (Seoul) ap-northeast-2로 설정한다

 

 

 

Viewer protocol policy를 Redirect HTTP to HTTPS로 체크해준다

 

 

 

Web Application Firewall에서 Enable security protections를 클릭한다

 

 

 

그리고 맨 아래로 내려와 Default root object에 /index.html을 작성해주고 우측 하단의 Create distribution을 눌러 배포한다

 

 

 

배포가 완료되면 상단에 S3 bucket policy와 관련한 알림이 뜬다

우측 상단의 Copy policy 버튼을 눌러 policy를 복사해준다

 

 

 

S3 버킷으로 돌아와 Permissions 탭에서 Bucket policy 부분의 Edit 버튼을 클릭하여, 기존의 policy는 지우고 복사했던 policy를 붙여넣은 뒤 저장한다

 

 

 

다시 CloudFront 페이지로 돌아와서 우측 상단의 Create custom error response 버튼을 클릭한다

 

 

 

HTTP error code를 403으로 설정하고 Customize error response에서 Yes를 체크한다

Response page path를 /index.html로 작성하고 HTTP Response code를 200으로 설정한뒤 우측 하단의 Create custom error response 버튼을 클릭한다

HTTP error code 404에 대해서도 똑같이 한 번 더 진행해준다

 

 

 

 

배포된 URL은 General 탭 좌측 상단에 있다

 

 

 

코드를 수정하고 재배포하기 위해서는 아래 과정을 반복하면 된다

CloudFront 특성 상 배포할 때마다 Invalidation 작업을 해줘야하기에 마지막 명령어도 필수적이다

# Visual Studio Code: React 앱 폴더 빌드
npm run build

# 명령 프롬프트: build 폴더 위치로 이동
cd "build 폴더 위치"

# 명령 프롬프트: s3에 업로드
aws s3 sync ./build s3://[S3 버킷 이름] --profile=[IAM 사용자 이름]

# 명령 프롬프트: CloudFront에서 Create Invalidation
aws cloudfront create-invalidation --profile=[IAM 사용자 이름] --distribution-id [CloudFront ID] --paths /*

 

 

출처

https://emoney96.tistory.com/412