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

Serverless_Web_App_LP_assets-02

本單元的架構非常直覺。包括 HTML、CSS、JavaScript、映像和其他檔案等所有靜態 web 內容,皆會存放於 Amazon S3。接著,最終使用者會使用 Amazon S3 公開的網站 URL 存取您的網站。您無須為了讓網站可供使用,而執行任何 web 服務或使用其他服務。

針對本單元之用途,您會使用我們提供的 Amazon S3 網站終端節點。其採用以下格式: http://{your-bucket-name}.s3-website.{region}.amazonaws.com。針對大部分的實際應用程式,您會想要使用自訂網域來託管網站。若您想要使用專屬網域,請遵循在 Amazon S3 中使用自訂網域設定靜態網站之說明文件的相關指示來操作。

單元完成時間:30 分鐘

使用的服務:Amazon S3

CloudFormation 範本:若您對於使用 Amazon S3 已駕輕就熟,或是想要直接跳過以使用 Lambda 和 API Gateway,可在選擇的「區域」中啟動以下其中一個 AWS CloudFormation 範本,以自動建立必要的資源。

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

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 區域中,部署此 web 應用程式,其包括 Amazon Cognito、AWS Lambda、Amazon API Gateway、Amazon S3 和 Amazon DynamoDB。

    您可參閱區域表,查看具備支援服務的區域。您可以選擇的支援區域如下:

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

     

    從「AWS 管理主控台」右上方的下拉式清單中,選取區域。

    region

    (按一下以放大)

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

    您可使用 Amazon S3 來託管靜態網站,而無須設定或管理任何 web 伺服器。在此步驟中,您會建立一個新的 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 網頁瀏覽器。若您無法使用 Chrome,請遵循關於使用 AWS CLI 或提供之 CloudFormation 範本的指示操作。

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

    2. 將您下載至本機電腦的存檔解壓縮。

    3. 在 Chrome 中開啟「AWS 管理主控台」。選擇「Services (服務)」,然後再於「儲存」下方選取 S3

    4. 選取在先前步驟中建立的儲存貯體,並確認目前正在檢視「Objects (物件)」標籤。

    5. 開啟「Windows 檔案總管」或 macOS Finder,然後瀏覽至在第一個步驟中下載的 ZIP 檔案擴展內容。

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

    7. 選取網站目錄下的所有檔案和子目錄。確認未選取網站目錄本身。

    8. 將選取的檔案從本機檔案系統,拖放至 S3 主控台內「Objects (物件)」標籤下方的內容中。

    9. 在顯示的對話方塊左下方,選擇「Upload (上傳)」。

    10. 靜待完成上傳,並確認顯示 S3 主控台所列網站目錄的內容。若僅顯示單一 網站 目錄,則應從儲存貯體中刪除該目錄,並再次遵循這些指示,確認僅選取目錄的內容再拖放至 S3 主控台。

    CLI 逐步指示

    若您已安裝並設定 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 範本」區段中,選取一個區域並按一下「Launch stack (啟動堆疊)」連結,以啟動 CloudFormation 範本。

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

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

    在此步驟中,您會將儲存貯體政策新增至新的 Amazon S3 儲存貯體,以允許匿名使用者檢視網站。依預設,僅有具備您 AWS 帳戶存取權的驗證使用者,才能存取儲存貯體。

    參閱將唯讀存取權授與匿名使用者的此範例政策。此範例政策允許網際網路上的任何人檢視您的內容。更新儲存貯體政策最簡易的方式,即是使用主控台。選取儲存貯體,選擇許可標籤,然後再選取「Bucket Policy (儲存貯體政策)」。


    1. 在 S3 主控台中,選取您在區段 1 中建立的儲存貯體名稱。
    2. 選擇「許可」標籤,然後選擇「Bucket Policy (儲存貯體政策)」。
    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。本研習營探討內容未涵蓋設定自訂網域,但您可在我們的說明文件中尋找詳細指示。

    在此步驟中,您會使用主控台來啟用靜態網站託管。選取儲存貯體後,您可在「屬性」標籤上執行此動作。將 index.html 設為索引文件,並將錯誤文件留空。如需詳細資訊,請參閱設定用於靜態網站託管的儲存貯體相關說明文件。


    1. 在 S3 主控台的儲存貯體詳細資訊頁面中,選擇「屬性」標籤。
    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 主控台、選取儲存貯體,然後在「屬性」標籤上按一下「Static Web Hosting (靜態 Web 託管)」。

    若頁面正確呈現 (查看下方的範例螢幕擷取畫面),即可繼續進行下一個單元:「使用者管理」。

    wildrydes-homepage