s3와 cloudfront로 ssl 적용하여 static website 구성하기

세상 참 좋아졌음을 느낍니다

 

프론트엔드단을 vue나 react 같은 SPA프레임워크로 작업해서 손쉽게 static website를 구성할수 있으니 말입니다.

 

물론 직접 인스턴스를 띄워서 웹서버도 직접 띄우고 프론트엔드단을 서빙해도 되지만,

 

AWS에서 s3와 cloudfront의 조합으로 정적 웹사이트를 쉽게 구축할수 있게 했으니 이것을 이용하면 되지요

 

게다가 cloudfront를 이용하니깐 s3에 리소스를 업로드하는것만으로

 

자동적으로 전세계 어디에든 배포되는 cdn을 사용한 셈이니 더없이 좋네요

 

게다가 스케일링 걱정도 할필요가 없으니깐요

 

 

 

 

정적 웹사이트 운영을 위해

 

이를 위한 리소스들을 업로드할 s3 버킷을 생성하여 속성 메뉴에서 정적 웹 사이트 호스팅 설정을 합시다.

 

 

라우팅 처리를 위해서 오류문서 입력란에도 index.html을 설정하면 동적라우팅이 정상적으로 동작합니다

 

 

 

권한 메뉴에서 퍼블릭엑세스 차단한것을 비활성화해주시구요

 

 

 

버킷 정책을 입력해야합니다

 

s3 getObject action에 대해서 설정을 허용하면 이 버킷의 리소스들이 이제 오픈됩니다

 

내가 만든 웹사이트의 html, js, css 파일들을 버킷에 업로드하고 생성해준 엔드포인트로 접속해서 

 

내가 만든 웹사이트가 보인다면 성공입니다

 

 

이제 절반쯤 성공했고 

 

cloudfront를 설정해봅시다.

 

 

s3에서 정적웹사이트를 설정한뒤에 생성된 엔드포인트 주소를 사용해야합니다

 

엔드포인트를 맨 앞의 http:// 를 제외하고 복사합니다. 형식은 AWSDOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com과 유사합니다.

 

그리고 ssl 연결을 위해 acm 인증서를 생성해야하는데요

 

참고하실점은 ACM 인증서를 CloudFront 배포에 연결하려면 미국 동부(버지니아 북부) 리전에서 인증서를 생성해야 합니다.

 

 

 

origin domain name에 아까 그 s3 엔드포인트를 복사한 값을 입력해주세요

 

 

그리고 여기서 custom ssl certificate를 선택해서

 

아까만든 acm 인증서를 선택하면됩니다

 

만약 여러분이 소유한 도메인을 연결하고 싶다면 alternate domain names에 해당 도메인 값을 입력하시고

 

dns에서 cname을 설정하시면 됩니다

 

 

 

자 이제 s3 + cloudfront + ssl 조합 완성

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ··· | 1838 |