React 앱을 S3로 배포 + CloudFront + Route 53 + ACM SSL 인증

간단한 React 정적 앱을 만들었다면 S3로 배포하는게 가성비가 좋다. 우선 EC2와 같은 가상 컴퓨터가 아니라 단순 스토리지이기 때문에 가격이 싸다. good.

1. SEO나 대표 이미지 등 세팅

CSR SPA를 위한 SSR 세팅 및 기타 SEO 설정

 

2. S3 배포

빌드된 내용을 단순히 업로드해주기만 하면 됩니다. 물론 public 으로 ㅇㅇ

업로드가 잘 안 먹는다면 cli를 사용해봅시다.

aws s3 cp ./build s3://[bucket] --acl public-read --recursive

 

아래 블로그대로 하면 됩니다.

AWS S3 - React app 배포하기

 

제가 작성한 글을 보셔도 됩니다.

darrengwon.tistory.com/1344

[AWS CLI] s3 업로드와 보안 및 액세스 관리

 

 

3. S3+React에 CloudFront 붙이기

 

그냥 S3 주소를 CloudFront에 붙이기만 하면 됩니다.

주의할 점은 Default 경로를 index.html으로 해둬야 한다는 것,

https로 자동 리다이렉션을 걸어두는 것입니다.

 

Origin Domain Name 설정. s3 bucket이 아니라 bucket이 제공하는 static web 의 경로를 제공해주어야 합니다.

이 녀석들이 아닙니다!!!

 

 

 

캐슁 관련은 적절히 선택하되, Redirect HTTP to HTTPS 설정을 해줍시다. HTTP 사용해서 좋을게 없잖아요?

그리고 예전엔 TTL을 수동으로 설정했는데, 이제는 cache policy로 설정하네요. managed-CachingOptimized로 해줍시다.

Compress Objects Automatically도 켜줍시다. cloudflare에서 항상 켜두던 거던데, cloudfront에서도 제공을 해주네요 ㅋㅋ

 

 

 

배포 관련 세팅은 Default Root Object에 루트로 접근할 때 서빙할 파일 명을 적어줍시다.

index.html이 있으니 이걸 적어주도록 하겠습니다.

 

 

10분 정도 기다리면 배포가 완료됩니다.

 

🚨 만약 소스코드를 수정했고, 그 내용을 반영하고 싶다면 invalidation을 해야 합니다. 위 첨부한 포스트에서 잘 설명하고 있습니다. invalidation을 통해 캐시를 지워주는 작업을 해야 한다는 것만 잊지 맙시다.

 

invalidation 방법이 잘 생각이 안 난다면 다음 포스트를 참고합시다.

 

darrengwon.tistory.com/63

AWS CloudFront / 커스텀 오리진 사용(EC2) + Invalidation

 

 

4. CloudFront 주소에 Route53으로 도메인 붙이기 위한 ACM SSL 인증서 발급

 

보통 pyrasis님의 블로그를 참고해왔는데 이 부분에서만큼은 예외입니다.

 

왜냐하면 2019년 4월부터 cloudfront에 다른 도메인을 붙이기 위해서는 SSL 인증서를 반드시 붙이게 되었거든요.

Since this release (Apr 8, 2019) when you add an alternate domain name to a distribution, you must also attach a SSL/TLS certificate to that distribution that covers the alternate domain name.

 

붙이지 않는다면 오류를 냅니다.

 

우선 ACM에서 cloudfront에 붙일 인증서를 만들어줍시다.

중요한 점은, Only certificates registered in AWS Certificate Manager (ACM) in the US East (N. Virginia = us-east-1) Region will be enabled for use in CloudFront (CDN의 본거지가 미국 버지니아기 때문에 그렇습니다.)

 

그러니 리젼 체크를 잘 합시다.

 

 

한편, CloudFront로 돌아와보면,

 

Custom SSL Certificate를 선택할 수 없게 disabled된 것이 보이는데 이 부분에 있어서는

ACM 에서 인증서를 생성했다는 가정 하에 로그아웃 한 후에 다시 돌아오도록합시다.

stackoverflow.com/questions/28609262/unable-to-select-custom-ssl-certificate-stored-in-aws-iam

(아! 이것 때문에 2시간 날렸습니다.)

 

 

한 번 나갔다 오니 활성화된 것이 보입니다.

 

 

Route53에서 도메인을 설정할 때는 직접 cloudfront 주소를 입력하기 보다 cloud 배포에 대한 alias를 설정해주는 것이 좋습니다. (편리~)

리전이 us-east-1만 활성화되었을텐데 이는 AWS CDN의 본거지가 us-east-1이기 때문입니다.

 

 

 

트러블 슈팅 1) 정적 React 앱을 S3로 배포할 경우 router가 작동하지 않는 문제

빌드한 결과물을 s3에 올린 후 홈에서 세부페이지로 이동하는 것은 됩니다만 세부 페이지에 직접 접속하려고 하거나 세부 페이지에서 새로고침을 하면 에러를 냅니다.

 

이는 S3에 특성에 기인 한 것입니다.

 

<s3주소>/

<s3주소>/about => S3 스토리지 내부에 about이란 이름의 객체를 찾으려고 함

 

이 경우 오류 문서에도 index.html을 렌더하도록 만들어주면 해결할 수 있습니다.

 

 

 

트러블 슈팅2) CloudFront에서도 router가 동작하지 않는다.

 

위와 마찬가지로 다음과 같은 로직에의해 오류를 냅니다.

 

<s3주소>/

<s3주소>/about => S3 스토리지 내부에 about이란 이름의 객체를 찾으려고 함

 

S3에서 에러페이지도 index.html로 연결해주었던 것처럼

400번대 에러로 빠질 경우 루트 경로인 /index.html로 연결해주면 됩니다.

 

추가 보안 설정?

 

OAI 설정을 통해 원본 오리진인 s3에 직접 액세스하지 못하도록 만들어야 합니다.

 

darrengwon.tistory.com/1345

OAI 설정으로 원본 오리진인 S3에 직접 액세스 금지시키기

 

 

참고한 글)

 

 

wormwlrm.github.io/2020/11/15/SPA-hosting-via-AWS.html

yuda.dev/251

stackoverflow.com/questions/51218979/react-router-doesnt-work-in-aws-s3-bucket

stackoverflow.com/questions/42221392/cannot-access-page-on-refresh-due-to-hasbangs-in-a-react-spa