在本單元中,您將設定 AWS Amplify 以託管內建持續部署功能的 Web 應用程式的靜態資源。Amplify 主控台提供以 git 為基礎的工作流程,適用於持續部署及託管完整堆疊 Web 應用程式。在後續單元中,您會將動態功能新增至這些頁面,方法為使用 JavaScript,來呼叫使用 AWS Lambda 和 Amazon API Gateway 建置的遠端 RESTful API。

Amplify_Wild_Rydes

本單元的架構非常簡單。您的所有靜態 Web 內容 (包括 HTML、CSS、JavaScript、映像和其他檔案) 將透過 AWS Amplify 主控台進行管理。然後,您的最終使用者將使用 AWS Amplify 主控台的公有網站 URL,來存取您的網站。您不需要執行任何 Web 伺服器或使用其他服務,即可讓您的網站可供使用。

對於大部分真正的應用程式,您將使用自訂網域來託管您的網站。如果您有興趣使用自己的網域,請遵循在 Amplify 上設定自訂網域的指示

完成單元的時間:15 分鐘

使用的服務︰AWS Amplify


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

  • 步驟 1.選取區域


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

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

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

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

    region

    (按一下以放大)

    region
  • 步驟 2:建立 Git 儲存庫

    您可以使用兩個選項來管理本單元的來源程式碼:AWS CodeCommit (包含在 AWS 免費方案中) 或 GitHub。在本教學中,我們將使用 CodeCommit 來存放我們的應用程式程式碼,但您可以透過在 GitHub 上建立儲存庫來執行相同的操作。

    a.開啟 AWS CodeCommit 主控台
    b.選取建立儲存庫
    c.將儲存庫名稱*設定為 "wildrydes-site"
    d.選取建立
    e.現在已建立儲存庫,請遵循以下指示在 IAM 主控台中設定具有 Git 登入資料的 IAM 使用者。
    f.返回 CodeCommit 主控台,從複製 URL 下拉式清單中,選取「複製 HTTPS」

    wildrydes_clone

    g.在終端機視窗中,執行 git 複製和儲存庫的 HTTPS URL:

    $ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
    複製到 'wildrydes-site'...
    Username for 'https://git-codecommit.us-east-1.amazonaws.com':XXXXXXXXXX
    'USERID' 的密碼:XXXXXXXXXXXX
    警告:您似乎複製了一個空的儲存庫。

  • 步驟 3:填充 Git 儲存庫

    使用 AWS CodeCommit 或 GitHub.com 建立 git 儲存庫並在本機複製之後,您需要從關聯此研討會的現有公開可存取 S3 儲存貯體中復製網站內容,並將其新增至儲存庫中。

    a.將目錄變更為您的儲存庫,然後從 S3 複製靜態檔案:
    cd wildrydes-site/
    aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive

    b.將檔案提交至您的 Git 服務
    $ git add .
    $ git push

    計數物件:完成 95 個。
    壓縮物件:完成 100% (94/94)。
    寫入物件:完成 100% (95/95)、9.44 MiB | 14.87 MiB/s。
    總計 95 個 (Δ 2)、重新使用 0 (Δ 0)
    To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
    * [新分支] 主要 -> 主要

  • 步驟 4:使用 AWS Amplify 主控台啟用 Web 託管

    接下來,您將使用 AWS Amplify 主控台來部署剛提交至 git 的網站。Amplify 主控台負責設定存放靜態 Web 應用程式程式碼的位置,並提供許多實用功能來簡化該應用程式的生命週期,以及啟用最佳實務。


    a.啟動 Amplify 主控台頁面

    b.按一下「使用 Amplify 主控台部署」下的入門

    c.選取今天使用的儲存庫服務供應商,然後選取下一步

    d.如果您使用 GitHub,則需要授權 AWS Amplify 至您的 GitHub 帳戶

    e.從下拉式清單中選取剛剛建立的儲存庫和分支

    wildrydes_clone2

    e.在「進行建置設定」頁面上,保留所有預設值,然後選取下一步

    f.在「審查」頁面上,選取儲存並部署

    g.Amplify 主控台需要花費幾分鐘時間,來建立必要的資源並部署程式碼。

    wildrydes_clone3

    完成後,按一下站點影像以啟動 Wild Rydes 站點。

    wildrydes_clone4

    如果按一下主要連結,您會看到與分支相關的建置和部署詳細資訊,以及各種裝置上應用程式的螢幕擷取畫面:

    wildrydes_clone5
  • 步驟 5:修改您的站點

    若偵測到對已連線儲存庫的變更,AWS Amplify 主控台會重新建置並重新部署該應用程式。變更主頁面以測試此程序。


    a.開啟 `index.html` 頁面並修改標題行,使其顯示為:<title>Wild Rydes - Rydes of the Future!</title>

    b.儲存檔案並再次提交至您的 git 儲存庫。Amplify 主控台注意到儲存庫更新後,會很快再次開始建置站點。操作非常快! 返回 Amplify 主控台頁面以觀看該程序。

    $ git add index.html 
    $ git commit -m "updated title"
    [master dfec2e5] updated title
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    $ git push
    Counting objects: 3, done.
    Compressing objects: 100% (3/3), done.
    Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done.
    Total 3 (delta 2), reused 0 (delta 0)
    remote: processing 
    To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
       2e9f540..dfec2e5  master -> master

    c.完成後,重新開啟 Wild Rydes 網站並註意標題變更。

    wildrydes_clone6
  • 回顧

    在本單元中,您建立了靜態網站,這將成為我們 Wild Rydes 業務的基礎。藉助 AWS Amplify 主控台,遵循持續整合和交付模型來部署靜態網站真的非常容易。它能夠「建置」更複雜、採用 Javascript 框架的應用程式,並且並具有分支部署、輕鬆自訂網域設定、即時部署和密碼保護等功能。