ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • CloudFront를 이용하여 CDN 기능 이용하기
    클래스/초급 2022. 3. 20. 16:02
    728x90

    CloudFront

    이번 글에서는 AWS CloudFront를 프론트엔드 파일들을 배포하는 방법을 알아보자.

    CloudFront는 AWS에서 짧은 대기 시간과 빠른 전송 속도로 콘텐츠를 안전하게 제공하기 위한 서비스이다.

    html, css, js, 이미지 같은 정적 파일이나 동영상 파일 같은 동적 파일들이 대상이 된다.

    먼저 프론트 파일들을 배포하면 해당 파일들을 AWS가 관리하는 리전들의 엣지 서버에 저장한다.

    그리고 어떤 지역에서 사이트를 접속하면 접속한 지역에서 가까운 엣지 서버에서 파일을 다운로드

    받을 수 있게 해준다. 이렇게 하면 네트워크 지연에 따른 문제를 획기적으로 줄여준다.

     

    만약에 미국에 있는 사용자가 한국 사이트에 접속하려면 브라우저에서 html, css, js, 이미지 파일들을 다운로드 

    받아야 하기 때문에 느릴 수 있다. 그러나 CloudFront를 파일들을 배포하면 접속자가 가까운 엣지 서버에서 파일들을 

    다운로드하기 때문에 거리가 멀어서 느려지는 현상을 해결할 수 있다. 이런 기능을 CDN이라고 한다.

     

    CDN이라는 기능은 클라우드가 존재하기 전에도 있었다. 다만 CDN에 특화된 회사들이 서비스를 했다.

    대표적인 CDN 서비스 회사로는 아카마이, 씨디네트웍스 등이 있다.

     

    아카마이
    씨디네트웍스

    그럼 CloudFront를 어떻게 사용하는지 알아보자.

    먼저 S3 버킷을 만들고 index.html 파일도 만든다.

     

    서버 없이 프론트엔드 배포하기

    이번 글에서는 AWS S3 정적 웹호스팅 기능을 이용하여 프론트엔드 사이트를 서버리스로 만드는 방법을 알아보자. 프론트엔드 서버리스가 무슨 말일까? 요즘 프론트엔드와 백엔드를 나누어 프로

    preiner.tistory.com

    이 부분은 이미 이전 글에 작성해놓았기 이전 글을 참고하면 된다.

     

    버킷

    my-cloudfront-site라는 버킷을 생성하고 index.html 파일을 업로드했다.

     

    index 파일

    그리고 S3에서 제공하는 고유 URL을 사용하여 브라우저에서 접속할 수 있는 상태를 만들었다.

    그럼 이제 CloudFront를 만들고 S3와 연동하기만 하면 된다.

     

    CloudFront 

    메뉴 검색에서 CloudFront를 검색하면 글로벌 콘텐츠 전송 네트워크라고 짤막하게 설명이 보이고

    서비스 항목에 나타난다. 글로벌 콘텐츠 전송 네트워크라고 해서 콘텐츠랑 html 파일이랑 무슨 상관이지 의아해 할 수도 있다.

    하지만 웹에서는 html, css, 이미지, 동영상 파일들이 전부 콘텐츠이다. 쉽게 말하면 이런 콘텐츠 파일을 세계 어디에서 브라우저를 열어 호출해도 빠른 네트워크를 통해 전송해 주려는 기능이다. 

    참고로 CDN 기능을 사용하는 이유는 글로벌 콘텐츠 전송이 용이하게 하기 위해서이다. 우리는 스마트폰 시대에서 다국적 회사의 콘텐츠를 

    한국에서 소비한다. 그렇다고 그 회사들이 전부 한국에 서버를 가지고 있는 것은 아니다. 서비스하는 지역마다 서버를 갖추어 놓지 않아도

    CDN 기능을 잘 사용하면 콘텐츠를 서비스하는 데에는 무리가 없어진다.

    그럼 이제 CloudFront를 생성해서 S3와 연동해보자.

     

    CloudFront 메인

    CloudFront 서비스 페이지로 들어와서 배포 생성 버튼을 클릭해보자.

     

    배포 생성 - 원본

    배포 생성 페이지로 들어와서 원본 도메인 부분을 설정해보자.

    방금 만들었던 S3 버킷을 선택하면 된다.

    다른 입력사항들은 수정하지 않아도 된다. 그리고 배포생성 버튼을 클릭한다.

     

    CloudFront - 배포

    배포 리스트를 확인해보면 도메인 이름을 확인할 수 있다. 이제 S3의 고유한 도메인으로 접속하지 않고

    각 리전의 엣지 서버로 배포가 되기 때문에 배포 도메인 이름으로 파일에 접속하면 된다.

    그리고 마지막 수정 부분에 배포되고 있는 상태이기 때문에 배포가 표시된다. 

     

    CloudFront - 배포

    배포가 완료되면 마지막 수정 부분이 배포 상태에서 수정 일자로 바뀐다.

    그럼 이제 도메인 이름을 이용하여 html 파일을 확인해 볼 수 있다.

     

    index.html

    접속 URL을 보면 S3 고유의 URL이 아닌 CloudFront가 발행한 URL로 접속할 수 있는 것을 볼 수 있다.

    이렇게 접속이 되면 이제 CloudFront를 이용해 글로벌 엣지 서버들에 배포가 완료되었다고 보면 된다.


    이렇게 CloudFront를 이용하면 글로벌 서비스를 할 때 아주 용이하게 사용할 수 있다.

    그리고 S3의 고유 URL로 파일을 호출하지 않기 때문에 파일 호출 비용을 줄 일 수 있다.

     

     

    728x90

    '클래스 > 초급' 카테고리의 다른 글

    EC2 이미지 만들기  (0) 2022.03.25
    Certificate Manager 이용해서 HTTPS 통신하기  (0) 2022.03.22
    Route53 으로 DNS 관리  (0) 2022.03.17
    AWS 로그인 보안 강화하기  (0) 2022.03.16
    서버 없이 프론트엔드 배포하기  (0) 2022.03.13
Designed by Tistory.