我該如何最佳化 CloudFront，以供單頁應用程式使用？

2 分的閱讀內容

我想設定並最佳化 CloudFront，使我的單頁應用程式 (SPA) 能以低延遲且合適的快取策略提供服務。

解決方法

**注意：**在以下解決方法中，範例的原始伺服器為 Amazon Simple Storage (Amazon S3) 儲存貯體。

設定檢視者與 CloudFront 間的安全通訊

請執行下列動作：

要求檢視者與 CloudFront 之間的檢視者通訊使用 HTTPS。將 CloudFront 設定為自動將 HTTP 請求重新導向至 HTTPS，或拒絕 HTTP 請求。
若要與您的網域名稱建立安全連線，請取得 SSL/TLS 憑證，其可從 AWS Certificate Manager (ACM) 或第三方取得。
選擇安全政策，並搭配您的檢視者連線所支援的加密套件與通訊協定。

限制對 AWS 原始來源的存取權

如果您使用 Amazon S3 作為 AWS 原始來源，請限制對 S3 儲存貯體的公開存取權。

注意： 使用原始存取控制 (OAC) 設定以保護您的原始來源是最佳實務。

若要限制其他原始來源的存取權，請參閱限制對 AWS 原始來源的存取權。

解決 SPA 用戶端路由問題

當您導覽至 index.html 之外的路由 (例如 https://example.com/about-us)，然後重新整理頁面時，會出現 403 或 404 HTTP 狀態代碼錯誤。S3 儲存貯體中沒有 /about-us 的路徑或首碼。

**注意：**當 OAC 的儲存貯體政策未包含 s3:ListBucket 權限時，Amazon S3 會回傳 403 錯誤。

當 Amazon S3 回傳 403 或 404 錯誤時，CloudFront 會提供 index.html 檔案作為 SPA 的有效路由。若要解決這些問題，請設定錯誤回應以處理 403 與 404 錯誤。

請完成下列步驟：

開啟 CloudFront console (CloudFront 主控台)。
在導覽窗格中，選擇 Distributions (發佈項目)，然後選取您的發佈項目。
選擇 Error pages (錯誤頁面) 索引標籤。
選擇 Create custom error response (建立自訂錯誤回應)。
在 HTTP error code (HTTP 錯誤代碼)，選取 403: Forbidden 或 404: Not Found。
在 Error caching minimum TTL (錯誤快取最小 TTL)，您可以輸入 0 或您偏好的值。
在 Customize error response (自訂錯誤回應) 中，選擇 Yes (是)。
在 Response page path (回應頁面路徑)，輸入 /index.html。
在 HTTP Response code (HTTP 回應代碼)，選擇 200: OK。
選擇 Create custom error response (建立自訂錯誤回應)。
選擇 General (一般) 索引標籤，然後等待部署完成。

實作快取策略

為了在 SPA 的內容新鮮度與傳遞速度之間取得平衡，請執行以下動作：

對於不可變的資產 (例如 JavaScript 與 CSS 檔案)，實作長期快取持續時間。例如，若要將資源快取 1 年，請在 S3 物件中繼資料中使用 Cache-Control 標頭，其值為 public, max-age = 31536000。
對於 index.html 檔案，請使用較短的存留時間 (TTL)，例如 public, max-age = 60，以快取檔案 60 秒。將短 TTL 搭配 stale-while-revalidate = 2592000 使用，使 CloudFront 能在背景重新驗證期間，最多提供過期的快取版本達 30 天。
使用適當的 CloudFront 快取政策，以同時容納經常更新內容的短 TTL 及靜態資產的長 TTL。例如，您可以使用 Managed-CachingOptimized 政策。

如需更多資訊，請參閱在 CloudFront 與 S3 上以分層 TTL 託管單頁應用程式 (SPA)。

選擇適合的 CloudFront 價格類別

為了降低內容傳遞成本，請選擇符合您使用者所在位置的價格類別。若要判斷多數使用者的所在位置，請查看您的 CloudFront 使用報告。如果您的使用者主要位於單一 AWS 區域，請選擇價格類別 200 或 100。不過，如果效能較為重要，請保留預設價格類別「全部」，以便向全球使用者傳遞您的內容。如需各價格類別所涵蓋區域的資訊，請參閱價格類別。