[AWS] 2. CloudFront을 사용하여 웹사이트 속도 향상

CloudFront

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

 

콘텐츠를 전송하도록 CloudFront를 설정하는 방법

출처: https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/Introduction.html

1. CloudFront에서 파일을 가져와 전 세계 CloudFront 엣지 로케이션에서 배포하기 위해 Amazon S3 버킷 또는 자체 HTTP 서버와 같은 원본 서버를 지정합니다.
2. 원본 서버에 파일을 업로드합니다. 개체라고도 하는 파일에는 일반적으로 웹 페이지, 이미지 및 미디어 파일이 포함되지만 HTTP를 통해 제공할 수 있는 모든 것이 될 수 있습니다.
3. 사용자가 웹 사이트 또는 애플리케이션을 통해 파일을 요청할 때, 파일을 가져올 원본 서버를 CloudFront에 알려주는 CloudFront 배포를 생성합니다. 동시에 CloudFront에서 모든 요청을 기록할 것인지 여부와 배포가 생성되는 즉시 활성화되도록 할 것인지 여부와 같은 세부 정보를 지정합니다.
4. CloudFront는 콘솔에서 볼 수 있거나 프로그래밍 방식 요청에 대한 응답으로 반환되는 새 배포 도메인 이름을 할당합니다. 원하는 경우 대신 사용할 대체 도메인 이름을 추가할 수 있습니다.
5. CloudFront는 배포의 구성을 모든 엣지 로케이션 또는 CloudFront가 파일 복사본을 캐시하는 지리적으로 분사된 데이터 센터의 서버 모음으로 보냅니다.

 

 

실습

구성 아키텍처

CloudFront를 통해서 정적 데이터는 S3에서, 동적 데이터는 EC2를 대상으로 하는 ALB에서 처리하는 웹사이트를 구축해 보겠습니다.

 

Web 서버 및 S3 생성

SSH와 HTTP 및 HTTPS를 허용하는 보안 그룹을 가진 웹 서버 2개를 생성합니다. 생성 시 아래의 내용을 사용자 데이터에 작성하여 apache를 설치한 후, index.html에 내용을 추가하도록 합니다.

[Web 1의 사용자 데이터]

#!/bin/bash
yum install httpd -y
service httpd start
echo "<h1>Web#1 Server - index.html</h1>" > /var/www/html/index.html

 

[Web 2의 사용자 데이터]

#!/bin/bash
yum install httpd -y
service httpd start
echo "<h1>Web#2 Server - index.html</h1>" > /var/www/html/index.html

 

사용할 버킷에 퍼블릭 액세스가 가능한 이미지를 업로드합니다.

 

ALB 생성 및 구성

먼저 대상 그룹을 생성합니다.

로드 밸런서의 대상이 Web 서버이기 때문에 대상 유형을 인스턴스로 선택하고, 대상 그룹 이름을 입력합니다.

Web 서버가 위치한 VPC를 선택한 후, 다음을 클릭합니다.

Web 1과 Web 2를 선택하여 아래에 보류 중인 것으로 포함시킨 후, 대상 그룹 생성을 클릭합니다.

문제가 없다면 생성된 대상 그룹에 등록된 대상의 상태가 healthy인 것을 확인할 수 있습니다.

대상 그룹 생성이 완료되면, 로드 밸런서를 생성합니다.

HTTP 및 HTTPS 트래픽을 사용하기 때문에 ALB를 선택하여 생성합니다.

로드 밸런서 이름을 입력합니다.

Web 서버가 위치한 VPC와 서브넷을 선택합니다.

Web 서버에 사용된 보안 그룹과 생성한 대상 그룹을 선택한 후, 맨 아래 생성을 클릭합니다.

문제가 없다면 생성된 로드 밸런서의 DNS 이름으로 접속 시, 작성한 index.html 내용이 잘 뜨는 것을 확인할 수 있습니다.

 

Route 53 및 ACM 생성

Route 53에 사용할 도메인을 등록해둡니다.

CloudFront 배포에 ACM 인증서를 할당하려면 버지니아 북부 리전에서만 인증서를 요청하거나 가져올 수 있기 때문에, 버지니아 북부에 ACM 인증서를 생성해둡니다.

 

CloudFront 생성 및 구성

CloudFront 콘솔에서 배포 생성을 클릭합니다.

원본 도메인으로 생성한 ALB를 선택합니다.

HTTP 요청이 자동으로 HTTPS 요청으로 리디렉션 되도록 뷰어 프로토콜 정책을 설정합니다.

CloudFront로 접속할 대체 도메인 이름을 추가하고, 생성한 ACM 인증서를 선택한 후, 맨 아래 배포 생성을 클릭합니다.

그리고 사용할 도메인에서 CloudFront의 대체 도메인 이름을 사용할 수 있도록 레코드를 생성합니다.

ALB에 대한 CloudFront 구성은 완료되었고, S3에 대한 CloudFront 구성을 위해 원본 생성을 클릭합니다.

원본 도메인으로 연결할 S3 버킷을 선택합니다. 그리고 해당 버킷이 CloudFront에 대한 액세스로만 제한되도록 OAI 사용을 체크하여 새 OAI을 생성한 후, OAI에 대한 읽기 액세스를 허용하도록 S3 버킷 정책을 업데이트하여 원본을 생성합니다.

CloudFront에 대한 요청은 기본적으로 ALB를 거쳐 Web 서버로 요청하게 되지만, 확장자가 jpg인 요청은 S3 버킷으로 요청할 수 있도록 동작 생성을 클릭합니다.

따라서 경로 패턴에 "*.jpg"를 입력하고, 원본은 연결할 S3 버킷을 선택합니다. 그리고 Redirect HTTP to HTTPS를 선택하여 동작을 생성합니다.

 

확인

CloudFront의 대체 도메인 이름으로 접속하면, ALB를 통해 Web 서버에 잘 접속한 것을 확인할 수 있습니다.

마찬가지로 CloudFront를 통해 S3 버킷에 업로드된 jpg 파일에 접속하면, 동작 생성한대로 S3 버킷에 잘 접속하는 것을 확인할 수 있습니다.