AWS 上的專案：

使用 AWS Lambda、Amazon API Gateway、Amazon S3、Amazon DynamoDB 和 Amazon Cognito

來建置無伺服器 Web 應用程式

簡介

託管靜態網站

管理使用者

建置無伺服器後端

部署 RESTful API

終止資源

單元 1.靜態 Web 託管

在本單元中，您將設定 Amazon Simple Storage Service (S3)，以託管 Web 應用程式的靜態資源。在後續單元中，您會將動態功能新增至這些頁面，方法為使用 JavaScript，來呼叫使用 AWS Lambda 和 Amazon API Gateway 建置的遠端 RESTful API。

架構概觀

本單元的架構非常簡單。您的所有靜態 Web 內容 (包括 HTML、CSS、JavaScript、映像和其他檔案) 將存放在 Amazon S3 中。然後，您的最終使用者將使用 Amazon S3 公開的公有網站 URL，來存取您的網站。您不需要執行任何 Web 伺服器或使用其他服務，即可讓您的網站可供使用。

鑒於本單元的目的，您將使用我們提供的 Amazon S3 網站端點 URL。其採用的格式為 http://{your-bucket-name}.s3-website.{region}.amazonaws.com。對於大部分真正的應用程式，您將使用自訂網域來託管您的網站。如果您有興趣使用自己的網域，請遵循 Amazon S3 文件中使用自訂網域設定靜態網站的指示。

完成單元的時間：30 分鐘

使用的服務：Amazon S3

CloudFormation 範本：如果您已滿意使用 Amazon S3，或只想要跳過以使用 Lambda 和 API Gateway，則可以在您選擇的區域中啟動其中一個 AWS CloudFormation 範本，來自動建置必要資源。

區域 CloudFormation 範本
美國東部 (維吉尼亞北部) 啟動堆疊 >
美國東部 (俄亥俄) 啟動堆疊 >
美國西部 (奧勒岡) 啟動堆疊 >
歐洲 (法蘭克福) 啟動堆疊 >
歐洲 (愛爾蘭) 啟動堆疊 >
歐洲 (倫敦) 啟動堆疊 >
亞太區域 (東京) 啟動堆疊 >
亞太區域 (首爾) 啟動堆疊 >
亞太區域 (雪梨) 啟動堆疊 >
亞太區域 (孟買) 啟動堆疊 >

CloudFormation 啟動指示

  1. 按一下上面適用於您所選區域的 Launch Stack (啟動堆疊) 連結。

  2. 在 Select Template (選取範本) 頁面上，按一下 Next (下一步)。

  3. 為 Website Bucket Name (網站儲存貯體名稱) 提供全域唯一名稱，例如 wildrydes-yourname，然後按一下 Next (下一步)。

  4. 在 Options (選項) 頁面上，保留所有預設值，然後按一下 Next (下一步)。

  5. 在 Review (檢閱) 頁面上，勾選方塊來確認 CloudFormation 將會建立 IAM 資源，然後按一下 Create (建立)。

    此範本會使用自訂資源，將靜態網站資產從中央 S3 儲存貯體複製至您自己的專用儲存貯體。為了讓自訂資源寫入至您帳戶的新儲存貯體，它必須建立 IAM 角色且假設其可以具有那些許可。

  6. 等待 wildrydes-webapp-1 堆疊的狀態變更為 CREATE_COMPLETE。

  7. 在選取 wildrydes-webapp-1 堆疊後，按一下 Outputs (輸出) 索引標籤，然後按一下 WebsiteURL 連結。

  8. 確認適當地載入 Wild Rydes 首頁，並移至下一個單元 (使用者管理)。

實作說明

請遵循下方的逐步指示來託管靜態網站。按一下每一個步驟號碼來展開區段。

  • 步驟 1.選取區域

    選取區域

    任何 AWS 區域若支援此應用程式中使用的所有服務，其中包括 Amazon Cognito、AWS Lambda、Amazon API Gateway、Amazon S3 和 Amazon DynamoDB，則此 Web 應用程式便可部署在其中。

    您可以參閱區域表，以查看哪些區域具有支援的服務。您可以選擇的支援區域如下：

    • 美國東部 (維吉尼亞北部)
    • 美國東部 (俄亥俄)
    • 美國西部 (奧勒岡)
    • 歐洲 (法蘭克福)
    • 歐洲 (愛爾蘭)
    • 歐洲 (倫敦)
    • 亞太區域 (東京)
    • 亞太區域 (首爾)
    • 亞太區域 (雪梨)
    • 亞太區域 (孟買)

     

    請從 AWS 管理主控台右上角的下拉式清單中選取您的區域。

    (按一下以放大)

  • 步驟 2.建立 S3 儲存貯體

    建立 S3 儲存貯體

    無需設定或管理任何 Web 伺服器，Amazon S3 即可用來託管靜態網站。在此步驟中，您將建立新的 S3 儲存貯體，其會用來託管 Web 應用程式的所有靜態資產 (例如 HTML、CSS、JavaScript 和映像檔)。 

    在此步驟中，您將使用主控台或 AWS CLI，來建立 Amazon S3 儲存貯體。請謹記您的儲存貯體名稱必須為全域唯一的。我們建議使用如 wildrydes-firstname-lastname 之類的名稱。 如果發生您的儲存貯體名稱已存在的錯誤，請嘗試新增額外的數字或字元，直到您找到未用過的名稱。

    1. 在 AWS 管理主控台中，選擇 Services (服務)，然後在儲存下選取 S3。
    2. 選擇 +Create Bucket (+建立儲存貯體)
    3. 為您的儲存貯體提供全域唯一名稱，例如 wildrydes-firstname-lastname​。 如果發生您的儲存貯體名稱已存在的錯誤，請嘗試新增額外的數字或字元，直到您找到未用過的名稱。
    4. 從下拉式清單中，選取您已選擇要用於此講座的區域。
    5. 選擇對話方塊左下方的 Create (建立)，而無需選取要從中複製設定的儲存貯體。

  • 步驟 3.上傳內容

    上傳內容

    在此步驟中，您會將本單元的網站資產上傳至 S3 儲存貯體。您可以使用 AWS 管理主控台 (需要 Google Chrome 瀏覽器)、AWS CLI，或提供的 CloudFormation 範本，來完成此步驟。如果您已在本機上安裝和設定 AWS CLI，我們建議使用該方法。否則，如果您已安裝最新版的 Google Chrome，請使用主控台。 

    主控台逐步指示

    若要透過 AWS 管理主控台上傳本機目錄中的所有檔案和子目錄，您必須使用最新版的 Chrome Web 瀏覽器。如果無法使用 Chrome，請遵循 AWS CLI 或所提供之 CloudFormation 範本的使用指示。

    1. 使用此連結下載此儲存庫的封存檔：

    2. 在本機電腦上，將您下載的封存檔解壓縮。

    3. 在 Chrome 中開啟 AWS 管理主控台。選擇服務，然後在儲存下選取 S3。

    4. 選取您在前一個步驟中建立的儲存貯體，並確定您正在檢視概觀索引標籤。

    5. 開啟 Windows 檔案管理員或 macOS Finder，並瀏覽至您在第一個步驟中下載之 zip 檔的已展開內容。

    6. 瀏覽至本機上的 WebApplication/1_StaticWebHosting/website 目錄。

    7. 選取 website 目錄下的所有檔案和子目錄。確定未選取 website 目錄本身。

    8. 將選取的檔案從本機檔案系統拖放至 S3 主控台中概觀索引標籤下的內容。

    9. 在出現的對話方塊左下方，選擇上傳。

    10. 等待上傳完成，並確定您看到 website 目錄的內容列示在 S3 主控台中。如果只看到單一 website 目錄，則您應該從儲存貯體中刪除它，然後再次遵循這些指示，確定您只選取目錄的內容，然後再拖放至 S3 主控台。

    CLI 逐步指示

    如果已安裝並設定 CLI，則您可以使用它，將必要的 Web 資產從 s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website 複製到您的儲存貯體。

    1. 執行下列命令，確定將 YOUR_BUCKET_NAME 取代為您在前一個區段中使用的名稱，並將 YOUR_BUCKET_REGION 取代為您已在其中建立儲存貯體的區域碼 (例如 us-east-2)。

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://YOUR_BUCKET_NAME --region YOUR_BUCKET_REGION

    2. 如果此命令成功，則您應該看到一個清單，列出已複製到儲存貯體的物件。

     

    CloudFormation 逐步指示

    如果無法使用先前的任一方法，則您可以啟動所提供的 CloudFormation 範本，以將必要資產複製至 S3 儲存貯體。啟動 CloudFormation 範本的方式為選取一個區域，然後按一下本單元的 CloudFormation 範本區段中的 Launch stack (啟動堆疊) 連結。

  • 步驟 4.新增儲存貯體政策以允許公有讀取

    新增儲存貯體政策以允許公有讀取

    您可以使用儲存貯體政策，來定義誰可以存取 S3 儲存貯體中的內容。儲存貯體政策是 JSON 文件，其會指定允許哪些委託人可以針對儲存貯體中的物件執行各種動作。

    在此步驟中，您會將儲存貯體政策新增至新的 Amazon S3 儲存貯體，以讓匿名使用者可以存取您的網站。根據預設，只有通過驗證並可存取您 AWS 帳戶的使用者才能存取您的儲存貯體。

    請參閱此政策範例，其會將唯讀存取權授與匿名使用者。此範例政策允許網際網路上的任何人都可檢視您的內容。更新儲存貯體政策的最簡單方式便是使用主控台。選取儲存貯體、選擇 permission (許可) 索引標籤，然後選取 Bucket Policy (儲存貯體政策)。

    1. 在 S3 主控台中，選取您已在區段 1 建立的儲存貯體名稱。
    2. 選擇許可索引標籤，然後選擇儲存貯體政策。
      1. 在 S3 主控台中，選取您已在區段 1 建立的儲存貯體名稱。
      2. 選擇許可索引標籤，然後確保已選取「公有存取設定」。
      3. 按一下編輯並取消選取：
        • 「封鎖新公有儲存貯體政策」
        • 「如果儲存貯體有公有政策，則封鎖公有和跨帳戶存取」
      4. 按一下儲存。
      5. 在出現的確認強制回應中，輸入「確認」，然後按一下確認。 
      6. 仍在許可索引標籤選擇儲存貯體政策。  
    3. 將下列政策文件輸入至儲存貯體政策編輯器，同時將 [YOUR_BUCKET_NAME] 取代為您已在區段 1 建立的儲存貯體名稱：
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
        } 
    ] 
}
    1. 選擇 Save (儲存) 以套用新政策。

  • 步驟 5.啟用網站託管

    啟用網站託管

    根據預設，可透過結構為 http://.amazonaws.com// 的 URL 取得 S3 儲存貯體中的物件。若要從根 URL (例如 /index.html) 提供資產，您將需要啟用儲存貯體上託管的網站。如此一來，您的物件就能在儲存貯體之 AWS 區域專用的網站端點中使用：.s3-website-.amazonaws.com。

    您也可以針對網站使用自訂網域。例如 http://www.wildrydes.com 託管於 S3。設定自訂網域並未涵蓋在此講座中，但您可以在我們的文件中找到詳細指示。

    在此步驟中，您將使用主控台來啟用靜態網站託管。在選取了儲存貯體之後，您也可以在 Properties (屬性) 索引標籤上執行此動作。將 index.html 設為索引文件，並將錯誤文件保留空白。如需詳細資訊，請參閱設定靜態網站的儲存貯體的相關文件。

    1. 從 S3 主控台中的儲存貯體詳細資訊頁面中，選擇 Properties (屬性)。
    2. 選擇 Static website hosting (靜態網站託管) 卡片。
    3. 選取 Use this bucket to host a website (使用此儲存貯體來託管網站)，並輸入 index.html 做為索引文件。將其他欄位保留空白。
    4. 在選擇 Save (儲存) 之前，請記下對話方塊頂部的端點 URL。您將在講座的其餘部分使用此 URL 來檢視 Web 應用程式。從這裡開始，此 URL 將稱之為網站的基本 URL。
    5. 按一下 Save (儲存) 以儲存變更。

  • 步驟 6.驗證您的實作

    驗證您的實作

    在完成這些實作步驟之後，您應該能夠透過造訪 S3 儲存貯體的網站端點 URL，來存取靜態網站。

    在您選擇的瀏覽器中，造訪網站的基本 URL (這是您在前一個區段中記下的 URL)。您應該會看到顯示 Wild Rydes 首頁。如果您需要查閱基本 URL，請造訪 S3 主控台、選取您的儲存貯體，然後按一下 Properties (屬性) 索引標籤上的 Static Web Hosting (靜態 Web 託管)。

    如果頁面正確地呈現 (請看下方以取得範例螢幕擷取畫面)，則您可以移至下一個單元 (使用者管理)。

下一個：管理使用者