2025 iThome 鐵人賽

DAY 6

Build on AWS

從一個網站的誕生，看懂 AWS 架構與自動化的全流程！系列第 6 篇

Day6 網站流量總管：S3 靜態託管 x CloudFront

17th鐵人賽 ducky aws aws cloudfron aws s3

bb25379

2025-09-20 08:39:51

69 瀏覽

分享至

一、前言

網站如果只放在單一 S3 Bucket，可能在跨區存取時會遇到延遲、缺乏 CDN 快取，且沒有 HTTPS 預設支援。

透過 CloudFront 搭配 S3，我們能實現全球加速、安全傳輸，以及靜態網站的高可用部署，這個 Lab 主要解決以下問題：

(1) 靜態網站缺乏全球加速，跨國用戶體驗差。
(2) S3 雖可存放內容，但直接公開 Bucket URL 缺乏專業域名與 HTTPS。
(3) 缺乏內容快取與 DDoS 防護。

在整體 Serverless 架構中，S3 作為靜態內容來源，CloudFront 則是網站流量的「總管」，負責加速、快取、安全傳遞，並與前一日的 Route 53 + ACM 串接，完成安全網域對外服務。

二、需要使用到的服務

Amazon Route 53：負責網域流量導向 CloudFront，讓用戶透過專屬網域存取網站。
Amazon CloudFront：作為 CDN，提供全球節點快取、HTTPS、存取控制。
AWS Certificate Manager (ACM)：提供 SSL 憑證，讓 CloudFront 可啟用 HTTPS。
Amazon S3：存放靜態網站檔案（HTML、CSS、JS、圖片）。

三、架構/概念圖

四、技術重點

最佳實務（Best Practices）：

(1) 啟用 CloudFront Access Logs，方便日後流量分析與安全稽核。
(2) 搭配 WAF（Web Application Firewall）強化防護。
(3) 靜態檔案盡量版本化（e.g., app.v1.js），避免快取更新問題。
(4) 使用 Lambda@Edge 或 CloudFront Functions，處理簡單邏輯（如自動轉址、多語系）。

五、Lab流程

1️⃣ 前置作業

準備好靜態網站檔案（index.html、error.html）。
index.html

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>My Website Home Page</title>
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>Now hosted on Amazon S3!</p>
</body>
</html>

errer.html

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>錯誤：頁面未找到</title>
</head>
<body>
    <h1>404 - 頁面未找到</h1>
    <p>抱歉！您所請求的頁面不存在。</p>
    <p>請確認網址是否正確，或返回首頁。</p>
</body>
</html>

2️⃣ 主要配置

1. 建立一個 S3 Bucket

進入「S3」服務頁面。
建立S3儲存桶。
儲存桶名稱為「世界上的唯一值」。

2. 上傳靜態網站檔案（index.html、error.html）

在S3儲存桶中點選「上傳」。
將首頁、錯誤頁面的html檔案上傳到S3內。

關閉 Public Access，改用 OAC（Origin Access Control）存取。

3. 建立一個 CloudFront

進入「Cloudfrnot」服務頁面。
點選「建立分佈」。
創建一個屬於自己的頁面前端轉發器（CDN），命名並創建。（※該頁面沒有中文）
選用S3作為Origin（源站），這邊只能先設定一個源站。
找到你的S3 bucket。
Origin 設定為 S3 Bucket（使用 OAC 授權）。
啟用WAF。
選擇ACM證書。
確認創建。

4. 設定首頁（調整根物件）

進入CloudFront內，並在「一般」分頁中點選「編輯」。
調整根物件為「index.html」。
完成畫面。

3️⃣ 測試驗證

使用瀏覽器輸入專屬網域（如 www.example.com），檢查是否成功跳轉 HTTPS。
驗證 CloudFront 快取：第一次載入後是沒有快取的狀態 x-cache**:**Miss from cloudfront，再多刷新幾次，看是否有 X-cache: Hit from CloudFront 標頭。
測試 OAC：嘗試直接存取 S3 URL，應會被拒絕。
- 使用S3的連結，被拒絕：
  - 測試網址在哪裡？
- 使用CloudFront網域名稱，成功訪問：