무료로! CDN 제작하기(AWS S3 + Cloudflare)

우선, CDN 이란? 

Content Delivery Network의 약어로서 전 세계에 분산되어 있는 네트워크 서버를 사용하여 
사용자가 리소스를 지리적으로 가까운 서버에서 끌어다 쓸 수 있게끔 해주는 네트워크이다.
물리적으로 지연되는 시간을 감소시킬 수 있다는 장점이 있다.

 

CDN을 제공하는 서비스는 이미 대게 알고 있겠지만, 엄청 많다. AWS Cloud 를 사용한다면, 당연 CloudFront를 첫째로 
꼽을 수 있겠고, 이 이외에도, MaxCDN, Akamai 등이 있다.

 

그렇다면 나는 Cloudflare 를 사용하고자 하는데, 왜 Cloudflare 에서 제공하는 CDN 을 선택한 것일까?

Cloudflare - The Web Performance & Security Company | Cloudflare

 

사실 큰 이유는 없다. 그냥, 무료라서 그렇다. (사실, 일정량 이상의 storage 사용이 무료이긴 하다)

비용절감이라는 키워드는 항상 중요시 되어왔고 지금 현재도 그러하다.

단 돈 1,000원 이라도 절약해보고자 무료로 제공하는 Cloudflare 를 사용하여 CDN 서비스를 만들어보려 한다.

 

그럼 이제 사설은 정말 뒤로하고, CDN을 생성해보자.

 

 

 

---

먼저 필수 요건,

1. AWS 계정 (AWS 웹사이트 바로가기)
2. Cloudflare 계정 (Cloudflare 웹사이트 바로가기)
3. 도메인 (도메인은 여러 웹사이트에서 구매가 가능하다)

---

순서

1. S3 만들기
2. S3 정적 웹사이트 호스팅
3. S3 Bucket Policy 설정
4. Cloudflare에 내 도메인 등록하기

---

 

 

 

1. S3 만들기

S3 Bucket 을 생성합니다.

주의할 점은 이용하고자 하는 도메인으로 Bucket Name 을 설정해야한다.
– 예) cdn.google.com, cdn.mydomain.com

 

• Bucket name : cdn.your-domain.com
• Region : Asia Pacific (Seoul)

로 설정해주고 [Create]를 클릭한다.

* [Next] 를 클릭하여 더 깊은 설정을 해도 된다. S3에 대해 더 알고 싶다면 혹은 잘 안다면 클릭하고 설정하자.

 

 

 

 

 

 

2. S3 정적 웹사이트 호스팅

아래 그림과 같이 S3는 “Static Website Hosting”으로 설정을 변경해야한다..

Static Website Hosting 을 한다는 것은, S3 를 정적 웹 사이트 호스팅을하여, 정적 웹문서, 혹은 정적 콘텐츠를 띄우는 서버로 S3를 사용함을 의미한다. (더 자세한 설명을 보고자 한다면 여기를 클릭)

 

1) 위 그림 오른쪽 상단에 보면 [Static website hosting]이라고 있다.

2) 해당 박스 클릭 후, [Use this bucket to host a website] 를 클릭한다, 

3) 정적 사이트를 사용하기로 했으므로, 해당 라우터로 접속 시 default 로 serving 할 파일을 선택한다.

4) 우리는 "Index Document' 를 index.html 로 설정하기로 한다.

5) [Save] 하게 되면, Static Hosting 이 시작된다.

Static Hosting 이 완료되고 나면, 이제, 해당 S3 의 Bucket Policy 를 설정해 보자.

 

 

 

 

 

3. S3 Bucket Policy 설정

Bucket Poicy (버킷 정책)은 해당 버킷 마다 정책 설정이 가능하며 , 이는 주로 해당 버킷의 권한과 관련된다.

S3 버킷에 대한 정책 설정은 이번편에서 설명하기엔 너무 복잡하므로, 사용하게 될 정책에 대해서만 간략하게 설명하고자 한다.

 

정책을 위의 그림과 같이 설정한다.

아래 파일 복사 - 붙여넣기 가능

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":"s3:GetObject",
      "Resource":"arn:aws:s3:::cdn.your-domain.com/*"
      }
  ]
}

해당 정책은, "특정 접두사에 퍼블릭 읽기 액세스를 부여하는 버킷 정책을 사용" 한다는 의미이다.

Version 은 2012-12-17 을 버전을 무조건 사용하여야 하며,

Sid로  어떤 Statement 인지 정하고,

Effect로 어떤 효과를 사용할지 설정하고, 

Action로 어떤 액션에 효과를 줄지를 설정한다.

마지막으로 Resource로 어떤 리소스에 해당 정책을 적용할지를 설정한다.

 

위의 예와 같이 설정된 것을 풀어보면,

• AddPerm(Sid) Statement 이고,
• cdn.your-domain.com/*(Resource)에,
• GetObject(Action)하는 행위 대해, - (READ PERMISSION)
• Allow(Effect) 

의 정책을 추가하는 것을 나타낸다.

 

*중요* 따라서, Resource 부분에 본인이 사용하고자하는 본인의 Bucket 명을 사용해야한다.

예) arn:aws:s3:::cdn.your-domain.com/*

이렇게 S3 Bucket Policy 설정도 완료되었다.

혹시나 정책에 대해서 더 보고자 한다면.. 여기 

예제 안내: Amazon S3 리소스에 대한 액세스 관리 - Amazon Simple Storage Service

 

 

 

 

4. Cloudflare에 내 도메인 등록하기

가입했던 아이디와 비밀번호를 입력 후 로그인을 하게 되면,

"홈" 탭에 사이트를 추가할 수 있게 버튼과 인풋박스가 나온다.

[ + 사이트 추가 ] 버튼을 누른다.

 

추가 버튼을 누르고 나면, 요금제를 선택하는 페이지가 나오는데, [Free]를 선택하고 [요금제 확인]을 누른다.

요금제 확인을 누르고나면, 해당 도메인과 관련된 레코드 정보를 불러온다.

해당 도메인이 맞으면 계속하고 다음으로 넘어간다.

 

현재의 과정은 해당 도메인을 cloudflare 에서 활성화를 시키기 위한 작업인데,

기존에 사용하고 있던 namespace 들을 모두 cloudflare 로 바라보게 만들어 줘야한다.

현재 우리가 free 요금을 선택하였기 때문에 두개의 네임서버를 받았을 것이다.

도메인 구매를 하였던 곳에서 [네임서버] 변경을 누른 후, 제공받았은 2개의 네임서버를
각 각 1차, 2차에 넣고 [저장]을 누른다. 적용이 되는데는 1~2일 걸린다는 메세지를(보통) 받게된다.

 

등록이 완료된 후, Cloudflare 웹사이트에서,

도메인을 누르고 도메인 관리에 들어가게되면, 위와 같이 여러 메뉴가 나타난다.
그 중 [DNS] 메뉴로 들어가면, 이미 등록된 도메인이 보이는데 해당 도메인에 이제 cdn 이라는 서브도메인을 추가한다.
아래 그림과 같이 cdn.your-domain.com 으로 등록하면 된다. (예시로는 google.com 을 사용했습니다)

 

• 첫번째 옵션 : CNAME
• 두번째 옵션 : cdn
• * 중요 * 세번째 옵션 : cdn.google.com.s3.ap-northeast-2.amazonaws.com

세번째 옵션이 중요합니다. 원하는 cdn 주소 + Region 주소 (ap-northeast-2) 를 입력하여야 한다.

 

세번째 값까지 다 합치고 난 뒤 [Add Record] 로 설정값을 추가!.

 

그리고 일정 시간이 지나게 되면, CDN 생성이 완료되는데, 테스트를 해봐야한다..

테스트하는 방법은 여러가지가 있는데.. (curl 로 파일 요청해서 받는게 일반적이나..) 
더 몸으로 와닿게 하기 위해선..

 

(소소한 팁) CDN 이 잘 등록되었는지 알 수 있는 소소한 팁

1. 해당 S3 에 test.jpg(큰 파일일수록 몸으로 많이 와닿음) 라는 파일을 올리고,
2. cdn.your-domain.com/test.jpg로 액세스 합니다. 그럼 해당 jpg 이미지가 웹브라우저에 나타납니다.
3. 해당 브라우저창을 닫고 다시 cdn.your-domain.com/test.jpg로 액세스 합니다.
4. 이론적으로 이전보다 빨리 이미지가 로딩되어야 한다. 하지만 사람이 못느낄 정도의 차이가 있을 수 있으므로, 더 정확한 테스트를 하기 위해선 해당 S3 버킷에서 test.jpg 라는 파일을 지운다
5. cdn.your-domain.com/test.jpg 로 액세스해본다. 파일을 버킷에서 지웠음에도 불구하고 해당 파일은 액세스가 가능하다.

바로 CDN 서버에서 들고와서 그렇다.

 

 

그리고 해당 CDN에 보관된 파일을 정리하기 위해선 [purge] 라고 하는 개념을 이용하여 CDN 에 보관된 파일들을 갱신하거나 삭제할 수 있다.