如何使用 CloudFront 為託管在 Amazon S3 上的靜態網站提供服務?

上次更新日期: 2021 年 1 月 5 日

我想在 Amazon Simple Storage Service (Amazon S3) 儲存貯體上託管靜態網站。然後,我想透過 Amazon CloudFront 分佈為我的網站提供服務。該如何進行?

簡短描述

若要為託管在 Amazon S3 上的靜態網站提供服務,您可以使用以下其中一種組態部署 CloudFront 分佈:

  • 使用 REST API 端點作為來源,其中存取會受限於原始存取身分 (OAI)
  • 使用網站端點作為來源,其中允許匿名 (公開) 存取
  • 使用網站端點作為來源,其中存取會受限於推薦者標題
  • 使用 AWS CloudFormation 將 REST API 端點部署為來源,其中存取會受限於 OAI 和指向 CloudFront 的自訂網域

如需有關兩種端點類型的詳細資訊,請參閱網站端點和 REST API 端點之間的主要區別

解決方案

遵循以下步驟,以使用您想要用作來源的 S3 端點類型設定 CloudFront 分佈:

使用 REST API 端點作為來源,其中存取會受限於 OAI

  1. 使用 Amazon S3 主控台建立儲存貯體上傳網站檔案
    注意:對於此組態,您無需啟用在儲存貯體上託管的靜態網站。此組態使用儲存貯體的 REST API 端點,而不是靜態網站託管功能中的網站端點。
  2. 建立 CloudFront 網站分佈。除了使用案例所需的分佈設定外,請輸入以下內容:
    對於 Origin Domain Name (原始網域名稱),選取您建立的儲存貯體。
    對於 Restrict Bucket Access (限制儲存貯體存取),選取 Yes (是)。
    對於 Origin Access Identity (原始存取身分),選取 Create a New Identity (建立新身分)。
    對於 Comment (評論),您可選擇保留預設值。或者,您可輸入 OAI 的自訂標籤。
    對於 Grant Read Permissions on Bucket (授予儲存貯體上的讀取許可),選取 Yes, Update Bucket Policy (是,更新儲存貯體政策)。
  3. 最佳實務是為您的網站使用 SSL (HTTPS)。要設定 SSL,對於 SSL Certificate (SSL 憑證),選取 Default CloudFront Certificate (預設 CloudFront 憑證) 以使用預設的 CloudFront DNS 名稱。或者,選取 Custom SSL Certificate (自訂 SSL 憑證) 以使用您自己的自訂網域。您可以選擇 Request or Import a Certificate with ACM (使用 ACM 請求或匯入憑證),請求新的憑證。
    重要:如果您為分佈輸入了備用網域名稱 (CNAME),則 CNAME 必須與您選取的 SSL 憑證相符。若要對使用 SSL 憑證的問題進行疑難排解,請參閱如何對在 CloudFront 分佈中使用自訂 SSL 憑證的問題進行疑難排解?
  4. 選擇 Create Distribution (建立分佈)。
  5. 更新網域的 DNS 記錄,以將您網站的 CNAME 指向您的 CloudFront 分佈的網域名稱。您可在 CloudFront 主控台中找到分佈的網域名稱,且其格式類似於 d1234abcd.cloudfront.net
  6. 等待您的 DNS 變更傳播及之前的 DNS 項目過期。
    注意:之前的 DNS 值過期所需的時間 取決於您託管區域上設定的 TTL 值,以及您的本機解析程式是否使用這些 TTL 值。

使用網站端點作為來源,其中允許匿名 (公開) 存取

此組態允許對您網站的儲存貯體進行公開讀取存取。如需詳細資訊,請參閱設定網站存取許可

注意:當您使用 Amazon S3 靜態網站端點時,CloudFront 和 Amazon S3 之間的連線只能透過 HTTP 進行。若要將 HTTPS 用於 CloudFront 和 Amazon S3 之間的連線,請為您的來源設定 S3 REST API 端點。

  1. 在儲存貯體中,使用 the Amazon S3 主控台建立儲存貯體及啟用靜態網站託管
  2. Static website hosting (靜態網站託管) 對話方塊中,複製您儲存貯體的端點,而無需前置 http://。格式類似於 DOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com。您需要此格式的端點以供後續步驟使用。
  3. 向您建立的儲存貯體新增允許公開讀取存取的儲存貯體政策
  4. 建立 CloudFront Web 分佈。除了您使用案例所需的分佈設定外,請輸入以下內容:
    對於 Origin Domain Name (原始網域名稱),請輸入您在步驟 2 中複製的端點。
  5. 最佳實務是為您的網站使用 SSL (HTTPS)。要設定 SSL,對於 SSL Certificate (SSL 憑證),選取 Default CloudFront Certificate (預設 CloudFront 憑證) 以使用預設的 CloudFront DNS 名稱。或者,選取 Custom SSL Certificate (自訂 SSL 憑證) 以使用您自己的自訂網域。您可以選擇 Request or Import a Certificate with ACM (使用 ACM 請求或匯入憑證),請求新的憑證。
    重要:如果您為分佈輸入了備用網域名稱 (CNAME),則 CNAME 必須與您選取的 SSL 憑證相符。若要對使用 SSL 憑證的問題進行疑難排解,請參閱如何對在 CloudFront 分佈中使用自訂 SSL 憑證的問題進行疑難排解?
  6. 選擇 Create Distribution (建立分佈)。
  7. 更新網域的 DNS 記錄,以將您網站的 CNAME 指向您的 CloudFront 分佈的網域名稱。您可在 CloudFront 主控台中找到分佈的網域名稱,且其格式類似於 d1234abcd.cloudfront.net
  8. 等待您的 DNS 變更傳播及之前的 DNS 項目過期。
    注意:之前的 DNS 值過期所需的時間 取決於您託管區域上設定的 TTL 值,以及您的本機解析程式是否使用這些 TTL 值。

使用網站端點作為來源,其中存取會受限於推薦者標題

此組態透過在分佈上設定自訂推薦者標題,然後使用儲存貯體政策僅允許存取具有自訂推薦者標題的請求來限制存取。請務必評估此設定允許的存取是否滿足您的使用案例的要求。

注意:當您使用 Amazon S3 靜態網站端點時,CloudFront 和 Amazon S3 之間的連線只能透過 HTTP 進行。若要將 HTTPS 用於 CloudFront 和 Amazon S3 之間的連線,請為您的來源設定 S3 REST API 端點。

  1. 在儲存貯體中,使用 the Amazon S3 主控台建立儲存貯體及啟用靜態網站託管
  2. Static website hosting (靜態網站託管) 對話方塊中,複製您儲存貯體的端點,而無需前置 http://。格式類似於 DOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com。您需要此格式的端點以供後續步驟使用。
  3. 建立 CloudFront Web 分佈。除了您使用案例所需的分佈設定外,請輸入以下內容:
    對於 Origin Domain Name (原始網域名稱),請輸入您在步驟 2 中複製的端點。
    對於 Origin Custom Headers (原始自訂標題),在 Header Name (標題名稱) 下,輸入 Referer (推薦者)。在 Value (值) 下,輸入您想要轉寄至來源 (S3 儲存貯體) 的自訂標題。若要限制對來源的存取,您可以輸入一個只有您知道的隨機或秘密值。
  4. 最佳實務是為您的網站使用 SSL (HTTPS)。要設定 SSL,對於 SSL Certificate (SSL 憑證),選取 Default CloudFront Certificate (預設 CloudFront 憑證) 以使用預設的 CloudFront DNS 名稱。或者,選取 Custom SSL Certificate (自訂 SSL 憑證) 以使用您自己的自訂網域。您可以選擇 Request or Import a Certificate with ACM (使用 ACM 請求或匯入憑證),請求新的憑證。
    重要:如果您為分佈輸入了備用網域名稱 (CNAME),則 CNAME 必須與您選取的 SSL 憑證相符。若要對使用 SSL 憑證的問題進行疑難排解,請參閱如何對在 CloudFront 分佈中使用自訂 SSL 憑證的問題進行疑難排解?
  5. 選擇 Create Distribution (建立分佈)。
  6. Amazon S3 主控台開啟網站的儲存貯體。然後,新增儲存貯體政策該政策允許 s3:GetObject,條件是請求包括您在步驟 3 中指定的自訂推薦者標題
    注意:若要封鎖對不包含自訂推薦者標題的任何請求存取,請在儲存貯體政策中使用明確拒絕陳述式。
  7. 更新您網域的 DNS 記錄,以將您網站的 CNAME 指向您的 CloudFront 分配的域名。您可在 CloudFront 主控台中找到分佈的網域名稱,且其格式類似於 d1234abcd.cloudfront.net
  8. 等待您的 DNS 變更傳播及之前的 DNS 項目過期。
    注意:之前的 DNS 值過期所需的時間 取決於您託管區域上設定的 TTL 值,以及您的本機解析程式是否使用這些 TTL 值。

使用 CloudFormation 將 REST API 端點部署為來源,其中存取會受限於 OAI 和指向 CloudFront 的自訂網域

藉助該解決方案,您的網站:

  • 使用 CloudFormation 部署
  • 託管於 Amazon S3
  • 由 CloudFront 分佈
  • 使用來自 AWS Certificate Manager (ACM) 的 SSL/TLS 憑證
  • 使用 Lambda@Edge 為每個伺服器回應新增安全標題

如需有關部署此解決方案的指示,請參閱 GitHub 網站上的 Amazon CloudFront 安全靜態網站