AWS: CloudFront（CDN）的使用

阿新 • • 發佈：2018-12-27

簡介

架構圖（可使用ELB或S3作為儲存源）

Demo(以S3為例）

建立好S3之後，上傳一張圖片，如下圖：

登入到AWS 控制檯，選擇CloudFront, 點選Create Distribution-> (Web) Get Started，接著會要求你填入三個步驟。

（1）源設定(Orgin Setting)

在Origin Domain Name中選擇你建立的S3，這裡你可以輸入以下兩種格式：

REST API 終端節點使用以下格式：
example-bucket.s3.amazonaws.com

或者

靜態網站終端節點使用以下格式：
example-bucket.s3-website-us-east-1.amazonaws.com

如果你使用第二種靜態網站的方式的話，必須要讓S3裡面的object 都可以公開訪問，我這裡使用得是第一種，使用Rest API終端節點的方式，不過這裡要建立一個origin Access Identity，讓CloudFront可以訪問S3,如下圖

（2）快取設定（Default Cache Behavior Settings）

直接用預設就好了，具體每個屬性的意義可參考最下面的參考連結

（3）分發設定（Distribution Settings）

這裡預設選擇是全球的，大概覆蓋全球80多個地點。

最後直接點選Create Distribution，然後回到Distributions頁，啟用它，它的狀態是in progress，然後等待約15分鐘後，它的狀態是Deployed, 這說明CDN已經設定好了

上圖紅色的部分是它創建出來的域名，我們直接訪問 db42vnq0gwaep.cloudfront.net/timg.jpg,看到出來了一張美女（趙麗穎）

如何讓快取失效呢（測試時記住要清空瀏覽器快取）

剛才上傳了一張timg.jpg，但如果我想繼續使用這個檔名但換一張美女圖，希望使用者可以看到最新的美女圖（佟麗婭），而不是舊的美女圖（趙麗穎），首先我們在S3把圖片換成美女（佟麗婭），結果無論怎麼清空我的瀏覽器快取後檢視都始終是舊美女，甚至換了個瀏覽器，再在URL後面加了一個v=1不起作用。

那接下來怎麼辦呢？這裡有兩種辦法：

（1）版本控制

這裡需要用到Query String Forwarding and Caching, 更加後如下

漫長的等待了約15分鐘後，再看看

http://db42vnq0gwaep.cloudfront.net/timg.jpg(趙麗穎)

http://db42vnq0gwaep.cloudfront.net/timg.jpg?v=1(趙麗穎)

http://db42vnq0gwaep.cloudfront.net/timg.jpg?v=8(佟麗婭)

也就是說當你訪問新的網址時，它才去S3裡去取，否則就讀之前的。

再次訪問?v=8，可以看到CDN又起作用了。X-Cache：Hit 表示CDN生效了。

（2）Cloudfront Invalidation功能

如果不想設定任何版本，那該怎麼處理呢。在invalidations中把圖片加進去，如下

約一分鐘後，我們再把美女換回(趙麗穎)，再來訪問，成功了。

如何將CDN域名轉到正式的生產環境域名

我們剛才使用db42vnq0gwaep.cloudfront.net/timg.jpg來訪問我們的圖片，這裡的CDN域名就是db42vnq0gwaep.cloudfront.net，這名字看起來很怪，在正式生產環境中我們可能使用像example.com這樣的域名。所以我們還需要在DNS 服務提供商那個加一條CNAME將example.com指向db42vnq0gwaep.cloudfront.net。

如果你覺得這域名db42vnq0gwaep.cloudfront.net不好看，你可以在下圖Alternate Domain Names這裡改。

如果你原來將A記錄example.com指向你的IP，你還需要將此A記錄刪除，也不需要將db42vnq0gwaep.cloudfront.net再指向你的IP。

如何設定快取

在CloudFront中，有這樣的一個定義：Minimum TTL/Maximum TTL/Default TTL

在源站的http headers 也可以通過Cache-Control 來控制CDN在邊緣站點的快取生效時間，像下面這樣

Cache-Control: max-age=30, s-maxage=3600

實際上max-age是規定瀏覽器快取的，s-maxage是規定cloudfront快取的，那max-age、s-maxage、Minimum TTL/Maximum TTL/Default TTL如果綜合使用的呢？請看下圖。

Origin Configuration	Minimum TTL = 0 Seconds	Minimum TTL > 0 Seconds
增加 cache-control max-age	Cloudfront 快取取 cache-control max-age 和 Maximum TTL 兩者最小值 Browser caching 瀏覽器快取時間為cache-control max-age	Cloudfront caching 與max age/ Minimum TTL/Maximum TTL 三者有關： 1. Minimum TTL< max-age < maximum TTL 快取時間：control-control max age 2. max-age < minimum TTL 快取時間：minimum TTL 3. max-age >maximum TTL 快取時間：maximum TTL Browser caching: 快取時間為：control-control max age
不增加cache-control max age	CloudFront caching: 快取時間：Default TTL Browser caching: 依賴於瀏覽器快取策略	Cloudfront caching: 快取時間： Minimum TTL與Default TTL最大值； Browser caching: 依賴於瀏覽器快取策略
增加cache-control max-age和cache-control s-maxage	CloudFront caching: 快取時間： Cache-control s-maxage和Maximum TTL 之間最小值 Browser caching 快取時間：cache-control max-age	Cloudfront caching Minimum TTL/Maximum TTL/s-maxage取決於這三者 1. MinimumTTL< s-maxage < maximum TTL 快取時間：s-maxage 2. s-maxage < minimum TTL 快取時間： minimum TTL 3. s-maxage > maximum TTL 快取時間： maximum TTL Browser caching 快取時間： Cache-Control max-age
增加expires	Cloudfront caching 快取時間 Expires和maximum TTL 取最早者 Browser caching 快取時間：Expires	CloudFront caching 取決於minimum TTL and maximum TTL and the Expires三者 1. Minimum TTL < Expires < maximum TTL 快取時間：expires 2. Expires < minimum TTL 快取時間：minimum TTL 3. Expires > maximum TTL 快取時間：maximum TTL Browser caching 快取時間：expires
加Cache-Control: no-cache, no-store, and/or private	CloudFront and browsers respect the headers	Cloudfront caching 快取時間：minimum TTL Browser caching respect the headers