前一天我們在S3部署了一個小網站，今天我們來談談CDN，並用前一天製作的網站來當作今天實作的範例。

什麼是CDN？

CDN 是「內容傳遞網路」，它會將網站或應用程式的資源（HTML、CSS、JS、圖片等）複製到世界各地的 Edge Locations。使用者存取網站時，會自動從距離最近的節點取得內容，減少延遲。(比如說如果網站只放在 S3，並且區域在美國，台灣或亞洲用戶請求時會因為距離造成延遲）

• 優點：

1. 加快載入速度
2. 降低原伺服器負載
3. 提高網站可用性與穩定性
4. 支援 HTTPS 與流量統計

CloudFront與S3的關係

• S3 Bucket：存放靜態網站的內容（HTML、CSS、JS、圖片）。
• CloudFront：將 S3 內容快取到各地節點，使用者從 CloudFront 網址存取網站。
• 工作流程：

1. 使用者訪問CloudFront URL
2. CloudFront先檢查本地節點快取
3. 若無快取，從S3下載內容並快取
4. 使用者收到內容 → 速度比直接存取 S3 更快

實作步驟

一、建立CloudFront Distribution

首先進入AWS控制台 → CloudFront → Create Distribution。
- Distribution options：

1. Distribution name ：可以輸入一個名稱（方便辨識）
2. Distribution type：選 Single website
3. Custom domain：目前可跳過（沒有網域就先用CloudFront提供的URL）
   

- Origin設定：

1. 選擇S3 bucket作為來源。
2. 如果你的S3是公開的，可以直接用預設設定。
3. 如果是私有的，勾選「Allow private S3 bucket access to CloudFront」。
   

- Web Application Firewall (WAF)：
練習階段，我們先選「不要啟用安全保護」。之後上線再考慮加WAF。(如果沒有成本考量也可以加喔！）
按 Create Distribution，等待5分鐘左右建立完成。

二、部署後的設定

等待狀態：
Distribution會顯示「In Progress」，通常要等 5–15 分鐘才會變成「Deployed」。
- 設定 Default root object（預設根物件）：

1. 進入 CloudFront → 分佈 → 一般
2. 找到 Default root object → 輸入 index.html
3. 儲存 → 等待再次部署完成後打開「分佈網域名稱」的網址後即可連到我們昨天製作的網站
   

三、成果

這邊一樣展示截圖＋網址：
https://d3m3zyje4hy1cf.cloudfront.net/

如果你點的進網址的話，你會發現和昨天的比，其實速度上差不了多少，這是因為我的S3 bucket本身放在台北，且網站只是很小的靜態網站（HTML + CSS + JS），所以感覺上其實沒差，這邊就是先教大家方法，那什麼時候會用到CloudFront？

什麼情況CloudFront會比較有差？

1. 使用者分布很廣：
如果有美國、歐洲、東南亞的訪客，CloudFront會明顯比較快，因為它會就近從Edge Server提供內容。

2. 檔案很大：
例如：圖片相簿、影片、PDF 檔案，CloudFront會快取在Edge，重複下載的人就不用再跨區抓一次。

3. 要用HTTPS+自訂網域

• S3 自己的靜態網站托管網址 不支援 HTTPS。
• 如果我們要 https://www.mysite.com，幾乎都得靠CloudFront+ACM。