本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。 # 開始使用 CloudFront 本節主題說明如何開始使用 Amazon CloudFront 交付您的內容。 [設定您的 AWS 帳戶](setting-up-cloudfront.md) 主題說明下列教學課程的先決條件，例如建立 AWS 帳戶和建立具有管理存取權的使用者。基本分佈教學課程說明如何設定原始存取控制 (OAC)，將已驗證的請求傳送至 Amazon S3 原始伺服器。安全靜態網站教學課程說明如何使用 OAC 搭配 Amazon S3 原始伺服器為您的網域名稱建立安全靜態網站。本教學課程使用 Amazon CloudFront (CloudFront) 範本進行設定和部署。 **Topics** + [ # 設定您的 AWS 帳戶 ](setting-up-cloudfront.md) + [ # 開始使用 CloudFront 標準分佈 ](GettingStarted.SimpleDistribution.md) + [ # 開始使用標準分佈 (AWS CLI) ](get-started-cli-tutorial.md) + [ # 開始使用安全的靜態網站 ](getting-started-secure-static-website-cloudformation-template.md) # 設定您的 AWS 帳戶此主題說明初步的步驟，例如建立 AWS 帳戶帳戶，以讓您準備使用 Amazon CloudFront。 **Topics** + [ ## 註冊 AWS 帳戶 ](#sign-up-for-aws) + [ ## 建立具有管理存取權的使用者 ](#create-an-admin) + [ ## 選擇如何存取 CloudFront ](#introduction-accessing-cloudfront) ## 註冊 AWS 帳戶如果您沒有 AWS 帳戶，請完成下列步驟來建立一個。 **註冊 AWS 帳戶** 1. 開啟 [https://portal.aws.amazon.com/billing/signup](https://portal.aws.amazon.com/billing/signup)。 1. 請遵循線上指示進行。部分註冊程序需接收來電或簡訊，並在電話鍵盤輸入驗證碼。當您註冊時 AWS 帳戶，*AWS 帳戶根使用者*會建立。根使用者有權存取該帳戶中的所有 AWS 服務和資源。作為安全最佳實務，請將管理存取權指派給使用者，並且僅使用根使用者來執行[需要根使用者存取權的任務](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_root-user.html#root-user-tasks)。 AWS 會在註冊程序完成後傳送確認電子郵件給您。您可以隨時登錄 [https://aws.amazon.com/](https://aws.amazon.com/) 並選擇**我的帳戶**，以檢視您目前的帳戶活動並管理帳戶。 ## 建立具有管理存取權的使用者註冊後 AWS 帳戶，請保護 AWS 帳戶根使用者、啟用 AWS IAM Identity Center和建立管理使用者，以免將根使用者用於日常任務。 **保護您的 AWS 帳戶根使用者** 1. 選擇**根使用者**並輸入 AWS 帳戶您的電子郵件地址，以帳戶擁有者[AWS 管理主控台](https://console.aws.amazon.com/)身分登入。在下一頁中，輸入您的密碼。如需使用根使用者登入的說明，請參閱 *AWS 登入使用者指南*中的[以根使用者身分登入](https://docs.aws.amazon.com/signin/latest/userguide/console-sign-in-tutorials.html#introduction-to-root-user-sign-in-tutorial)。 1. 若要在您的根使用者帳戶上啟用多重要素驗證 (MFA)。如需說明，請參閱《*IAM 使用者指南*》中的[為您的 AWS 帳戶根使用者（主控台）啟用虛擬 MFA 裝置](https://docs.aws.amazon.com/IAM/latest/UserGuide/enable-virt-mfa-for-root.html)。 **建立具有管理存取權的使用者** 1. 啟用 IAM Identity Center。如需指示，請參閱《AWS IAM Identity Center 使用者指南》**中的[啟用 AWS IAM Identity Center](https://docs.aws.amazon.com//singlesignon/latest/userguide/get-set-up-for-idc.html)。 1. 在 IAM Identity Center 中，將管理存取權授予使用者。如需使用 IAM Identity Center 目錄做為身分來源的教學課程，請參閱*AWS IAM Identity Center 《使用者指南*》中的[使用預設值設定使用者存取 IAM Identity Center 目錄](https://docs.aws.amazon.com//singlesignon/latest/userguide/quick-start-default-idc.html)。 **以具有管理存取權的使用者身分登入** + 若要使用您的 IAM Identity Center 使用者簽署，請使用建立 IAM Identity Center 使用者時傳送至您電子郵件地址的簽署 URL。如需使用 IAM Identity Center 使用者登入的說明，請參閱*AWS 登入《使用者指南*》中的[登入 AWS 存取入口網站](https://docs.aws.amazon.com/signin/latest/userguide/iam-id-center-sign-in-tutorial.html)。 **指派存取權給其他使用者** 1. 在 IAM Identity Center 中，建立一個許可集來遵循套用最低權限的最佳實務。如需指示，請參閱《AWS IAM Identity Center 使用者指南》**中的[建立許可集](https://docs.aws.amazon.com//singlesignon/latest/userguide/get-started-create-a-permission-set.html)。 1. 將使用者指派至群組，然後對該群組指派單一登入存取權。如需指示，請參閱《AWS IAM Identity Center 使用者指南》**中的[新增群組](https://docs.aws.amazon.com//singlesignon/latest/userguide/addgroups.html)。 ## 選擇如何存取 CloudFront 您可以通過以下方式存取 Amazon CloudFront： + **AWS 管理主控台** – 本指南中的程序說明如何使用 AWS 管理主控台來執行任務。 + **AWS SDKs** – 如果您使用的是提供開發套件的 AWS 程式設計語言，您可以使用開發套件來存取 CloudFront。開發套件會簡化身分驗證、與開發環境輕鬆整合，並讓您存取 CloudFront 命令。如需詳細資訊，請參閱[搭配 AWS SDK 使用 CloudFront](sdk-general-information-section.md)。 + **CloudFront API** – 如果您使用沒有適用開發套件的程式設計語言，請參閱 [Amazon CloudFront API 參考](https://docs.aws.amazon.com/cloudfront/latest/APIReference/Welcome.html)，以取得 API 動作以及如何提出 API 請求的相關資訊。 + **AWS CLI** – The AWS Command Line Interface (AWS CLI) 是用於管理的統一工具 AWS 服務。如需如何安裝和設定 AWS CLI的詳細資訊，請參閱《*AWS Command Line Interface 使用者指南*》中的[安裝或更新為 AWS CLI的最新版本](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html)。 + **Tools for Windows PowerShell**：如果您有使用 Windows PowerShell 的經驗，您可能會偏好使用 AWS Tools for Windows PowerShell。如需詳細資訊，請參閱「AWS Tools for PowerShell 使用者指南」**中的[安裝 AWS Tools for Windows PowerShell](https://docs.aws.amazon.com/powershell/latest/userguide/pstools-getting-set-up.html)。 # 開始使用 CloudFront 標準分佈本節中的程序示範如何使用 CloudFront 來設定可執行下列動作的標準分佈： + 建立 S3 儲存貯體以用作分佈來源。 + 將物件原始版本存放在 Amazon Simple Storage Service (Amazon S3) 儲存貯體中。 + 使用原始存取控制 (OAC) 將已驗證的請求傳送至您的 Amazon S3 原始伺服器。OAC 透過 CloudFront 傳送請求，以防止檢視器直接存取您的 S3 儲存貯體。如需 OAC 的詳細資訊，請參閱 [限制對 Amazon S3 原始伺服器的存取](private-content-restricting-access-to-s3.md)。 + 在物件 URL 中使用 CloudFront 網域名稱 (例如 `https://d111111abcdef8.cloudfront.net/index.html`)。 + 將您的物件儲存在 CloudFront 邊緣節點達 24 小時預設持續時間 (最短持續時間為 0 秒)。您建立 CloudFront 分佈時，以上作業大部分是由系統自動為您設定。 **Topics** + [ ## 先決條件 ](#GettingStartedSignup) + [ ## 建立 Amazon S3 儲存貯體 ](#GettingStartedCreateBucket) + [ ## 將內容上傳至儲存貯體 ](#GettingStartedUploadContent) + [ ## 建立使用 Amazon S3 原始伺服器搭配 OAC 的 CloudFront 分佈 ](#GettingStartedCreateDistribution) + [ ## 透過 CloudFront 存取內容 ](#GettingStartedAccessingDistributions) + [ ## 清除 ](#GettingStartedDistributionCleanup) + [ ## 增強基本分佈 ](#GettingStartedDistributionNotes) ## 先決條件開始之前，請確定您已完成 [設定您的 AWS 帳戶](setting-up-cloudfront.md) 所述的步驟。 ## 建立 Amazon S3 儲存貯體 Amazon S3 儲存貯體是檔案 (物件) 或資料夾的容器。CloudFront 使用 S3 儲存貯體做為來源時，能夠自動分佈幾乎任何類型的檔案。例如，CloudFront 可以分發文字、影像和影片。您可以在 Amazon S3 上存放的資料量沒有上限。在本教學課程中，您會使用建立基本網頁的範例 `hello world` 檔案來建立 S3 儲存貯體。 **建立儲存貯體** 1. 登入 AWS 管理主控台，並在 [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/)：// 開啟 Amazon S3 主控台。 1. 我們建議您使用我們的 Hello World 範例來進行此「入門」操作。下載 *Hello World* 網頁：[hello-world-html.zip](samples/hello-world-html.zip)。將其解壓縮，並將 `css` 資料夾和 `index` 檔案儲存在方便的位置，例如執行瀏覽器的桌面。 1. 選擇**建立儲存貯體**。 1. 輸入符合《*Amazon Simple Storage Service 使用者指南*》中[一般用途儲存貯體命名規則](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html#general-purpose-bucket-names)的唯一**儲存貯體名稱**。 1. 對於 **區域**，我們建議選擇接近您地理位置的 AWS 區域。(這可降低延遲和成本。) + 不過選擇不同區域也沒問題。您可以這樣做來因應法規要求。 1. 將所有其他設定保留為預設值，然後選擇 **Create bucket** (建立儲存貯體)。 ## 將內容上傳至儲存貯體您建立 Amazon S3 儲存貯體後，將解壓縮 `hello world` 檔案的內容上傳至其中。(您已下載並在 [建立 Amazon S3 儲存貯體](#GettingStartedCreateBucket) 中解壓縮此檔案。) **將內容上傳至 Amazon S3** 1. 在**一般用途儲存貯體**區段中，選擇新儲存貯體的名稱。 1. 選擇**上傳**。 1. 在**上傳**頁面上，將 `css` 資料夾和 `index` 檔案拖曳到放置區域。 1. 將所有其他設定保留為預設值，然後選擇**上傳**。 ## 建立使用 Amazon S3 原始伺服器搭配 OAC 的 CloudFront 分佈在本教學課程中，您將建立 CloudFront 分佈，該分佈使用 Amazon S3 原始伺服器搭配原始存取控制 (OAC)。OAC 可協助您將已驗證的請求安全地傳送至 Amazon S3 原始伺服器。如需 OAC 的詳細資訊，請參閱 [限制對 Amazon S3 原始伺服器的存取](private-content-restricting-access-to-s3.md)。 **以使用 OAC 的 Amazon S3 原始伺服器建立 CloudFront 分佈** 1. 在 [https://console.aws.amazon.com/cloudfront/v4/home](https://console.aws.amazon.com/cloudfront/v4/home) 中開啟 CloudFront 主控台。 1. 選擇 **Create Distribution (建立分佈)**。 1. 輸入標準分佈的**分佈名稱**。名稱將顯示為 `Name` 鍵值做為標籤。您可以稍後變更此值。您最多可以為標準分佈新增 50 個標籤。如需詳細資訊，請參閱[標記分佈](tagging.md)。 1. 選擇**單一網站或應用程式**、**下一步**。 1. 選擇**下一步**。 1. 對於**來源類型**頁面，選取 **Amazon S3**。 1. 對於 **S3 原始伺服器**，請選擇**瀏覽 S3**，然後選取您為此教學課程建立的 S3 儲存貯體。 1. 對於**設定**，請選擇**使用建議的原始伺服器設定**。CloudFront 將使用 Amazon S3 原始伺服器預設的建議快取和原始伺服器設定，包括設定原始存取控制 (OAC)。如需建議設定的詳細資訊，請參閱 [預先設定的分佈設定參考](template-preconfigured-origin-settings.md)。 1. 選擇**下一步**。 1. 在**啟用安全性保護**頁面上，選擇是否啟用 AWS WAF 安全性保護。 1. 選擇**下一步**。 1. 選擇 **Create Distribution (建立分佈)**。CloudFront 會為您更新 S3 儲存貯體政策。 1. 檢閱新分佈的**詳細資訊**區段。您的分佈完成部署時，**上次修改**欄位會從**正在部署**變更為日期和時間。 1. 記錄 CloudFront 指派給您的分佈的網域名稱。它看起來類似下列：`d111111abcdef8.cloudfront.net`。在生產環境中使用本教學課程中的分佈和 S3 儲存貯體之前，請務必進行設定使其滿足您的特定需求。如需在生產環境中設定存取權限的詳細資訊，請參閱 [設定安全存取和限制對內容的存取](SecurityAndPrivateContent.md)。 ## 透過 CloudFront 存取內容若要透過 CloudFront 存取您的內容，請將您的 CloudFront 分佈的網域名稱與內容主頁面合併。(您已在 [建立使用 Amazon S3 原始伺服器搭配 OAC 的 CloudFront 分佈](#GettingStartedCreateDistribution) 中記錄您的分佈網域名稱。) + 您的分佈網域名稱可能會像這樣：`d111111abcdef8.cloudfront.net`。 + 網站主頁的路徑通常是 `/index.html`。因此，透過 CloudFront 存取您的內容的 URL 可能像這樣： `https://d111111abcdef8.cloudfront.net/index.html`. 如果您遵循上述步驟並使用 *Hello World* 網頁，您應該會看到顯示 **Hello world\$1** 的網頁。當您上傳更多內容到此 S3 儲存貯體時，藉由將 CloudFront 分佈網域名稱與 S3 儲存貯體中物件的路徑合併，即可透過 CloudFront 存取內容。例如，如果您上傳名為 `new-page.html` 的新檔案到 S3 儲存貯體的根目錄，則 URL 會像這樣： `https://d111111abcdef8.cloudfront.net/new-page.html`. ## 清除如果您只將分佈和 S3 儲存貯體建立為學習練習，請將其刪除，這樣就不會再產生費用。先刪除分佈。如需詳細資訊，請參閱下列連結： + [刪除分發](HowToDeleteDistribution.md) + [刪除儲存貯體](https://docs.aws.amazon.com/AmazonS3/latest/userguide/delete-bucket.html) ## 增強基本分佈本入門教學課程提供建立分佈的最小架構。我們建議您進一步探索下列增強功能： + 您可以使用 CloudFront 私有內容功能來限制對 Amazon S3 儲存貯體中內容的存取。如需有關分佈私有內容的詳細資訊，請參閱[使用已簽署 URL 和已簽署 Cookie 提供私有內容](PrivateContent.md)。 + 您可以將 CloudFront 分佈設定為使用自訂網域名稱 (例如，`www.example.com` 而非 `d111111abcdef8.cloudfront.net`)。如需詳細資訊，請參閱[使用自訂 URL](CNAMEs.md)。 + 本教學課程使用具有原始存取控制 (OAC) 的 Amazon S3 原始伺服器。不過如果您的原始伺服器是設定為[網站端點](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteEndpoints.html)的 S3 儲存貯體，則無法使用 OAC。如果是這種情況，您必須使用 CloudFront 設定儲存貯體做為自訂原始伺服器。如需詳細資訊，請參閱[使用設定為網站端點的 Amazon S3 儲存貯體](DownloadDistS3AndCustomOrigins.md#concept_S3Origin_website)。如需 OAC 的詳細資訊，請參閱 [限制對 Amazon S3 原始伺服器的存取](private-content-restricting-access-to-s3.md)。 # 開始使用標準分佈 (AWS CLI) 本節中的程序說明如何 AWS CLI 搭配 CloudFront 使用來設定涉及下列項目的基本組態： + 建立 Amazon S3 儲存貯體以用作分佈來源。 + 在 S3 儲存貯體中儲存物件的原始版本。 + 使用原始存取控制 (OAC) 將已驗證的請求傳送至您的 Amazon S3 原始伺服器。OAC 透過 CloudFront 傳送請求，以防止檢視器直接存取您的 S3 儲存貯體。如需 OAC 的詳細資訊，請參閱 [限制對 Amazon S3 原始伺服器的存取](private-content-restricting-access-to-s3.md)。 + 在物件 URL 中使用 CloudFront 網域名稱 (例如 `https://d111111abcdef8.cloudfront.net/index.html`)。 + 將您的物件儲存在 CloudFront 邊緣節點達 24 小時預設持續時間 (最短持續時間為 0 秒)。其中的大多數選項均可供自訂。如需如何自訂 CloudFront 分佈選項的相關資訊，請參閱[建立分發](distribution-web-creating-console.md)。 ## 先決條件開始之前，請確定您已完成 [設定您的 AWS 帳戶](setting-up-cloudfront.md) 所述的步驟。安裝 AWS CLI 並使用登入資料進行設定。如需詳細資訊，請參閱 *AWS CLI 使用者指南*中的 [AWS CLI入門](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-getting-started.html)。 ## 建立 Amazon S3 儲存貯體 Amazon S3 儲存貯體是檔案 (物件) 或資料夾的容器。CloudFront 使用 S3 儲存貯體做為來源時，能夠自動分佈幾乎任何類型的檔案。例如，CloudFront 可以分發文字、影像和影片。您可以在 Amazon S3 上存放的資料量沒有上限。在本教學課程中，您會建立 S3 儲存貯體並上傳用來建立基本網頁的 HTML 檔案。 ``` aws s3 mb s3://amzn-s3-demo-bucket/ --region us-east-1 ``` 以全域唯一儲存貯體名稱取代 *amzn-s3-demo-bucket*。對於 AWS 區域，我們建議您選擇地理位置接近的區域。這可降低延遲和成本，但選擇不同的區域也可以。例如您可以這樣做來因應法規要求。 ## 將內容上傳至儲存貯體在本教學課程中，請下載及擷取基本「Hello World」網頁的範例內容檔案。 ``` # Create a temporary directory mkdir -p ~/cloudfront-demo # Download the sample Hello World files curl -o ~/cloudfront-demo/hello-world-html.zip https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/samples/hello-world-html.zip # Extract the zip file unzip ~/cloudfront-demo/hello-world-html.zip -d ~/cloudfront-demo/hello-world ``` 這會建立具有 `index.html` 檔案和 `css` 資料夾的目錄。將這些檔案上傳至 S3 儲存貯體。 ``` aws s3 cp ~/cloudfront-demo/hello-world/ s3://amzn-s3-demo-bucket/ --recursive ``` ## 建立原始存取控制 (OAC) 在本教學課程中，您將建立原始存取控制 (OAC)。OAC 可協助您將已驗證的請求安全地傳送至 Amazon S3 原始伺服器。如需 OAC 的詳細資訊，請參閱 [限制對 Amazon S3 原始伺服器的存取](private-content-restricting-access-to-s3.md)。 ``` aws cloudfront create-origin-access-control \ --origin-access-control-config Name="oac-for-s3",SigningProtocol=sigv4,SigningBehavior=always,OriginAccessControlOriginType=s3 ``` 將輸出中的 OAC ID 儲存為環境變數。使用您自己的 OAC ID 取代範例值。下一個步驟會用到此值。 ``` OAC_ID="E1ABCD2EFGHIJ" ``` ## 建立標準分佈建立一個名為 `distribution-config.json` 的分佈組態檔案。將範例儲存貯體名稱取代為 `Id`、`DomainName` 和 `TargetOriginId` 值的儲存貯體名稱。 ``` cat > distribution-config.json << EOF { "CallerReference": "cli-example-$(date +%s)", "Origins": { "Quantity": 1, "Items": [ { "Id": "S3-amzn-s3-demo-bucket", "DomainName": "amzn-s3-demo-bucket.s3.amazonaws.com", "S3OriginConfig": { "OriginAccessIdentity": "" }, "OriginAccessControlId": "$OAC_ID" } ] }, "DefaultCacheBehavior": { "TargetOriginId": "S3-amzn-s3-demo-bucket", "ViewerProtocolPolicy": "redirect-to-https", "AllowedMethods": { "Quantity": 2, "Items": ["GET", "HEAD"], "CachedMethods": { "Quantity": 2, "Items": ["GET", "HEAD"] } }, "DefaultTTL": 86400, "MinTTL": 0, "MaxTTL": 31536000, "Compress": true, "ForwardedValues": { "QueryString": false, "Cookies": { "Forward": "none" } } }, "Comment": "CloudFront distribution for S3 bucket", "Enabled": true } EOF ``` 建立標準分佈。 ``` aws cloudfront create-distribution --distribution-config file://distribution-config.json ``` 將輸出的分佈 ID 和網域名稱儲存為環境變數。使用自己的取代範例值。您將在本教學課程稍後使用這些值。 ``` DISTRIBUTION_ID="EABCD1234XMPL" DOMAIN_NAME="d111111abcdef8.cloudfront.net" ``` 在生產環境中使用本教學課程中的分佈和 S3 儲存貯體之前，請務必進行設定使其滿足您的特定需求。如需在生產環境中設定存取權限的詳細資訊，請參閱 [設定安全存取和限制對內容的存取](SecurityAndPrivateContent.md)。 ## 更新您的 S3 儲存貯體政策更新您的 S3 儲存貯體政策，以允許 CloudFront 存取物件。以您的儲存貯體名稱取代範例儲存貯體名稱。 ``` # Get your AWS account ID ACCOUNT_ID=$(aws sts get-caller-identity --query 'Account' --output text) # Create the bucket policy cat > bucket-policy.json << EOF { "Version": "2012-10-17", "Statement": [ { "Sid": "AllowCloudFrontServicePrincipal", "Effect": "Allow", "Principal": { "Service": "cloudfront.amazonaws.com" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::amzn-s3-demo-bucket/*", "Condition": { "StringEquals": { "AWS:SourceArn": "arn:aws:cloudfront::$ACCOUNT_ID:distribution/$DISTRIBUTION_ID" } } } ] } EOF # Apply the bucket policy aws s3api put-bucket-policy \ --bucket amzn-s3-demo-bucket \ --policy file://bucket-policy.json ``` ## 確認分佈部署您建立分佈後，需要一些時間才能完成部署。分佈狀態從 `InProgress` 變更為 `Deployed` 時，請繼續下一個步驟。 ``` aws cloudfront get-distribution --id $DISTRIBUTION_ID --query 'Distribution.Status' ``` 或者您可以使用 `wait` 命令來等待分佈部署。 ``` aws cloudfront wait distribution-deployed --id $DISTRIBUTION_ID ``` ## 透過 CloudFront 存取內容若要透過 CloudFront 存取您的內容，請將您的 CloudFront 分佈的網域名稱與內容主頁面合併。將範例 CloudFront 網域名稱取代為您自己的網域名稱。 ``` https://d111111abcdef8.cloudfront.net/index.html ``` 如果您遵循上述步驟並建立 HTML 檔案，您應該會看到顯示 **Hello world\$1** 的網頁。當您上傳更多內容到此 S3 儲存貯體時，藉由將 CloudFront 分佈網域名稱與 S3 儲存貯體中物件的路徑合併，即可透過 CloudFront 存取內容。例如，如果您上傳名為 `new-page.html` 的新檔案到 S3 儲存貯體的根目錄，則 URL 會像這樣： `https://d111111abcdef8.cloudfront.net/new-page.html`. ## 清除如果您只將分佈和 S3 儲存貯體建立為學習練習，請將其刪除，這樣就不會再產生費用。先停用及刪除分佈。 **停用並刪除標準分佈 (AWS CLI)** 1. 首先請停用分佈。 ``` # Get the current configuration and ETag ETAG=$(aws cloudfront get-distribution-config --id $DISTRIBUTION_ID --query 'ETag' --output text) # Create a modified configuration with Enabled=false aws cloudfront get-distribution-config --id $DISTRIBUTION_ID | \ jq '.DistributionConfig.Enabled = false' > temp_disabled_config.json # Update the distribution to disable it aws cloudfront update-distribution \ --id $DISTRIBUTION_ID \ --distribution-config file://<(jq '.DistributionConfig' temp_disabled_config.json) \ --if-match $ETAG ``` 1. 等待停用分佈。 ``` aws cloudfront wait distribution-deployed --id $DISTRIBUTION_ID ``` 1. 刪除分佈。 ``` # Get the current ETag ETAG=$(aws cloudfront get-distribution-config --id $DISTRIBUTION_ID --query 'ETag' --output text) # Delete the distribution aws cloudfront delete-distribution --id $DISTRIBUTION_ID --if-match $ETAG ``` **刪除 S3 儲存貯體 (AWS CLI)** + 刪除 S3 儲存貯體及其內容。用您自己的儲存貯體名稱取代範例儲存貯體名稱。 ``` # Delete the bucket contents aws s3 rm s3://amzn-s3-demo-bucket --recursive # Delete the bucket aws s3 rb s3://amzn-s3-demo-bucket ``` 若要清除為此教學課程建立的本機檔案，請執行下列命令： ``` # Clean up local files rm -f distribution-config.json bucket-policy.json temp_disabled_config.json rm -rf ~/cloudfront-demo ``` 或者您可以刪除為此教學課程建立的 OAC。 ``` # Get the OAC ETag OAC_ETAG=$(aws cloudfront get-origin-access-control --id $OAC_ID --query 'ETag' --output text) # Delete the OAC aws cloudfront delete-origin-access-control --id $OAC_ID --if-match $OAC_ETAG ``` # 開始使用安全的靜態網站您可以使用本主題中所述的解決方案，為您的網域名稱建立安全的靜態網站，以開始使用 Amazon CloudFront。「靜態網站」**只會使用靜態檔案 (例如 HTML、CSS、JavaScript、影像和視訊)，而不需要伺服器或伺服器端處理。有了這個解決方案，您的網站可以獲得以下好處： + **使用 [Amazon 簡易儲存服務 (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/dev/Welcome.html)的耐久儲存** – 此解決方案會建立 Amazon S3 儲存貯體來託管靜態網站的內容。要更新您的網站，只需將您的新檔案上傳到 S3 儲存貯體即可。 + **透過 Amazon CloudFront 內容傳遞網路加快速度** – 此解決方案會建立 CloudFront 分佈，以低延遲的方式將您的網站提供給檢視器。分佈是以[原始存取控制](private-content-restricting-access-to-s3.md) (OAC) 進行設定，以確保網站只能透過 CloudFront 存取，而不是直接從 S3 存取。 + **受 HTTPS 和安全標頭保護**：此解決方案會在 [AWS Certificate Manager (ACM)](https://docs.aws.amazon.com/acm/latest/userguide/acm-overview.html) 中建立 SSL/TLS 憑證，並將其附加到 CloudFront 分佈中。此憑證可讓您透過 HTTPS 安全地為您網域的網站提供分佈。 + **已使用設定和部署 [AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)** – 此解決方案使用 CloudFormation 範本來設定所有元件，因此您可以更專注於網站的內容，較少專注於設定元件。這個解決方案在 GitHub 上提供開放原始碼。若要檢視程式碼、提交提取請求或開立問題單，請前往 [https://github.com/aws-samples/amazon-cloudfront-secure-static-site](https://github.com/aws-samples/amazon-cloudfront-secure-static-site)。 **Topics** + [ ## 解決方案概觀 ](#cloudformation-website-overview) + [ ## 部署解決方案 ](#deploy-secure-static-website-cloudformation) ## 解決方案概觀下圖顯示此靜態網站解決方案運作方式的概觀： ![\[與 CloudFront 的安全靜態網站概觀圖\]](http://docs.aws.amazon.com/zh_tw/AmazonCloudFront/latest/DeveloperGuide/images/cloudfront-secure-static-website-overview-github.png) 1. 瀏覽者在 www.example.com 請求網站。 1. 如果請求的物件已快取，CloudFront 會將物件從其快取傳回給檢視器。 1. 如果物件不在 CloudFront 的快取中，則 CloudFront 會從原始伺服器 (S3 儲存貯體) 請求物件。 1. S3 會將物件傳回 CloudFront。 1. CloudFront 會快取物件。 1. 物件會傳回給檢視器。對後續來到相同 CloudFront 節點之物件的請求，會從 CloudFront 快取中提供。 ## 部署解決方案若要部署此安全靜態網站解決方案，您可以選擇下列其中一個選項： + 使用 CloudFormation 主控台部署具有預設內容的解決方案，然後將您的網站內容上傳至 Amazon S3。 + 將解決方案複製到您的電腦，以新增您的網站內容。然後，使用 AWS Command Line Interface (AWS CLI) 部署解決方案。 **注意** 您必須使用美國東部 (維吉尼亞北部) 區域來部署 CloudFormation 範本。 **Topics** + [ ### 先決條件 ](#deploy-website-cloudformation-prerequisites) + [ ### 使用 CloudFormation 主控台 ](#deploy-website-cloudformation-console) + [ ### 在本機複製解決方案 ](#deploy-website-cloudformation-clone) + [ ### 尋找存取日誌 ](#deploy-website-cloudformation-logs) ### 先決條件若要使用此解決方案，您必須具備下列先決條件： + 指向 Amazon Route 53 託管區域的已註冊網域名稱 (例如 example.com)。託管區域必須位於您部署此解決方案的相同 AWS 帳戶中。如果您沒有已註冊的網域名稱，可以使用 [Route 53 註冊一個網域名稱](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/registrar.html)。如果您有已註冊的網域名稱，但未指向 Route 53 託管區域，請[將 Route 53 配置為您的 DNS 服務](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/dns-configuring.html)。 + AWS Identity and Access Management (IAM) 啟動 CloudFormation 範本以建立 IAM 角色的許可，以及建立解決方案中所有 AWS 資源的許可。如需詳細資訊，請參閱《*AWS CloudFormation 使用者指南*》中的[使用 AWS Identity and Access Management控制存取權限](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/using-iam-template.html)。您必須自行負責使用此解決方案時所產生的費用。如需成本的詳細資訊，請參閱[每個的定價頁面 AWS 服務](https://aws.amazon.com/pricing/)。 ### 使用 CloudFormation 主控台 **使用 CloudFormation 主控台進行部署** 1. [在 CloudFormation 主控台中啟動此解決方案](https://console.aws.amazon.com/cloudformation/home?region=us-east-1#/stacks/new?stackName=amazon-cloudfront-secure-static-site-templates-main&templateURL=https://s3.amazonaws.com/solution-builders-us-east-1/amazon-cloudfront-secure-static-site/latest/main.yaml)。如有必要，請登入您的 AWS 帳戶。 1. **建立堆疊**精靈會在 CloudFormation 主控台中開啟，其中的預先填入欄位會指定此解決方案 CloudFormation 範本。請選擇頁面最下方的 **Next** (下一頁)。 1. 在 **Specify stack details (指定堆疊詳細資訊)** 頁面上，輸入下列欄位的數值： + **SubDomain** – 輸入為您網站所用的子網域名稱。例如，如果子網域名稱為 *www*，表示您的網站可以在 *www*.example.com 使用。(請將 example.com 取代為您的網域名稱，如下列項目符號所述)。 + **DomainName** – 輸入您的網域名稱，例如 *example.com*。此網域必須指向 Route 53 託管區域。 + **HostedZoneId**：網域名稱的 Route 53 託管區域 ID。 + **CreateApex**：(選用) 在 CloudFront 組態中建立網域頂點的別名 (example.com)。 1. 完成時，請選擇 **Next (下一步)**。 1. (選用) 在 **配置堆疊選項**頁面上，[新增標籤和其他堆疊選項](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/cfn-console-add-tags.html)。 1. 完成時，請選擇 **Next (下一步)**。 1. 在 **Review (檢閱)** 頁面上，捲動至頁面底部，然後選取 **Capabilities (功能)** 區段中的兩個方塊。這些功能允許 CloudFormation 建立 IAM 角色，以允許存取堆疊的資源，並以動態方式命名資源。 1. 選擇 **Create Stack (建立堆疊)**。 1. 等待堆疊完成建立。堆疊會建立一些巢狀堆疊，而且可能需要幾分鐘才能完成。完成時，**Status (狀態)** 會變更為 **CREATE\$1COMPLETE**。當狀態為 **CREATE\$1COMPLETE** 時，請前往 https://*www.example.com* 檢視您的網站 (將 www.example.com 取代為您在步驟 3 中指定的子網域和網域名稱)。您應該會看到網站的預設內容： ![\[此解決方案的靜態網站預設內容。它指出：「我是一個靜態網站！」\]](http://docs.aws.amazon.com/zh_tw/AmazonCloudFront/latest/DeveloperGuide/images/cloudfront-secure-static-website-content.png) **將網站的預設內容取代為您自己的內容** 1. 在以下網址開啟 Amazon S3 主控台：[https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/)。 1. 選擇名稱以 **amazon-cloudfront-secure-static-site-s3bucketroot-** 開頭的儲存貯體。 **注意** 確定選擇名稱中包含 **s3bucketroot** 的儲存貯體，而不是 **s3bucketlog**。名稱中含有 **s3bucketroot** 儲存貯體包含網站內容。帶有 **s3bucketlog** 儲存貯體只包含日誌檔案。 1. 刪除網站的預設內容，然後上傳您自己的內容。 **注意** 如果您使用此解決方案的預設內容檢視您的網站，則某些預設內容可能會快取在 CloudFront 節點。若要確保檢視器能看到您更新的網站內容，請使檔案*失效*，以便從 CloudFront 節點移除快取的複本。如需詳細資訊，請參閱[使檔案失效以移除內容](Invalidation.md)。 ### 在本機複製解決方案 **先決條件** 要在部署此解決方案之前新增您的網站內容，您必須在本機封裝解決方案的成品，這需要 Node.js 和 npm。如需更多詳細資訊，請參閱 [https://www.npmjs.com/get-npm](https://www.npmjs.com/get-npm)。 **新增您的網站內容並部署解決方案** 1. 從複製或下載解決方案[https://github.com/aws-samples/amazon-cloudfront-secure-static-site](https://github.com/aws-samples/amazon-cloudfront-secure-static-site) 複製或下載之後，請開啟命令提示字元或終端機，然後瀏覽至 `amazon-cloudfront-secure-static-site` 資料夾。 1. 執行下列命令以安裝並封裝解決方案的成品： ``` make package-static ``` 1. 將網站的內容複製到 `www` 資料夾中，覆寫預設的網站內容。 1. 執行下列 AWS CLI 命令來建立 Amazon S3 儲存貯體，以存放解決方案的成品。用您自己的儲存貯體名稱取代 *amzn-s3-demo-bucket-for-artifacts*。 ``` aws s3 mb s3://amzn-s3-demo-bucket-for-artifacts --region us-east-1 ``` 1. 執行下列 AWS CLI 命令，將解決方案的成品封裝為 CloudFormation 範本。以您在上一個步驟中建立的儲存貯體名稱取代 *amzn-s3-demo-bucket-for-artifacts*。 ``` aws cloudformation package \ --region us-east-1 \ --template-file templates/main.yaml \ --s3-bucket amzn-s3-demo-bucket-for-artifacts \ --output-template-file packaged.template ``` 1. 執行下列命令以使用 CloudFormation 部署解決方案，並取代下列值： + *your-CloudFormation-stack-name*：以 CloudFormation 堆疊的名稱取代。 + *example.com* – 取代為您的網域名稱。此網域必須指向相同 AWS 帳戶中的 Route 53 託管區域。 + *www* – 取代為您的網站所使用的子網域名稱。例如，如果子網域名稱為 *www*，表示您的網站可以在 www.example.com 使用。 + *hosted-zone-ID*：取代為您網域名稱的 Route 53 託管區域 ID。 ``` 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 HostedZoneId=hosted-zone-ID ``` 1. (選用) 若要使用網域頂點部署堆疊，請改為執行下列命令。 ``` aws --region us-east-1 cloudformation deploy \ --stack-name your-CloudFormation-stack-name \ --template-file packaged.template \ --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \ --parameter-overrides DomainName=example.com SubDomain=www HostedZoneId=hosted-zone-ID CreateApex=yes ``` 1. 等待 CloudFormation 堆疊完成建立。堆疊會建立一些巢狀堆疊，而且可能需要幾分鐘才能完成。完成時，**Status (狀態)** 會變更為 **CREATE\$1COMPLETE**。當狀態變更為 **CREATE\$1COMPLETE** 時，請前往 https://www.example.com 檢視您的網站 (將 www.example.com 取代為您在上一個步驟中指定的子網域和網域名稱)。您應該會看到您網站的內容。 ### 尋找存取日誌此解決方案會啟用 CloudFront 分佈的[存取日誌](AccessLogs.md)。請完成以下步驟來尋找分佈的存取日誌。 **尋找分佈的存取日誌** 1. 在以下網址開啟 Amazon S3 主控台：[https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/)。 1. 選擇名稱以 **amazon-cloudfront-secure-static-site-s3bucketlogs-** 開頭的儲存貯體。 **注意** 確定選擇名稱中包含 **s3bucketlogs** 的儲存貯體，而不是 **s3bucketroot**。名稱中含有 **s3bucketlog** 的儲存貯體包含日誌檔案。帶有 **s3bucketroot** 的儲存貯體包含網站內容。 1. 名為 **cdn** 的資料夾包含 CloudFront 存取記錄。