AWS CloudFront 教學：7 步驟完成 CDN 設定與優化

AWS CloudFront 教學：7 步驟完成 CDN 設定與優化

AWS CloudFront 是 Amazon Web Services 的 CDN 服務，與 AWS 生態系深度整合，是企業級應用的首選。本文將從基礎概念開始，帶你完成 CloudFront 的完整設定，包含 S3 靜態網站、EC2/ALB 動態應用的整合，以及效能與成本優化的最佳實踐。

需要快速完成 AWS 架構設計？預約架構諮詢，讓我們的 AWS 認證架構師協助你。

CloudFront 簡介

什麼是 AWS CloudFront？

AWS CloudFront 是 Amazon 的全球內容傳遞網路（CDN），在全球 47 個國家擁有超過 450 個邊緣節點（Edge Locations）和 13 個區域邊緣快取（Regional Edge Caches）。

想了解更多 CDN 的基礎概念和運作原理，可以參考我們的完整指南。

CloudFront 的主要特色：

CloudFront 與其他 CDN 的差異

想了解更多 CDN 廠商的完整比較，可以參考我們的比較文章。

描述：AWS CloudFront 全球邊緣節點分布圖，以世界地圖為底，標示 450+ 個 Edge Location 和 13 個 Regional Edge Cache 的位置 構圖：全幅橫向、AWS 深藍色底、橙色節點標記 -->

CloudFront 核心概念

在開始設定前，你需要了解 CloudFront 的四個核心概念：

Distribution（分發）

Distribution 是 CloudFront 的基本設定單位，包含了所有關於 CDN 的設定，如 Origin、快取行為、SSL 憑證等。

類型：

• Web Distribution：用於網站和 API（最常用）
• RTMP Distribution：用於串流媒體（已停止新建）

Origin（來源）

Origin 是你的內容存放位置，CloudFront 會從 Origin 取得內容並快取。

常見 Origin 類型：

• S3 Bucket（靜態內容）
• ALB/ELB（動態內容）
• EC2 Instance（直接連線）
• 自訂 Origin（任何 HTTP/HTTPS 伺服器）
• MediaStore / MediaPackage（串流內容）

Edge Location（邊緣節點）

Edge Location 是快取內容的實際位置，分布在全球各地。使用者的請求會被路由到最近的 Edge Location。

亞太區主要節點：

• 台灣：台北
• 日本：東京、大阪
• 韓國：首爾
• 香港
• 新加坡
• 澳洲：雪梨、墨爾本

Cache Behavior（快取行為）

Cache Behavior 決定 CloudFront 如何處理不同路徑的請求。

可設定項目：

• URL 路徑模式（Path Pattern）
• 允許的 HTTP 方法
• 快取策略（Cache Policy）
• Origin Request Policy
• 是否壓縮
• Lambda@Edge 觸發器

描述：CloudFront 架構圖，顯示使用者請求流程：使用者 → Edge Location → Regional Edge Cache → Origin（S3/ALB/EC2），並標示各層的功能 構圖：由上至下流程圖、四層架構、箭頭標示資料流向 -->

建立第一個 Distribution

Step 1：進入 CloudFront Console

1. 登入 AWS Console
2. 搜尋「CloudFront」或在服務列表中找到
3. 點擊「Create Distribution」

Step 2：設定 Origin

Origin Domain： 輸入你的來源網域

• S3：選擇 S3 bucket（會自動顯示）
• ALB/EC2：輸入 DNS 名稱或 IP

Origin Path： 選填，指定特定路徑（如 /public）

Origin Access：

• Public：Origin 是公開可存取
• Origin Access Control (OAC)：限制只有 CloudFront 可存取（建議用於 S3）
• Origin Access Identity (OAI)：舊版設定，建議使用 OAC

Protocol：

• HTTPS Only（建議）
• Match Viewer
• HTTP Only（不建議）

Step 3：設定 Default Cache Behavior

Path Pattern： 預設為 *（匹配所有請求）

Compress Objects Automatically： 建議開啟

Viewer Protocol Policy：

• HTTP and HTTPS
• Redirect HTTP to HTTPS（建議）
• HTTPS Only

Allowed HTTP Methods：

• GET, HEAD（靜態內容）
• GET, HEAD, OPTIONS
• GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE（API）

Cache Key and Origin Requests：

• Cache Policy：選擇或建立快取策略
• Origin Request Policy：選擇需要傳送到 Origin 的標頭

Step 4：設定 Distribution Settings

Price Class： 決定使用哪些區域的節點

• Use All Edge Locations（最佳效能，最高成本）
• Use North America, Europe, Asia, Middle East, and Africa
• Use Only North America and Europe（最低成本）

AWS WAF： 可選擇是否整合 WAF

Alternate Domain Names (CNAMEs)： 輸入你的自訂網域

Custom SSL Certificate： 選擇 ACM 憑證

Default Root Object： 如 index.html

Step 5：建立並等待部署

點擊「Create Distribution」後，需等待 5-15 分鐘完成部署。狀態會從「In Progress」變為「Deployed」。

部署完成後，你會獲得一個 CloudFront 網域名稱（如 d1234567890.cloudfront.net），可以用來測試。

整合 S3 靜態網站

S3 + CloudFront 是最常見的靜態網站架構，適合部落格、企業官網、SPA 應用程式。

S3 Bucket 設定

1. 建立 Bucket

• 名稱建議與網域相同（如 www.example.com）
• 區域選擇接近主要使用者的地區

2. 上傳檔案

• 上傳 HTML、CSS、JS、圖片等靜態檔案

3. 不需要開啟 Static Website Hosting

• 使用 OAC 時，不需要也不建議開啟公開存取

Origin Access Control（OAC）設定

OAC 是 AWS 推薦的新方式，取代舊的 OAI：

1. 建立 OAC

• CloudFront Console → Origin Access → Create Control Setting
• 輸入名稱，其他使用預設值

2. 在 Distribution 中選擇 OAC

• Origin Access → Origin Access Control Settings
• 選擇剛建立的 OAC

3. 更新 S3 Bucket Policy CloudFront 會提供一個 Policy，複製並貼到 S3 Bucket Policy：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::123456789012:distribution/EDFDVBD6EXAMPLE"
                }
            }
        }
    ]
}

SPA 應用程式設定

對於 React、Vue、Angular 等 SPA，需要額外設定錯誤頁面處理：

Custom Error Response：

• HTTP Error Code：403
• Response Page Path：/index.html
• HTTP Response Code：200

這樣當使用者直接存取 /about 這類路徑時，CloudFront 會回傳 index.html，讓前端路由處理。

整合 EC2 / ALB

對於動態內容，CloudFront 通常與 ALB（Application Load Balancer）整合。

ALB 作為 Origin

1. 設定 Origin Domain

• 輸入 ALB 的 DNS 名稱（如 my-alb-123456.us-east-1.elb.amazonaws.com）

2. Protocol

• 建議使用 HTTPS Only
• 確保 ALB 有設定 SSL 憑證

3. Origin Shield

• 可選擇開啟，減少對 Origin 的請求
• 建議選擇與 ALB 相同或最近的區域

動態內容快取策略

對於 API 或動態內容，需要特別設定快取行為：

不快取的路徑（如 /api/*）：

• Cache Policy：CachingDisabled
• Origin Request Policy：AllViewerExceptHostHeader

部分快取的路徑（如 /products/*）：

• Cache Policy：自訂，設定較短的 TTL
• 可根據 Query String 或 Cookie 區分快取

健康檢查設定

CloudFront 會自動監控 Origin 健康狀態，但你可以調整：

Origin Connection Attempts： 預設 3 次

Origin Connection Timeout： 預設 10 秒

Origin Read Timeout： 預設 30 秒

Origin Keepalive Timeout： 預設 5 秒

架構設計需要第二意見？預約架構諮詢，我們的 AWS 認證架構師將提供專業建議。

SSL 憑證設定

使用 ACM 免費憑證

AWS Certificate Manager（ACM）提供免費的 SSL 憑證：

重要： CloudFront 只能使用在 us-east-1（N. Virginia） 區域的 ACM 憑證。

申請步驟：

1. 切換到 us-east-1 區域
2. 進入 ACM Console → Request Certificate
3. 選擇 Public Certificate
4. 輸入網域名稱（如 example.com, *.example.com）
5. 選擇驗證方式（建議 DNS Validation）
6. 在 DNS 新增驗證記錄
7. 等待憑證狀態變為 Issued

自訂網域設定

1. 在 Distribution 新增 Alternate Domain Names (CNAMEs)

• 輸入你的網域（如 www.example.com）
• 可以輸入多個網域

2. 選擇 SSL Certificate

• Custom SSL Certificate
• 選擇剛申請的 ACM 憑證

3. 在 DNS 新增 CNAME 記錄

• 名稱：www
• 值：d1234567890.cloudfront.net（你的 CloudFront 網域）

HTTPS 強制導向

設定 Viewer Protocol Policy：

• Redirect HTTP to HTTPS（建議）

這樣所有 HTTP 請求都會自動 301 導向到 HTTPS。

描述：CloudFront SSL 設定介面截圖，標示 Alternate Domain Names、SSL Certificate 選擇和 Viewer Protocol Policy 設定位置 構圖：後台截圖、紅框標註重點設定區域 -->

快取優化策略

Cache Policy 設定

AWS 提供預設的 Cache Policy，也可以自訂：

預設 Policy：

自訂 Policy 設定項目：

• Minimum TTL：最短快取時間
• Maximum TTL：最長快取時間
• Default TTL：Origin 未指定時的預設值
• Cache Key Settings：
  • Headers：哪些 Header 要納入快取 Key
  • Cookies：哪些 Cookie 要納入快取 Key
  • Query Strings：哪些參數要納入快取 Key

TTL 設定原則

快取失效（Invalidation）

當需要強制更新快取時：

1. Console 操作

• CloudFront → Distribution → Invalidations → Create Invalidation
• 輸入路徑（如 /images/* 或 /*）

2. CLI 操作

aws cloudfront create-invalidation \
    --distribution-id E1234567890 \
    --paths "/*"

3. 費用注意

• 每月前 1,000 條路徑免費
• 超過後每條路徑 $0.005

建議： 與其頻繁 Invalidation，不如善用 Cache Busting（在檔名加版本號）。

安全性設定

AWS Shield 整合

CloudFront 自動包含 AWS Shield Standard，提供：

• Layer 3/4 DDoS 防護
• 無額外費用

Shield Advanced（付費）提供：

• Layer 7 DDoS 防護
• 24/7 DDoS Response Team
• 費用保護（攻擊造成的額外費用補償）
• 費用：$3,000/月 起

WAF 整合

AWS WAF 可以與 CloudFront 整合，提供：

• SQL Injection 防護
• XSS 防護
• Rate Limiting
• IP 黑白名單
• 地理封鎖

設定方式：

1. 在 WAF Console 建立 Web ACL
2. 區域選擇 CloudFront（Global）
3. 新增規則（可使用 AWS Managed Rules）
4. 在 CloudFront Distribution 中關聯 Web ACL

想了解更多 CDN 與 DDoS 防護，可以參考我們的專文。

地理限制

CloudFront 可以根據使用者的地理位置允許或封鎖存取：

設定位置： Distribution → Security → Restrictions → Geo Restriction

選項：

• Allow list：只允許特定國家
• Block list：封鎖特定國家

簽署 URL / Cookie

對於需要存取控制的內容（如付費內容），可以使用簽署：

Signed URLs： 適合單一檔案 Signed Cookies： 適合多個檔案或串流

成本優化

Price Class 選擇

不同 Price Class 的費用差異顯著：

建議： 如果主要使用者在亞洲，選擇 Price Class 200 可以在效能和成本間取得平衡。

壓縮設定

開啟自動壓縮可以減少傳輸量，降低費用：

設定位置： Cache Behavior → Compress Objects Automatically → Yes

支援的壓縮格式：

• Gzip
• Brotli（效率更高）

節省效果： 通常可減少 60-80% 的傳輸量

更多 CDN 優化技巧，請參考 CDN 設定優化教學。

監控與預算警示

CloudWatch Metrics：

• Requests：請求數
• BytesDownloaded：傳輸量
• 4xxErrorRate / 5xxErrorRate：錯誤率

設定 Budget Alert：

1. AWS Budgets → Create Budget
2. 設定每月預算金額
3. 設定警示閾值（如 80%、100%）
4. 設定通知方式（Email、SNS）

想了解更多 CDN 費用與省錢技巧，可以參考我們的費用指南。

常見問題排解

403 Forbidden 錯誤

可能原因：

1. S3 Bucket Policy 未正確設定
2. OAC/OAI 設定錯誤
3. S3 Block Public Access 設定
4. 檔案不存在

解決步驟：

1. 確認 Bucket Policy 包含 CloudFront 的存取權限
2. 確認 OAC 設定正確
3. 確認檔案路徑正確

504 Gateway Timeout

可能原因：

1. Origin 回應過慢
2. Origin 健康檢查失敗
3. Origin Timeout 設定過短

解決步驟：

1. 檢查 Origin 是否正常運作
2. 增加 Origin Read Timeout（最大 60 秒）
3. 優化 Origin 效能

快取未更新

可能原因：

1. 快取尚未過期
2. 瀏覽器快取
3. TTL 設定過長

解決步驟：

1. 建立 Invalidation 清除快取
2. 清除瀏覽器快取或使用無痕模式測試
3. 調整 TTL 設定
4. 使用 Cache Busting（在 URL 加版本參數）

效能調校

檢查項目：

1. Cache Hit Ratio：目標 > 80%
2. Origin Latency：檢查 Origin 回應時間
3. Edge Location：確認使用者連到正確的節點

優化方向：

1. 增加快取涵蓋範圍
2. 使用 Origin Shield 減少 Origin 負載
3. 考慮使用 Lambda@Edge 做邊緣運算

進階功能

Lambda@Edge

在邊緣節點執行自訂程式碼：

使用場景：

• A/B Testing
• 動態內容產生
• URL 重寫
• 認證驗證
• 標頭修改

觸發點：

• Viewer Request：使用者請求到達 Edge
• Viewer Response：回應傳送給使用者前
• Origin Request：請求發送到 Origin 前
• Origin Response：Origin 回應到達 Edge 後

CloudFront Functions

比 Lambda@Edge 更輕量快速的邊緣運算：

限制：

• 只能用於 Viewer Request/Response
• 最大執行時間 1ms
• 最大記憶體 2MB

適合場景：

• URL 重寫
• 標頭修改
• 簡單的請求驗證

Origin Shield

在 Origin 前面增加一層快取：

好處：

• 減少 Origin 負載
• 提升快取命中率
• 降低 Origin 成本

費用： 依據請求數計費

實際案例：電商網站架構

一個典型的電商網站 CloudFront 架構：

架構：

使用者 → CloudFront → ALB → EC2 Auto Scaling Group
                    ↘ S3（靜態資源）

Cache Behavior 設定：

安全設定：

• WAF 啟用 AWS Managed Rules
• Rate Limiting 防止暴力攻擊
• 地理限制只允許服務區域

結論：打造高效能 AWS 架構

完成本文的設定後，你的 CloudFront 應該已經：

• Distribution 正確設定並部署完成
• S3 或 ALB Origin 連接正常
• SSL 憑證設定完成
• 快取策略優化
• 基礎安全防護開啟

下一步建議：

1. 監控 CloudWatch Metrics，確認效能指標
2. 設定 Budget Alert，控制成本
3. 定期檢視存取日誌，優化快取策略
4. 考慮是否需要 Lambda@Edge 做進階處理

好的架構能節省數倍的營運成本。預約架構諮詢，讓我們一起檢視你的雲端架構。CloudSwap 團隊擁有多位 AWS 認證解決方案架構師，已協助超過 100 家企業優化 AWS 架構。

常見問題 FAQ

CloudFront 和 S3 Transfer Acceleration 有什麼不同？

CloudFront 是完整的 CDN 服務，提供快取、安全防護等功能。S3 Transfer Acceleration 只是加速上傳到 S3 的功能。如果你需要加速網站內容傳遞，應該使用 CloudFront。

CloudFront 的免費額度有多少？

AWS Free Tier 包含每月 1TB 傳輸量和 10,000,000 次 HTTP/HTTPS 請求，期限為 12 個月。超過後按用量計費，亞太區約 $0.12/GB。

可以同時使用 CloudFront 和 Cloudflare 嗎？

技術上可以，但通常不建議。兩層 CDN 會增加複雜度和延遲。如果你已經在使用 AWS，CloudFront 是更好的選擇；如果主要使用其他雲端或需要免費方案，Cloudflare 更適合。

CloudFront 支援 HTTP/3 嗎？

是的，CloudFront 支援 HTTP/3（QUIC）。可以在 Distribution 設定中啟用，對於行動網路使用者可以提升效能。

如何將現有網站遷移到 CloudFront？

建議步驟：(1) 先建立 CloudFront Distribution 指向現有 Origin；(2) 使用 CloudFront 網域測試；(3) 確認正常後，再將 DNS 指向 CloudFront。整個過程可以做到零停機遷移。