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

上次更新日期:2022 年 11 月 3 日

我想在 Amazon Simple Storage Service (Amazon S3) 儲存貯體上託管靜態網站。然後,我想透過 Amazon CloudFront 分配為我的網站提供服務。我如何做到這一點?

簡短描述

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

  • 使用 REST API 端點作為來源,其中存取會受限於原始存取控制 (OAC) 或原始存取身分 (OAI)
    注意:最佳實務做法是使用原始存取控制 (OAC) 來限制存取。原始存取身分 (OAI) 是此程序的舊版方法。
  • 使用網站端點作為來源,其中允許匿名 (公開) 存取
  • 使用網站端點作為來源,其中存取行為會受限於 Referer 標題
  • 使用 CloudFormation 將靜態網站端點部署為來源,並使自訂網域部署指向 CloudFront

如需兩種端點類型的詳細資訊,請參閱網站端點與 REST API 端點之間的主要差異

解決方案

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

使用 REST API 端點作為來源,其中存取會受限於 OAC 或 OAI (舊版方法)

  1. 使用 Amazon S3 主控台建立儲存貯體上傳您的網站檔案
    注意:您不需要為此組態開啟儲存貯體上託管的靜態網站。此組態會使用儲存貯體的 REST API 端點,不會使用靜態網站託管功能的網站端點。
  2. 建立 CloudFront Web 分配。除了您的使用情況所需的發行設定之外,請使用下列其中一種方法來限制對 Amazon S3 來源的存取。這是使用 OAC 的最佳實務做法。使用 OAI 是舊版設定。

    建立發行版時,請使用下列設定來限制使用 OAC 的存取行為:
    Origin Domain (原始網域) 欄位中輸入您的 Amazon S3 儲存貯體名稱。
    Origin access (原始存取權限) 下,選取 Origin access control settings (recommended) (原始存取控制設定 (建議選項))。
    Origin access control (原始存取控制) 下拉式清單中,選取 OAC 名稱並選擇 Create control setting (建立控制設定)。
    使用此對話方塊來命名您的控制設定 最佳實務做法是保留預設設定 Sign requests (recommended) (簽署請求 (建議使用))。然後,選擇 Create (建立)。
    CloudFront 會在建立發行版之後提供政策聲明給您,藉此授予存取您的 Amazon S3 儲存貯體的 OAC 許可。選取 Copy Policy (複製政策),然後將政策貼到 S3 儲存貯體政策組態中。

    –或者–

    建立發行版時,使用下列設定來限制使用 OAI 的存取行為:
    Origin Domain (原始網域) 欄位中輸入您的 Amazon S3 儲存貯體名稱。
    Origin access (原始存取權) 底下,選取 Legacy access identities (舊版存取身分)。
    Origin access identity (原始存取身分) 下拉式清單中,選取原始存取身分名稱。然後,選擇 Create new 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. 更新網域的 DNS 記錄,以將網站的 CNAME 指向您的 CloudFront 分發的網域名稱。您可以在 CloudFront 主控台中找到格式類似 d1234abcd.cloudfront.net 的分配網域名稱。
  5. 等待 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 端點作為來源。然後,透過原始存取控制 (OAC) 或原始存取身分 (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. 更新網域的 DNS 記錄,以將網站的 CNAME 指向您的 CloudFront 分發的網域名稱。您可以在 CloudFront 主控台中找到格式類似 d1234abcd.cloudfront.net 的分配網域名稱。
  7. 等待 DNS 變更傳播,以及先前的 DNS 項目到期。
    注意:先前 DNS 值到期的時間長度取決於在託管區域設定的 TTL 值。這也取決於您的本機解析程式是否使用這些 TTL 值。

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

此組態會設定發行版的自訂 Referer 標題,藉此限制存取行為。然後,它會使用儲存貯體政策,僅允許具有自訂 Referer 標題的存取請求。

重要:請務必評估此設定所允許的存取行為是否符合使用案例的需求。

注意:當您使用 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. Amazon S3 主控台開啟網站的儲存貯體。然後,新增允許 s3:GetObject 的儲存貯體政策條件是請求中必須包含自訂的 Referer 標題,您在步驟 3 中已指定過此 Referer 標題。對於此組態,必須關閉 S3 儲存貯體的封鎖公用存取設定。Amazon S3 考量儲存貯體政策,將 Referer 限制的匿名存取授予為公用。如果您的使用案例需要開啟封鎖公用存取設定,則請使用 REST API 端點作為來源。然後,透過原始存取控制 (OAC) 或原始存取身分 (OAI) 來限制存取行為。
    注意:若要封鎖任何不包含自訂 Refrer 標題之請求的存取,請在儲存貯體政策中使用明確的拒絕陳述式。
  6. 更新網域的 DNS 記錄,以將網站的 CNAME 指向您的 CloudFront 分配的網域名稱。您可以在 CloudFront 主控台中找到格式類似 d1234abcd.cloudfront.net 的分配網域名稱。
  7. 等待 DNS 變更傳播,以及先前的 DNS 項目到期。
    注意:先前 DNS 值到期的時間長度取決於在託管區域設定的 TTL 值。這也取決於您的本機解析程式是否使用這些 TTL 值。

使用 CloudFormation 將靜態網站端點部署為來源,並使自訂網域部署指向 CloudFront

有了這個解決方案,您的網站就可以:

  • 與 CloudFormation 一起部署
  • 在 Amazon S3 上託管
  • 由 CloudFront 分配
  • 使用 AWS Certificate Manager (ACM) 提供的 SSL/TLS 憑證
  • 使用 CloudFront 回應標題政策將安全標題新增至每個伺服器回應中

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