S3, ACM, CloudFront, Route53으로 https 배포하기 (with 가비아) [3/4]

WeWorship TV·2021년 5월 16일
3

HTTPS로 출간하기

목록 보기
3/4

이제 우리는 S3에서 배포중인 정적인 페이지를 CloudFront를 통해서 배포할 것입니다.
세상 어디서든지 상관없이 원활하게 컨텐츠를 제공함과 동시에 ACM을 통해서 만든 SSL 인증서를 붙이는 작업입니다.
뭐, 이 과정 안보고 가면 손해임. 무조건 손해임

CloudFront는 도대체 어떤 녀석인가요?

AWS에서는 CloudFront를 다음과 같이 정의하고 있습니다.

Amazon CloudFront is a web service that speeds up distribution of your static and dynamic web content, such as .html, .css, .js, and image files, to your users. CloudFront delivers your content through a worldwide network of data centers called edge locations. When a user requests content that you're serving with CloudFront, the request is routed to the edge location that provides the lowest latency (time delay), so that content is delivered with the best possible performance.

아악 내 눈!! (한글 번역본 달라구요?)

Amazon CloudFront는 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 배포하는 속도를 높이는 웹 서비스입니다. CloudFront는 엣지 로케이션이라고하는 전 세계 데이터 센터 네트워크를 통해 콘텐츠를 제공합니다. 사용자가 CloudFront로 제공하는 콘텐츠를 요청하면 요청이 가장 낮은 지연 시간 (시간 지연)을 제공하는 엣지 로케이션으로 라우팅되므로 콘텐츠가 가능한 최상의 성능으로 제공됩니다.

뭐 이렇다는데, 대충 요약하자면 다음과 같습니다.

AWS에서 제공하는 CDN(Contents Delivery Network)이다.
컨텐츠를 네트워크 상에서 좀 더 효율적으로 배포하기 위한 수단으로 생각하면 된다.

더구나 우리는 HTTPS 배포를 위해 ACM에서 만든 SSL 인증서를 이용하기 위해서 사용하는 것이기도 합니다.
(뭔소리야?)

배포 설정 생성하기

  1. CloudFront에 들어가면 아래와 같은 영어가 여러분을 반길겁니다.

    걱정마세요. 이게 영어로만 지원되요. (아직 한국어 지원 안하고 있어요)
    Smooth하게 Create Distribution을 클릭합니다.

  2. 다음화면도 가뿐하게 Get Started 버튼을 클릭합니다.

  3. 이 부분이 제일 중요한대 잘만 따라오시면 어려운 것 하나 없습니다.

    Origin Domain Name -> 이 부분을 마우스로 클릭하면 목록이 나타나는데, 절대 밑에꺼 선택하지 마세요
    피 보는 수가 있으니까 S3에 있던 Endpoint기억나시죠? 그거 복사해서 붙여넣기 하세요.
    Origin ID -> 자동으로 작성되니까 건들생각 마세요.
    Viewer Porotocol Policy -> 이 부분은 Redirect HTTP to HTTPS을 선택을 해줍니다.
    그리고 화면을 밑으로 내립니다.

  4. 다음 이 부분 또 중요하니까 잘 보세요.

  • Price Class - 퍼포먼스에 비례해서 가격이 오릅니다. 실시간성이 크게 중요한 서비스가 아니라면 싼걸로 하고, 인터랙션 실시간성이 높다면 지금 선택된 옵션을 골라서 돈을 좀 씁시다.
  • Alternate Domain Names - 해당 Distribution을 통해 사용할 도메인을 등록 해 줍시다. 저 같은 경우 모두 다 동일한 도메인을 바라봐야하니까 www가 있건 없건 모두 들어와야하니 두개 다 작성해줍니다.
  • SSL Certificate - Custom SSL Certificate를 선택하면 ACM에서 설정한 인증서를 불러올 수 있습니다.
  1. 그리고 좀 밑으로 내리면 Default Root Object라고 보일텐데, 이 부분은 S3버킷의 Default Hosting Object를 적어줘야 하는 부분이므로 쿨하게 index.html을 적어줍니다.

여기까지 하셨으면 이제 맨 아래의 Create Distribution을 클릭해줍니다.
설정을 완료하면 아래 화면처럼 바뀔텐데요.

저 박스로 가리킨 In Progress화면이 생각보다 오래 갈겁니다.
물 한잔 마시고, 유튜브 영상 하나 보고 오면 될겁니다. (그런다고 또 짧은거 보는거 아니지? 적당히 긴거 보고 옵시다)


잘 되는지 확인해보려면

행여나 다시 확인해보고 싶다면 아래 3가지만 확인하면 됩니다.

  • S3 버킷이 퍼블릭으로 설정되어 있나?
  • S3 버킷 내의 각 객체가 퍼블릭으로 설정되어 있나?
  • CloudFront의 Default Root Object가 index.html로 설정되잇나?
    심각하게도 이 3개를 제대로 설정안해서 ACCESS DENIED를 뿜어내더라구요... (그렇다구요)

마지막인 CDN만 좀 설정해주면 이제 끝나네요.


아직도 뭔가 안된다면?

제발 부탁인데 아까 내가 분명 Endpoint 복사해서 붙여넣으라고 한 곳 보세요.
또 "여기 밑에 뜨자나?"라고 해서 목록에 있는거 선택했는데 안된다고 뭐라 하시지 말구요.
제발 Endpoint 복사해서 붙여넣으세요. 제가 뻘짓하고 알려드리는거예요....

profile
자 이제 시작이야 내 꿈을

0개의 댓글