跳转至

CloudFront

CloudFront 與 S3 的連接

CloudFront 是 AWS 的 CDN（內容分發網路），可以幫助加速存取 S3 的內容。當 CloudFront 設置為 S3 的前端時，相當於在 S3 和使用者之間建立了一個快取層，讓使用者可以更快地存取內容。

  • 你可以設定 CloudFront 允許特定請求來存取 S3，避免 S3 直接暴露在公網上，提高安全性。

  • 它確實像是一個「HTTPS 到 S3 的通道」，但其實 CloudFront 是一個全球分發網路，請求的內容可以來自 S3，也可以來自其他源（例如 API Gateway 或 EC2）。

CloudFront CDN 快取策略

CloudFront 提供不同的快取行為，例如：

  • 快取靜態內容（Cache Static Content） 📸

    • 圖片、CSS、JS、影片等，這些可以長時間快取，減少 S3 請求次數。

  • 動態內容優化（Optimize Dynamic Content）

    • API 請求、登入頁面、即時數據等不適合長期快取，但 CloudFront 可幫助壓縮與優化。

  • 設定快取過期時間（TTL, Time-to-Live）

    • 你可以設定某些內容快取多久，例如 Cache-Control: max-age=3600 代表快取 1 小時。

sample

如果你的 S3 裡存放一張圖片 logo.png，當使用者請求時：

  • CloudFront 先檢查最近的 CDN 節點是否有快取該圖片。

  • 如果有（快取命中，Cache Hit），直接提供，速度超快。

  • 如果沒有（快取未命中，Cache Miss），CloudFront 會向 S3 請求圖片，然後快取起來，之後其他使用者就可以直接從 CDN 取得內容。

CloudFront 為什麼提供 HTTPS？

CloudFront 預設支援 HTTPS，因為：

  • 安全性：HTTPS（超文本傳輸安全協議）可以加密數據，防止竊聽與中間人攻擊。

  • 信任度：現代瀏覽器對 HTTP 會標記為「不安全」，特別是輸入密碼或信用卡資訊時。

  • 性能優化：CloudFront 支援 HTTP/2，這在 HTTPS 連線下可以加快請求速度。

Frontend（CloudFront）透過 API Gateway 與 Lambda 交互？

前端（Frontend）透過 Axios 發送 HTTP 請求到 API Gateway，然後 API Gateway 會觸發你的 Lambda 執行 Spring Boot 程式，回應數據給前端。

  • 用戶開啟前端（CloudFront 伺服的 React/Vue/Angular 頁面）

    • Axios 發送請求

    • 例如：axios.get("https://your-api-id.execute-api.aws-region.amazonaws.com/prod/data")

  • 這個請求會發送到 API Gateway

  • API Gateway 觸發 Lambda

  • API Gateway 會將請求轉發給 Lambda，執行 Spring Boot 的後端邏輯

    • Lambda 執行 Spring Boot

    • Spring Boot 會處理請求（例如查詢資料庫），並返回 JSON 給 API Gateway

  • API Gateway 將回應發送給前端

  • 前端 Axios 取得回應並更新 UI

完成了一次前後端交互

CloudFront + API Gateway 是如何搭配的？

CloudFront 主要用來加速靜態資源（HTML、CSS、JS、圖片等），但它不直接處理 API 請求。

  • 前端請求靜態資源 → CloudFront（快取 HTML、JS、CSS）

  • 前端發送 API 請求 → API Gateway（轉發給 Lambda 執行 Spring Boot）

但如果你想要 CloudFront 也代理 API Gateway，可以這樣做：

  • CloudFront 設置 API Gateway 作為「自訂來源（Custom Origin）」，這樣 API Gateway 的請求也可以透過 CloudFront 處理，提升安全性和速度。

  • 這樣可以讓 API 請求與靜態資源請求都走 CloudFront 的 HTTPS 加速。