Hands On - Amazon CloudFront

Recommanded Free YOUTUBE Lecture: <% selectedImage[1] %>

yundream
2023-04-22
2023-04-22
1971

## CloudFront & CDN
CDN은 일종의 분산 캐시서버로 사용자들이 자주 사용하는 컨텐츠의 복사본을 저장하고 있다가 대신 전달해주는 일을 한다. 보통 CDN 서비스는 세계 주요 지역 곳곳에 **CDN edge server** 라는 고속의 서버를 두고 여기에 데이터를 복사해 둔다. 따라서 사용자는 가까운 지역에서 빠르게 데이터(이미지, 영상 등)에 접근 할 수 있다.

![CDN](https://docs.google.com/drawings/d/e/2PACX-1vRmpMZgZh7noxeQLW0EkFksJ1wXV7Nd3C_0LWharqXIGYKUCA56IRXrFxZKFNqwMxoRWXf-BihhikB7/pub?w=1206&h=634)

**CloudFront** 는 AWS(Amazon Web Service)의 CDN(Content Delivery Network)이다. CloudFront를 이용해서 기업과 조직은 낮은 대기시간과 높은 데이터 전송 속도로 전 세계 사용자들에게 컨텐츠를 배포 할 수 있다. 아래 그림은 전세계에 흩어져 있는 CloudFront 인프라를 보여주고 있다.

![CloudFront](https://docs.google.com/drawings/d/e/2PACX-1vQjD3ZxcxFPvjQkGVHsSXkcMy4708xn_6EXFwfTFejrI6wK0fIQy37E3jKLPIJyBYwDOaxvzlamR-vT/pub?w=2026&h=1126)

엣지 로케이션은 CloudFront CDN 인프라의 일부로 전 세계에 위치한 데이터 센터다. 엣지 로케이션은 전 세계 사용자들에게 빠르게 컨텐츠를 제공할 수 있도록 서로 다른 위치에 전략적으로 배치된다.

사용자가 웹 사이트에 콘텐츠를 요청하면 CloudFront는 사용자에게 가장 가까운 엣지 로케이션에서 콘텐츠를 제공한다. 이렇게 되면 데이터가 이동해야 하는 거리를 최소화할 수 있기 때문에 대기 시간을 줄여서 웹 사이트의 성능을 향상시킬 수 있다.

## CloudFront 구축 실전
#### 사용자 시나리오
Joinc 사이트는 많은 수의 이미지를 서비스하고 있다. 지금은 EC2 서버에서 이미지도 함께 서비스하고 있는데 사용자가 늘어나면서 이미지 로딩시간이 길어지고 있다. Joinc 관리자는 AWS CloudFront를 이용해서 이 문제를 해결하기로 했다.

#### Joinc CloudFront CDN 아키텍처
CloudFront CDN 아키텍처는 아래와 같다.
![CloudFront CDN](https://docs.google.com/drawings/d/e/2PACX-1vTjSRZvED7Q3C6KMsGljPe4h7WA4hpYgscev9SO_rZLcqHP0xVNm7UX2DDDV9HwGj2FD7NUvzp8hEto/pub?w=1050&h=578)
1. Joinc의 이미지들은 S3에 저장된다. CloudFront의 오리진(Origin-원본)은 S3가 된다. 
2. CloudFront Distribution을 생성한다. 오리진은 S3로 하면 **CloudFront Endpoint URL** 이 만들어진다. 
3. Route 53에 img.joinc.co.kr A 타입 레코드를 등록한다. 가리키는 대상은 CloudFront Endpoint URL 이다. 
4. HTTPS 연결을 위해서 ACM을 이용해서 SSL/TLS 인증서를 만들어서 CloudFront에 연결하면 된다.

실제 작업을 하면 미세하게 순서가 바뀔 수 있지만 위의 4개 틀에서 벗어나지는 않는다. 어쨋든 4 번의 과정만으로❗ CloudFront에 연결할 수 있다.

#### S3 Bucket 설정
현재 Joinc 이미지들은 EC2 서버에서 직접 서비스하고 있다. S3를 오리진으로 하기로 했으니, S3에 버킷을 만들고 이미지를 S3 버킷으로 복사해야 한다. S3는 CloudFront에서 접근 할 수 있도록 설정해야 한다.
1. Public accessible 로 설정: S3 버킷이 인터넷에 완전히 공개된다. 편하기는 하지만 좋은 방법은 아니다. 
2. Private accessible 로 설정하고 CloudFront에서 접근 할 수 있도록 한다.

두 가지 모두 테스트하려 한다. 우선은 쉬운 1번으로 설정했다.
![s3 bucket 설정](https://docs.google.com/drawings/d/e/2PACX-1vR2FIS5BIh_-sFJlN_LJru5PPsth3DoQTBl58TjrjVBQ0pclUUuWPg0G8oC95KEOvkf3nsAlkKiZzl-/pub?w=1180&h=608)
* joinc-edu: cloudfton로 연결할 버킷. 
* docker-msa: Joinc 이미지들이 위치하는 디렉토리

**SSL/TLS 인증서 설정**
cloudfront는 HTTPS를 지원하므로 **ACM**을 이용해서 img.joinc.co.kr에 대한 **SSL/TLS 인증서**를 만들어야 한다. img.joinc.co.kr 도메인 레코드도 추가해야 하는데, img.joinc.co.kr는 CloudFront URL을 등록해야 하기 때문에 CloudFront distribution(CloudFront 배포)를 만든다음 설정해야 한다.

**Request a certificate** 를 클릭한다.
![ACM](https://docs.google.com/drawings/d/e/2PACX-1vQp7Z1weZxLIBXPvGt9KnXFpFaeq0QwfEFtZNhjAotmx1iBb5vNG88CTwo1xSq4aGycG4VrABNqz9vQ/pub?w=1230&h=530)

공용 네트워크(Internet)에서 사용할 인증서이므로 **Certificate type**은 "Request a public certificate"를 선택한다.
![ACM](https://docs.google.com/drawings/d/e/2PACX-1vRocFaGLHfc-bTiEyCtd3PTcskATyQv6PeuMPJnlCjWvc-J0w_Ee6NRTXpkG7CRG_-m5iod3FO7Hl0B/pub?w=1130&h=454)

인증서를 적용할 도메인 이름 img.joinc.co.kr를 입력한다. **Validation method**는 인증서를 요청하는 사용자가 해당 도메인의 소유자인지를 확인하기 위한 방법을 선택한다. joinc.co.kr은 Route 53으로 관리하고 있기 때문에 **DNS validation**을 사용하면 된다. "Request" 버튼을 누르면 인증서가 요청된다. 그리고 Route 53의 joinc.co.kr 호스트 존에 자동으로 도메인 권한을 검사하기 위한 CNAME 레코드가 삽입된다. 
![ACM Route53](https://docs.google.com/drawings/d/e/2PACX-1vQX2vPO01d20TqPLenO-FcvglQrQQSbbnYX5_f5Q4wO9z50nArh2PF_LHY5ZlPfhnIGpmC1IkWMQy3a/pub?w=1134&h=135)

아래와 같이 **Issued** 상태가 되면 성공적으로 발급됐음을 의미한다.
![ACM Issued Status](https://docs.google.com/drawings/d/e/2PACX-1vQEyIS2eGkTXH9cgg-cL7ra6-If7S8eofONWCyNfBfXQjy_l5vD08KZu7uL8qdtDEyp5IjTlUqm3SPy/pub?w=1232&h=266)

#### Joinc-edu 버킷을 CloudFront 오리진으로 설정
아래와 같이 S3 버킷을 CloudFront 오리진으로 설정한다.
![CloudFront s3 origin](https://docs.google.com/drawings/d/e/2PACX-1vSZDdJSK8eaGvxYjGy0twM2u1hYv134xVVUw07lKIrulnERtzPbg7JsCoVb5ZTpzdhbuqc4ajFhkbQt/pub?w=758&h=331)
joince-edu 버킷의 docker-msa 오브젝트를 오리진으로 설정한다. docker-msa는 이미지 목록이 들어있는 디렉토리 타입 오브젝트다.

![CloludFront create distribution](https://docs.google.com/drawings/d/e/2PACX-1vRZzrIsFFYzlff3Nmp9xb_k35poYXgTz3GLGCO6W_awL4nYdR9XRRL5EscJYvyBWp2HC1j5PIMr0ooC/pub?w=1378&h=344)
CloudFront 대시보드로 이동해서 **Create distribution(배포 생성)** 을 클릭한다. 중요한 것들만 소개하겠다. 여기에서 설명하지 않은 것들은 *Default* 로 설정해도 된다.

![CloudFront Create Distribution](https://docs.google.com/drawings/d/e/2PACX-1vS47tYyPhrORm057vxf3IsaQLZe-WmrXY03Q2Z3YaknGR7Qy6JqsWhezWp8pFzZPJrqqxDhZ3TxC_LQ/pub?w=822&h=658)
* Origin domain: 오리진 리소스를 선택한다. 선택창을 클릭하면 오리진으로 사용 할 수 있는 AWS 리소스들의 목록이 나온다. 여기에서는 AWS 리소스인 S3를 선택했지만 외부 리소스 URL을 직접 입력할 수도 있다.
* Origin Path: 리소스의 경로다. "path" 형식으로 입력하면 된다. 여기에서는 루트("/")를 연결할 거라서 입력하지 않았다.
* Name: 오리진 리소싀의 URL 이다. AWS 리소스를 선택했다면 자동으로 설정된다.
* Origin access: S3 버킷을 Public으로 설정했으므로 **Public**를 선택한다.
* Compress objects automatically: CloudFront는 데이터를 자동으로 압축할 수 있다.
* Allowed HTTP method: 허용할 HTTP 메서드를 설정할 수 있다. 선택할 수 있는 HTTP 메서드는 GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE 등이 있다. Joinc 사이트에서는 이미지 다운로드만 제공하므로 "**GET, HEAD**" 만 허용했다.
* Price class: 가격 등급에 따라 엣지 로케이션이 결정된다. all edge location을 사용하면 전 세계 엣지 로케이션에 컨텐츠를 배포할 수 있지만 그만큼 비용이 높아진다. Joinc는 글로벌 서비스가 아니므로 **Use North America, Europe, Asia, Middle East and Africa** 를 선택했다.
* AWS WAF: WAF(Web Application Firewall)을 선택하면 보안을 높일 수 있다. 여기에서는 선택하지 않았다.
* Alternate domain name(CNAME): CloudFront 사용자 도메인을 설정한다. 설계했던 대로 img.joinc.co.kr을 설정한다.
* Custom SSL certificate: SSL/TLS 인증서를 선택한다. ACM으로 생성한 인증서를 선택하면 된다.

설정을 끝내고 **Create distirubution** 버튼을 클릭하면 아래와 같이 CloudFront 배포가 만들어진다. 5분 정도 기다리면 **Enabled** 상태가 될 것이다.
![CloudFront Distribution](https://docs.google.com/drawings/d/e/2PACX-1vTuDzzhWRECWv_YWyqK33gL2yd1a-HcZ8ZmVUFAYPJ8sst5r7qf4idCjdep9T3jHGQT4lPmt6G6wS68/pub?w=1234&h=187)

#### img.joinc.co.kr 도메인 등록
**CloudFront 배포**가 만들어지고 **S3 오리진**과 연결이 되었으므로 img.joinc.co.kr 도메인을 생성해서 CloudFront 배포와 연결하면 된다.

Route 53으로 이동해서 **Create record**를 클릭한다.
![](https://docs.google.com/drawings/d/e/2PACX-1vTDO-7w7yr_R7alPjBPddR-aWShJcSzZFRApj4KvF7Hl9rus2bnzG8goTQMrZgfjHhM_pbLApezCNUB/pub?w=1156&h=352)

**Simple routing**을 선택하자.
![](https://docs.google.com/drawings/d/e/2PACX-1vQbqtas7OOqN1_UvEvd2G2eq39vydohfHJ1QQ1PM0Q8ZtZXvRzZVv_0tv_JQBxjMJ73bSbCKqTnw_ji/pub?w=812&h=646)

**Define simple record**를 선택해서 레코드를 설정한다.
![Route 53 define simple record](https://docs.google.com/drawings/d/e/2PACX-1vT_k8lEHBtWxKhLbV0RU5AXAEawhdMnc3pV5nZ5stts7Y9mp_FTzfXg3tgm7D8NXC399BUbZEx0nMEe/pub?w=615&h=763)
* **Record name**: img.joinc.co.kr를 입력한다.
* **Record type**: A 타입으로 설정한다.
* **Value/Route traffic**: CloudFront 배포를 선택하고, 앞서 만들어둔 CloudFront URL을 선택하면 된다.

#### 테스트
이제 테스트를 해보자. 도메인 설정이 잘 됐는지 먼저 확인해 보자.
```text
$ dig img.joinc.co.kr
; <<>> DiG 9.18.12-0ubuntu0.22.10.1-Ubuntu <<>> img.joinc.co.kr
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 34434
;; flags: qr rd ra; QUERY: 1, ANSWER: 4, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 65494
;; QUESTION SECTION:
;img.joinc.co.kr.		IN	A

;; ANSWER SECTION:
img.joinc.co.kr.	60	IN	A	54.230.167.51
img.joinc.co.kr.	60	IN	A	54.230.167.79
img.joinc.co.kr.	60	IN	A	54.230.167.92
img.joinc.co.kr.	60	IN	A	54.230.167.106

;; Query time: 20 msec
;; SERVER: 127.0.0.53#53(127.0.0.53) (UDP)
;; WHEN: Sat Apr 22 16:17:11 KST 2023
;; MSG SIZE  rcvd: 108
```

curl을 이용해서 이미지를 다운로드해보자. 
```shell
curl http://img.joinc.co.kr/docker-msa/ham-01.jpeg --output ham-01.jpeg
```

curl -vvv 옵션으로 리턴 값을 확인해보자.
```text
$ curl http://img.joinc.co.kr/docker-msa/ham-01.jpeg -vvv --output test.jpeg
* Connected to img.joinc.co.kr (54.230.167.79) port 80 (#0)
> GET /docker-msa/ham-01.jpeg HTTP/1.1
> Host: img.joinc.co.kr
> User-Agent: curl/7.85.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Content-Type: image/jpeg
< Content-Length: 12047
< Connection: keep-alive
< Date: Sat, 22 Apr 2023 07:23:55 GMT
< Last-Modified: Tue, 18 Apr 2023 23:52:36 GMT
< ETag: "ca30b705052efe6d7ee10856bcea9039"
< x-amz-server-side-encryption: AES256
< Accept-Ranges: bytes
< Server: AmazonS3
< X-Cache: Hit from cloudfront
< Via: 1.1 1351e3e01d226a10f8a8cf114a2f359a.cloudfront.net (CloudFront)
< X-Amz-Cf-Pop: ICN51-C2
< X-Amz-Cf-Id: 2AD8eNibusAcukyoSpRYwXLW5GXCA80NkhhyjNVgw6f2mlRGWFWsvw==
< Age: 188
< 
{ [1428 bytes data]
100 12047  100 12047    0     0   486k      0 --:--:-- --:--:-- --:--:--  490k
```
**X-Cache** 
Hit from cloudfront. CloudFront에 캐시된 이미지를 다운로드(캐시 적중) 했음을 알 수 있다.

**X-Amz-Cf-Pop**
요청을 처리한 CloudFront 엣지 로케이션의 IATA 정보다. IATA는 전세계의 공항과 대도시 지역을 지정하는 3자리 코드다. 이것을 통해서 대략 어느 위치의 엣지 로케이션에서 요청을 처리했는지 알 수 있다. 위 예제의 **ICN51-C2**는 인천국제공항을 나타내는 코드다. 대략 경기/서울에서 요청을 처리했음을 알 수 있다. IATA 정보는 [AWS CloudFront CDN Edge Locations 259 PoPs](https://www.feitsui.com/en/article/3) 에서 확인할 수 있다.

Search For:

BY TAGS

Recent Posts

Archive Posts

Tags

About

Get in Touch

Categories