CloudFront를 통해 React 앱을 매우 쉽게 배포할 수 있다. 심지어 성능도 좋다.
CloudFront 생성
AWS의 CloudFront 서비스에 접속해 Distribution을 생성한다. Origin Domain Name으로는 이미 생성한 S3 Bucket을 선택해 주고, 나머지는 취향껏 선택해주도록 한다. 생성 버튼을 누르면, In Progress 상태가 조금 지나고 생성이 완료된다.
SSL Certificate 획득
Custom Domain을 이용하려면 SSL 인증서를 획득해야 한다. 이는 ACM(AWS Certificate Manager)를 통해 획득할 수 있다.
인증 요청
우선 ACM 서비스로 이동해 원하는 도메인을 입력한 후 인증서 요청을 한다. 검증 단계에서 DNS 구성을 파일로 내보냅니다 버튼을 클릭해 .csv 파일을 다운받도록 하자. 여기에는 인증에 필요한 CNAME 정보가 들어 있다.
Route 53 설정
이제 다운받은 .csv 파일을 들고 Route 53 서비스에 접속하자. 해당 호스팅 영역에 접속해 .csv 파일에 저장되어 있는 이름과 값을 입력하고 CNAME 유형의 레코드 세트를 생성하면 된다. 잠시 후 ACM 서비스에 접속하면 인증서 발급이 완료되어 있는 것을 확인할 수 있다. 아직 호스팅 영역이 없다면 아래의 블로그 포스트를 참고하자. 참고로 인증서를 발급받을 때 AWS region에 유의해야 한다.
Custom Domain 설정
인증서 발급을 완료했다면, 다시 CloudFront로 돌아간다. 해당 Distribution에 접근한 후 Edit 버튼을 클릭한다. 그 곳에서 Alternate Domain Names에 원하는 도메인 주소를 입력하고, SSL Certificate 탭에서 Custom SSL Certificate를 선택한 후 방금 발급받은 인증서를 선택하면 된다. 이제 Yes, edit 버튼을 클릭해 수정을 완료하자.
그러면 Distribution이 다소간의 시간이 지난 후에 In Progress 상태가 된다. 생각보다 오래 걸리니 커피 한 잔 마시며 천천히 기다리도록 하자.
이제 다시 Route 53에 해당 도메인 네임을 지정하고, 별칭을 생성한 CloudFront Distribution으로 지정한 A 타입의 레코드 세트를 생성해야 해당 주소로 접근했을 때 원하는 웹 앱으로 호스팅해 준다. 도메인을 정확히 입력해야 Distribution 조회가 가능하다.
Invalidate
CDN을 사용한다면, 앱을 업데이트할 때마다 CDN에 퍼져 있는 파일들을 갱신해주어야 한다고 한다. 즉 CDN에 퍼져 있는 파일들을 invalidate 한 후 갱신하도록 해야 한다는 것이다. 이는 다음 명령어를 통해 가능하다. Distribution id는 CloudFront 서비스 페이지에서 확인 가능하다.
aws cloudfront create-invalidation --profile=[AWS_CLI_USER_NAME] --distribution-id [DISTRIBUTION_ID] --paths / /index.html /error.html /service-worker.js /manifest.json /favicon.ico
Plain Text
복사
이 코드도 배포 때마다 수행하는 것이 좋으니, package.json에 등록해 두도록 하자.
E.O.D.