羅格鎮，是航海王(One Piece)中，哥爾・D・羅傑激發大家出海願望的起點。看了一下 鐵人賽觀賽區 的頁面，剛好很合適，就讓我們以這為起點開始練習吧。

<<觀察>>
不同於鐵人賽的首頁，觀賽區是一個近乎獨立的存在。

• 鐵人賽首頁: 在 iT邦幫忙
  
• 鐵人賽觀賽區: 在 AWS S3(順便幫自己打個廣告)
  

這讓我們有機會可以將其轉透過 CloudFront 作為 CDN 呈現。
<<進一步觀察>>
知己知彼，百戰不殆。為了能成功達成目標，我們需要先瞭(ㄊㄡ）解（ㄎㄢ＼）網站架構。
首先請出網站開發者的好朋友，「開發者模式」，然後載入一次頁面。將網站中需要的檔案找出來。

進一步細看，來自 S3 (ithome-ironman-watcher.s3.ap-northeast-1.amazonaws.com) 的檔案有 7筆。

/2023/index.html
/2023/static/js/main.b12d5b59.js
/2023/static/css/main.0630633b.css
/2023/ui-data.json (透過 JS 發出 XHR 取回 )
/2023/favicon.ico
/2023/manifest.json
/2023/logo192.png

仔細檢查這幾個檔案，發現:

• a. 這是 react.js (觀察 manifest.json 內容可知)
• b. 僅有 ui-data.json 有設置 'max-age=300s'，其它均沒有。
• c. react.js 這類 js framework，特點是重新部署時，會產生新的 js/css 檔名， 現有版本main.b12d5b59.js，下一個版本可能是 main.c36123xa.js，也就是檔名不會重複。
• d. 檔案均置放於 s3://ithome-ironman-watcher，可以直接將其視為 https://ithome-ironman-watcher.s3.ap-northeast-1.amazonaws.com 的來源網站。
• e. 雖然有 XHR 請求，但回應中沒有見到 CORS 的回應標頭

<<開始設置>>

1. 創建一組新的 CloudFront Distribution。(使用預設的我就不特別提)

- 將 Origin 設置為 ithome-ironman-watcher.s3.ap-northeast-1.amazonaws.com ; 
- Origin access: Public ;
- Viewer protocol policy: Redirect HTTP to HTTPS; 
- Redirect HTTP to HTTPS: GET, HEAD, OPTIONS

2. 設定 "Cache key and origin requests"，手動設定一組新的 Policy，選擇新創的 CachingPolicy

Path Pattern: Default(*)
TTL: min/max/default 均設置為 300。 
Header: 不轉發
QueryStrings: 不轉發
Cookies: 不轉發 (當源站是 S3 時，因為一般來說，S3 不會因為送入 Cookie 不同而有不同回應。)

3. (optional) 新增 CNAME & 選定 TLS 憑證。

CNAME: 2023ironman-watch.kgg23.com 

4. 開啟日誌(開日誌是好習慣)
5. 創建 Distribution 後，新增一組新的 behavior

Path Pattern 為 '/2023/static/*'，
CachePolicy: CachingOptimized

6. 設置 DNS 紀錄，將 2023ironman-watch.kgg23.com 對應 CNAME 到這個 CF Distribution(d15kpj4cnphd3.cloudfront.net)
7. 等待各項設置生效!

<<驗證>>

1. 我們接連連上兩個網址，看是否都能正常運作。

• https://d15kpj4cnphd3.cloudfront.net/2023/index.html (不使用自訂域名)
• https://2023ironman-watch.kgg23.com/2023/index.html (使用自訂域名)

2. 一樣開啟 Developer Tools，看載入的資料有無差異，Developer Console 也沒有發現錯誤。
   
3. Wow，看起來真不錯!
   相關改善有:

• FCP(First Contentful Paint)[1] 從 1.5秒 --> 0.9秒
• 載入請求所需的流量從 1.2M --> 431 KB
• $$ 的節省。S3 定價資訊 v.s. CF 定價資訊。單價相同但流量不同。

S3 在 ap-northeast-1 的流量費用是 $0.114 per GB
CF 在 ap-northeast-1 的流量費用是 $0.114 per GB 
單價不變，但流量節省 (1.2*1,024 KB v.s. 432 KB)，流量費用 降低為 35.2% (或26%)[2]

<<結論>>
在這個例子中，相信大家 CloudFront 帶來了更快的網頁呈現 + 更划算的價格，好服務，不用嗎?
希望從這裡開始，大家多多利用 CDN，多多使用 CloudFront

更新，鐵人賽觀賽區「不是」由 iTHome 提供的功能，所以不需要喊話主辦單位

## 喊話主辦單位: 要不要參考一下? 等你呦

[1] FCP - https://web.dev/fcp/
[2] 432/1200 = 35.2%，實際上還可以扣除 google fonts + google tag manager 相關流量，僅計算 s3 對外 v.s. 該 distribution 對外。
google fonts css: 66.8 KB
google tag manager: 85.3KB，兩者合計約 152 KB
(432- 152) / (1.2*1024 - 152) = 280 / 1384 = 26%

因為還是 iT邦幫忙的新手，不能直接在留言「回應」，將相關回覆更新在這

能夠釣出大神，實在太好啦!

感謝大神與我們分享您的相關作法 & 這頁面(觀賽區) 的由來。

對 Java 有興趣的朋友，也歡迎一起來看這次的短片:
《Java 幼幼班》