開始使用安全的靜態網站

您可以使用本主題中描述的解決方案為您的網域名稱建立安全的靜態網站，開始使用 Amazon CloudFront 。靜態網站只會使用靜態檔案 (例如 HTML、CSS、 JavaScript影像和視訊)，不需要伺服器或伺服器端處理。有了這個解決方案，您的網站可以獲得以下好處：

• 使用 Amazon 簡易儲存服務 (Amazon S3)的耐久儲存 – 此解決方案會建立 Amazon S3 儲存貯體來託管靜態網站的內容。要更新您的網站，只需將您的新檔案上傳到 S3 儲存貯體即可。

• Amazon CloudFront 內容交付網路加速 — 此解決方案可建立 CloudFront 分發，以低延遲將您的網站提供給觀眾。該分發配置為原始訪問身份，以確保只能通過訪問該網站 CloudFront，而不是直接從 S3 訪問。

• 由 HTTPS 和其他安全標頭保護 — 此解決方案會在 AWS Certificate Manager(ACM) 中建立 SSL/TLS 憑證，並將其附加至發行版本。 CloudFront 此憑證可讓您透過 HTTPS 安全地為您網域的網站提供分佈。

  此解決方案也使用 Lambda@Edge 將安全標頭新增至每個伺服器回應。安全標頭是 Web 服務器回應中的一組標頭，告訴 Web 瀏覽器採取額外的安全預防措施。如需詳細資訊，請參閱此部落格文章：使用 Lambda @Edge 和 Amazon 新增 HTTP 安全標頭 CloudFront。

• 已使用 AWS CloudFormation 設定及部署 – 此解決方案使用 AWS CloudFormation 範本來設定所有元件，讓您可以更專注於網站內容，而花更少時間在設定元件上。

這個解決方案是開源的 GitHub. 若要檢視程式碼、提交提取請求或開立問題單，請前往 https://github.com/aws-samples/amazon-cloudfront-secure-static-site。

解決方案概觀

下圖顯示此靜態網站解決方案運作方式的概觀：

1. 瀏覽者在 www.example.com 請求網站。

2. 如果要求的物件已快取，則會將物件從其快取 CloudFront 傳回給檢視器。

3. 如果物件不在 CloudFront快取中， CloudFront 請從來源 (S3 儲存貯體) 要求物件。

4. S3 會將物件傳回至 CloudFront，這會觸發 Lambda @Edge 來源回應事件。

5. 物件 (包括由 Lambda @Edge 函數新增的安全性標頭) 會新增至 CloudFront的快取。

6. (未顯示) 物件會傳回給瀏覽者。來到相同 CloudFront 邊緣位置之物件的後續要求會從 CloudFront快取中提供服務。

部署解決方案

若要部署此安全靜態網站解決方案，您可以選擇下列其中一個選項：

• 使用 AWS CloudFormation 主控台以預設內容部署解決方案，然後將您的網站內容上傳到 Amazon S3。

• 將解決方案複製到您的電腦，以新增您的網站內容。然後，使用 AWS Command Line Interface (AWS CLI) 部署解決方案。

注意

您必須使用美國東部 (維吉尼亞北部) 區域來部署 CloudFormation 範本。

主題

• 必要條件
• 使用 AWS CloudFormation 主控台
• 在本機複製解決方案
• 尋找存取日誌

必要條件

若要使用此解決方案，您必須具備下列先決條件：

• 指向 Amazon Route 53 託管區域的已註冊網域名稱 (例如 example.com)。託管區域必須與您部署此解決方案的位AWS 帳戶置相同。如果您沒有已註冊的網域名稱，可以使用 Route 53 註冊一個網域名稱。如果您有已註冊的網域名稱，但未指向 Route 53 託管區域，請將 Route 53 配置為您的 DNS 服務。

• AWS Identity and Access Management(IAM) 許可以啟動可建立 IAM 角色的 CloudFormation 範本，以及建立解決方案中所有AWS資源的許可。

您必須自行負責使用此解決方案時所產生的費用。如需有關成本的詳細資訊，請參閱每個頁面的定價頁面AWS 服務。

使用 AWS CloudFormation 主控台

使用 CloudFormation 主控台進行部署

1. 選擇 Launch on AWS (在 AWS 上啟動) (啟動)，以在 AWS CloudFormation 主控台中開啟此解決方案。如有必要，請登入您的AWS 帳戶.

   

2. [建立堆疊] 精靈會在 CloudFormation主控台中開啟，其中包含指定此解決方案 CloudFormation範本的預先填入欄位。

   請選擇頁面最下方的 Next (下一頁)。

3. 在 Specify stack details (指定堆疊詳細資訊) 頁面上，輸入下列欄位的數值：

   • SubDomain— 輸入您的網站使用的子域名。例如，如果子網域名稱為 www，表示您的網站可以在 www.example.com 使用。(請將 example.com 取代為您的網域名稱，如下列項目符號所述)。

   • DomainName— 輸入您的域名, 例如. COM. 此網域必須指向 Route 53 託管區域。

   • HostedZoneId— 您的域名的路線 53 託管區域 ID。

   完成時，請選擇 Next (下一步)。

4. (選用) 在 配置堆疊選項頁面上，新增標籤和其他堆疊選項。

   完成時，請選擇 Next (下一步)。

5. 在 Review (檢閱) 頁面上，捲動至頁面底部，然後選取 Capabilities (功能) 區段中的兩個方塊。這些功能允許 AWS CloudFormation 建立 IAM 角色，以允許存取堆疊的資源，並以動態方式命名資源。

6. 選擇 Create Stack (建立堆疊)。

7. 等待堆疊完成建立。堆疊會建立一些巢狀堆疊，而且可能需要幾分鐘才能完成。完成時，Status (狀態) 會變更為 CREATE_COMPLETE。

   當狀態為 CREATE_COMPLETE 時，請前往 https://www.example.com 檢視您的網站 (將 www.example.com 取代為您在步驟 3 中指定的子網域和網域名稱)。您應該會看到網站的預設內容：

   

將網站的預設內容取代為您自己的內容

1. 在以下網址開啟 Amazon S3 主控台：https://console.aws.amazon.com/s3/。

2. 選擇名稱以 amazon-cloudfront-secure-static-站點-s3bucketroot- 開頭的存儲桶。

   注意

   確定選擇名稱中包含 s3bucketroot 的儲存貯體，而不是 s3bucketlog。名稱中含有 s3bucketroot 儲存貯體包含網站內容。帶有 s3bucketlog 儲存貯體只包含日誌檔案。

3. 刪除網站的預設內容，然後上傳您自己的內容。

   注意

   如果您使用此解決方案的預設內容檢視網站，則可能是某些預設內容會快取在 CloudFront 邊緣位置。為了確保檢視者能看到您更新的網站內容，請使檔案無效，以便從 CloudFront 節點移除快取的副本。如需詳細資訊，請參閱 使檔案失效。

在本機複製解決方案

先決條件

要在部署此解決方案之前新增您的網站內容，您必須在本機封裝解決方案的成品，這需要 Node.js 和 npm。如需更多詳細資訊，請參閱 https://www.npmjs.com/get-npm。

新增您的網站內容並部署解決方案

1. 從 複製或下載解決方案https://github.com/aws-samples/amazon-cloudfront-secure-static-site 複製或下載之後，請開啟命令提示字元或終端機，然後瀏覽至 amazon-cloudfront-secure-static-site 資料夾。

2. 執行下列命令以安裝並封裝解決方案的成品：

   make package-static

3. 將網站的內容複製到 www 資料夾中，覆寫預設的網站內容。

4. 執行下列 AWS CLI 命令以建立 Amazon S3 儲存貯體來儲存解決方案的成品。example-bucket-for-artifacts以您自己的儲存貯體名稱取代。

   aws s3 mb s3://example-bucket-for-artifacts --region us-east-1

5. 執行下列 AWS CLI 命令，將解決方案的成品封裝為 AWS CloudFormation 範本。取代example-bucket-for-artifacts為您在上一個步驟中建立的值區名稱。

   aws cloudformation package \
       --region us-east-1 \ 
       --template-file templates/main.yaml \
       --s3-bucket example-bucket-for-artifacts \
       --output-template-file packaged.template

6. 執行下列命令以使用 AWS CloudFormation 部署解決方案，取代下列數值：

   • 您的CloudFormation堆棧名稱- 替換為堆棧的名稱。AWS CloudFormation

   • example.com – 取代為您的網域名稱。此網域必須指向相同 AWS 帳戶中的 Route 53 託管區域。

   • www – 取代為您的網站所使用的子網域名稱。例如，如果子網域名稱為 www，表示您的網站可以在 www.example.com 使用。

   aws cloudformation deploy \
       --region us-east-1 \
       --stack-name your-CloudFormation-stack-name \
       --template-file packaged.template \
       --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \
       --parameter-overrides DomainName=example.com SubDomain=www

7. 等待 AWS CloudFormation 堆疊完成建立。堆疊會建立一些巢狀堆疊，而且可能需要幾分鐘才能完成。完成時，Status (狀態) 會變更為 CREATE_COMPLETE。

   當狀態變更為 CREATE_COMPLETE 時，請前往 https://www.example.com 檢視您的網站 (將 www.example.com 取代為您在上一個步驟中指定的子網域和網域名稱)。您應該會看到您網站的內容。

尋找存取日誌

此解決方案會啟用 CloudFront分發的存取記錄。請完成以下步驟來尋找分佈的存取日誌。

尋找分佈的存取日誌

1. 在以下網址開啟 Amazon S3 主控台：https://console.aws.amazon.com/s3/。

2. 選擇名稱以 amazon-cloudfront-secure-static-站點-s3bucketlog- 開頭的存儲桶。

   注意

   確定選擇名稱中包含 s3bucketlogs 的儲存貯體，而不是 s3bucketroot。名稱中含有 s3bucketlog 的儲存貯體包含日誌檔案。帶有 s3bucketroot 的儲存貯體包含網站內容。

3. 名為 cdn 的文件夾包含 CloudFront 訪問日誌。