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

上次更新日期:2021 年 9 月 14 日

我想在 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 Web 分配。除了使用案例所需的分配設定之外,請輸入下列項目:
    對於 Origin domain (原始網域),請選取您建立的儲存貯體。
    對於 S3 bucket access (S3 儲存貯體存取),請選取 Yes use OAI (bucket can restrict access to only CloudFront) (是,使用 OAI (儲存貯體可以限制為僅存取 CloudFront))。
    對於 Origin access identity (原始存取身分),請選取 Create new OAI (建立新的 OAI)。然後,輸入 OAI 名稱並選擇 Create (建立)。
    對於 Bucket policy (儲存貯體政策),請選取 Yes, update the bucket policy (是,更新儲存貯體政策)。
  3. 最佳實務是為您的網站使用 SSL (HTTPS)。若要搭配 HTTPS 使用自訂網域,請選取 Custom SSL certificate (自訂 SSL 憑證)。 您可以選擇 Request certificate (請求憑證) 以請求新憑證。如果您沒有使用自訂網域,您仍然可以使用 HTTPS 搭配 cloudfront.net 網域名稱來進行分配。
    重要:如果您為分配輸入替代網域名稱 (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. 使用 Amazon S3 主控台建立儲存貯體並啟用託管的靜態網站 (於儲存貯體上)。
  2. Static website hosting (靜態網站託管) 對話方塊中,複製沒有前置 http:// 的儲存貯體 Endpoint (端點)。格式類似於 DOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com。您需要此格式的端點以供在稍後的步驟使用。
  3. 新增允許公用讀取存取權的儲存貯體政策,該存取權是針對您建立的儲存貯體。
    注意:對於此組態,必須停用 S3 儲存貯體的封鎖公用存取設定。如果您的使用案例需要啟用封鎖公用存取設定,請使用 REST API 端點作為來源,並限制來源存取身分 (OAI) 的存取。
  4. 建立 CloudFront Web 分配。除了使用案例所需的分配設定之外,請輸入下列項目:
    針對 Origin domain (原始網域),輸入您在步驟 2 中複製的端點。
    注意:不要從下拉式清單中選擇儲存貯體。下拉式清單僅包含此組態中未使用的 S3 儲存貯體 REST API 端點。
  5. 最佳實務是為您的網站使用 SSL (HTTPS)。若要搭配 HTTPS 使用自訂網域,請選取 Custom SSL certificate (自訂 SSL 憑證)。 您可以選擇 Request certificate (請求憑證) 以請求新憑證。如果您沒有使用自訂網域,則您仍然可以使用 HTTPS 搭配 cloudfront.net 網域名稱來進行分配。
    重要:如果您為分配輸入替代網域名稱 (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. 使用 Amazon S3 主控台建立儲存貯體並啟用託管的靜態網站 (於儲存貯體上)。
  2. Static website hosting (靜態網站託管) 對話方塊中,複製沒有前置 http:// 的儲存貯體 Endpoint (端點)。格式類似於 DOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com。您需要此格式的端點以供在稍後的步驟使用。
  3. 建立 CloudFront Web 分配。除了使用案例所需的分配設定之外,請輸入下列項目:
    針對 Origin domain (原始網域),輸入您在步驟 2 中複製的端點。注意:不要從下拉式清單中選擇儲存貯體。下拉式清單僅包含此組態中未使用的 S3 儲存貯體 REST API 端點。
    Add custom header (新增自訂標題) 底下,選擇 Add header (新增標題)。
    針對 Header name (標題名稱),輸入 Referer
    Value (值) 底下,輸入您想要轉寄至來源 (S3 儲存貯體) 的自訂標題。若要限制對來源的存取,請輸入只有您知道的隨機或秘密值。
  4. 最佳實務是為您的網站使用 SSL (HTTPS)。若要搭配 HTTPS 使用自訂網域,請選取 Custom SSL certificate (自訂 SSL 憑證)。 您可以選擇 Request certificate (請求憑證) 以請求新憑證。如果您沒有使用自訂網域,您仍然可以使用 HTTPS 搭配 cloudfront.net 網域名稱來進行分配。
    重要:如果您為分配輸入替代網域名稱 (CNAME),則 CNAME 必須符合您選取的 SSL 憑證。若要針對您的 SSL 憑證進行疑難排解,請參閱如何對在 CloudFront 分配中使用自訂 SSL 憑證的問題進行疑難排解?
  5. 選擇 Create Distribution (建立分配)。
  6. Amazon S3 主控台開啟網站的儲存貯體。然後,新增儲存貯體政策在請求包含自訂「推薦者」標題的條件上允許 s3:GetObject,您在步驟 3 中指定該請求。對於此組態,必須啟用 S3 儲存貯體的封鎖公用存取限制。(Amazon S3 考量儲存貯體政策,將「推薦者」限制的匿名存取授予為公用)。如果您的使用案例需要啟用封鎖公用存取設定,請使用 REST API 端點作為來源,並限制來源存取身分 (OAI) 的存取
    注意:若要封鎖任何不包含自訂 Refrer 標題之請求的存取,請在儲存貯體政策中使用明確的拒絕陳述式。
  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 安全靜態網站