昨天我們提到，當內容更新後，如果看到的內容還是一樣，需要清除 CDN 中的快取，總覺得太搞剛了。
那麼，我們可以怎麼做呢?

在 CDN 服務中，有一種東西，叫做 Cache Key.
大家常聽過的 CDN 服務業者，都會對應的介紹。因為介紹太多，我們直接用白話文解釋。

Cache Key，就是讓 CDN 服務可以用來區分同一 URL，可以是不同的資料的東西。

以 CloudFront 做為例子，除了 URL(檔名) 外，可以作為 CacheKey 的有三類，可單獨也可以組合使用。

• HTTP Headers
• Query Strings
• Cookies
  為了避免一下跳太難，我們就拿 Query String 做為例子。先知道怎麼做，之後慢慢來體會其中的原理。

動手做

測試目標: http://dwnhikcdqi4zf.cloudfront.net/static_files/images/banner.png

• 舊圖片:
• 新圖片:
• Step 1: 登入 CloudFront Console，我們創建一組新的 CachePolcy，取名你喜歡的名字，比方可以就叫做 'Forward-QueryStrings'
  
• Step 2: 編輯您的 CloudFront Distribution，建立一組新的 Behavior，對應的路徑為 '/static_files/*'
• Step 3: 比照路徑為 'Default(*)' 的 Behaviors，但在設置 CachePolicy 時，不要選'CachingOptimized'，改選為剛創建的 'Forward-QueryStrings'
  
• Step 4: 再次失效(清除)快取，Object Path 可以一樣維持 '/*'。
• Step 5: 測試網址，在瀏覽器中載入

http://dwnhikcdqi4zf.cloudfront.net/static_files/images/banner.png
發現還是看到舊的圖片

• Step 6: 更換網站中的圖片，並再一次輸入測試網址。 ==> 咦? 怎麼還是舊的圖?
• Step 7: 別急，這時候可以在測試網址後帶個 Querystring，比方說 v=20230908。

http://dwnhikcdqi4zf.cloudfront.net/static_files/images/banner.png?v=20230908
這時就出現新圖片囉

那麼，如果要首頁更新看到新內容的話，要怎麼做呢?
這邊我用文字說明，大家可以自己動手做看看。

• 練習步驟1: 將 'Default(*)'這組 Behavior 的 CachePolicy 改為 'CachingDisabled'
• 練習步驟2: 修改 index.html 的內容，讓引入圖片的部分，也多帶一個 QueyrString
  修改前的 snippet

<img src="static_files/images/banner.png" width="720" >

修改後的 snippet

<img src="static_files/images/banner.png?v=20230908" width="720" >

修改後，就看到圖片也在網頁中成功地更新。