Background

因應到目前使用者對網站Loading速度要求越來越高,CDN 目前是一種常見的技術,可以提高網站的加載速度。記錄一下如何使用 AWS cloudfront 搭配 ELB & S3 來幫助網站增加讀取速度。

Flow with CloudFront

CloudFront-Flow

如上圖整個基本的Flow大致上就是這樣,本文中主要是建立 CloudFront - Application Load Balancer &ClounFront - S3 這兩條連結。

Certificates

因為要走 https 所以你必須要申請一個憑證,透過 Certificate Manager 你可以很輕鬆的申請到 https 用的憑證,那這邊就不教學怎麼申請。這個申請的憑證在之後申請CDN時會用到。

P.S. CDN用的憑證要在 US East (N. Virginia) 下面才行。

CloudFront - Application Load Balancer

接著我們到 AWS CloudFront 的頁面來創造一個 Distribution 選擇 web service。按照下面圖是填入相對應的資訊:

Screen-Shot-2019-07-18-at-5.29.17-PM

Screen-Shot-2019-07-18-at-5.30.48-PM

Screen-Shot-2019-07-18-at-5.30.48-PM-1

  • Origin Domain Name: 選擇你要串接的服務(ELB or S3 or Custome service)
  • Origin Protocol Policy: 走 http 即可。
  • Alternate Domain Names (CNAMEs): 填入你想要的CNAME,填完之後記得去 Route53 新增一個 record。
  • SSL Certificate: 選擇我們剛剛創好的 Certificate。
  • 最後按下 Create Button 即可。(須等待 10 ~ 15分鐘)
  • 創完之後會得到一個 Domain Name,把這個欄位得值填入 Route53 那個 Record 的 Value 欄位。(記得需搭配你Alternate Domain Names (CNAMEs)中填入的欄位)

CloudFront - S3

那S3的部分也是一樣差別在於 Origin Domain Name 要選擇 S3 的 Bucket。

  • 確保你選擇的 S3 Bucket 是 public 或是有足夠的權限讓 CloudFront 有權限讀取。
  • 建立完 CloudFront 之後,通常程式端也需要做調整: https://$BUCKET.s3-ap-northeast-1.amazonaws.com/$filename 原本我們 s3 的 url 長類似這樣,CloudFront 之後還是用這個 Link 那 CloudFront 就沒有作用,因為這個 link 會直接連到S3,所以你的Domain name 要改成你剛剛連入 CNAME 的那個 Domain name,這樣才會先連到 CloudFront,然後才是S3。

Testing

那設定完了怎麼確定有沒有設定成功呢? 很簡單我們透握 Cloud Front 的 monitoring 頁面來判斷是否成功。

Screen-Shot-2019-07-18-at-3.31.47-PM

原本一開始應該是什麼都沒有,那接著你打開一個無痕視窗,填入你剛剛填入的 CNAME 網址。接著再到 monitoring 頁面基本上就會看到 Request 的結果,這樣就表示有接起來了。

Screen-Shot-2019-07-18-at-5.35.36-PM

Reference