AWS S3, CloudFront로 React 애플리케이션 배포하기

완성된 V1..!!

레주메 V1이 완성되었습니다! 따라서 이제 배포해보겠습니다.

S3 버킷 만들기

우선 S3 버킷을 생성해 줍시다.

퍼블릭 액세스 차단을 해제해줘야 사람들이 배포된 웹에 접근할 수 있으므로 겸사겸사 해제해줍시다.

S3 버킷 설정

S3 버킷을 생성했다면 설정을 해주어야 합니다.

생성한 버킷으로 들어가면 '속성' 탭이 보이는데, 거기로 들어가서 맨 아래로 내리면 '정적 웹 사이트 호스팅'에 관한 설정이 있습니다.

여기서 호스팅을 활성화 하고, 기본 문서를 index.html로 설정했습니다.

CloudFront Distribution 생성

이제 CloudFront Distribution을 생성해서 S3과 연결해줍시다.

Web을 선택해줍시다.

아까 만들어놨던 S3 버킷처럼 보이는걸 선택해줍시다.

Redirect HTTP to HTTPS를 선택하고, 캐싱 하지 않을거니까 Managed-CachingDisabled를 선택해줍시다. 'View policy details' 들어가서 보시면 정책별로 설정값을 볼 수 있습니다.

이 부분 부터는 개인적으로 도메인을 갖고있지 않다면 뛰어넘어도 됩니다.

Alternate Domain Names에 도메인 주소를 넣어주고, 아래 SSL Certificate에서 Custom SSL Certificate를 선택한 뒤 인증서를 선택해줍시다.

인증서는 AWS Certificate Manager에서 받으실 수 있습니다.

도메인 연결

CloudFront Distribution 생성을 완료했다면, Route 53 으로 넘어가서 도메인을 연결해줍시다.

'호스팅 영역'으로 들어가서 레코드 생성을 해줍시다.

단순 라우팅을 선택하고 다음으로 넘어가줍시다. (Route 53도 많이 변했네요..)

원하는 별칭을 넣어주고, 아까 만든 Distribution을 연결해줍시다. 저는 지금 배포하려는게 소개 페이지니까 about.janghoseung.com으로 만들었습니다.

이제 단순 레코드 정의를 누른 후 레코드를 생성해주면 끝입니다. 적용되기까지 시간이 꽤 걸리니까 여유있게 기다려줍시다.

aws-cli

직접 웹으로 들어가서 업로드 하는 것 보다는 커맨드라인 API 사용해서 편하게 배포할 수 있도록 했습니다.

즉각적인 업데이트 반영을 위해 업로드 할 때 --cache-control 옵션을 사용해 no-store를 적용해서 캐싱을 완전히 차단해 주었습니다. (CloudFront invalidation을 사용하는 방법도 있습니다)

이제 명령어 하나로 프로덕션 환경에 배포할 수 있습니다.

npm run deploy

aws-cli의 자세한 사용법은 Official Documentation을 보시면 됩니다.

결과

도메인까지 연결하고 보고있자니 너무 예쁘네요.. 혹시나 구경하고 싶으신 분들은(사심 가득) 여기로 들어오시면 됩니다.

참조

• 소스코드: https://github.com/hoseung-only/about.hoseung.me