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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

 

 

정적 웹사이트 운영을 위해

 

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

 

정적인 사이트를 호스팅하려고 하는 경우라면 오류문서는 404 나 기타 오류가 발생할때 보여지는 페이지를 입력해주시면 됩니다

 

단 vue나 react를 사용하는 경우라면 history mode의 라우팅 처리를 위해서 오류문서 입력란에도 index.html을 설정하면 동적라우팅이 정상적으로 동작합니다

 

vue나 react를 사용한 SPA 에서는 실제 웹문서는 index.html 파일이 하나밖에 없고 나머지는 동적라우팅 방식으로 처리가 되기 때문에

 

실제로 웹문서가 존재하지 않는 경로를 입력하면 강제로 index.html 파일로 이동시켜 다시 동적라우팅을 발생시키기 위함입니다

 

하지만 실제로 404를 발생시켜야하는 경우도 있을수가 있으므로,

 

vue또는 react를 사용할때는 * 와일드카드 라우팅으로 404를 위한 라우터 설정을 해주셔야 합니다

 

 

 

 

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

 

 

 

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

 

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 조합 완성