在本單元中，您將設定 AWS Amplify 以託管內建持續部署功能的 Web 應用程式的靜態資源。Amplify 主控台提供以 git 為基礎的工作流程，適用於持續部署及託管完整堆疊 Web 應用程式。在後續單元中，您會將動態功能新增至這些頁面，方法為使用 JavaScript，來呼叫使用 AWS Lambda 和 Amazon API Gateway 建置的遠端 RESTful API。
本單元的架構非常簡單。您的所有靜態 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 管理主控台右上角的下拉式清單中選取您的區域。
(按一下以放大)
-
步驟 2：建立 Git 儲存庫
您可以使用兩個選項來管理本單元的來源程式碼：AWS CodeCommit (包含在 AWS 免費方案中) 或 GitHub。在本教學中，我們將使用 CodeCommit 來存放我們的應用程式程式碼，但您可以透過在 GitHub 上建立儲存庫來執行相同的操作。
a.開啟 AWS CodeCommit 主控台
b.選取建立儲存庫
c.將儲存庫名稱*設定為 "wildrydes-site"
d.選取建立
e.現在已建立儲存庫，請遵循以下指示在 IAM 主控台中設定具有 Git 登入資料的 IAM 使用者。
f.返回 CodeCommit 主控台，從複製 URL 下拉式清單中，選取「複製 HTTPS」
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 ./ --recursiveb.將檔案提交至您的 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.從下拉式清單中選取剛剛建立的儲存庫和分支
e.在「進行建置設定」頁面上，保留所有預設值，然後選取下一步。
f.在「審查」頁面上，選取儲存並部署
g.Amplify 主控台需要花費幾分鐘時間，來建立必要的資源並部署程式碼。
完成後，按一下站點影像以啟動 Wild Rydes 站點。
如果按一下主要連結，您會看到與分支相關的建置和部署詳細資訊，以及各種裝置上應用程式的螢幕擷取畫面：
-
步驟 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 網站並註意標題變更。
-
回顧
在本單元中，您建立了靜態網站，這將成為我們 Wild Rydes 業務的基礎。藉助 AWS Amplify 主控台，遵循持續整合和交付模型來部署靜態網站真的非常容易。它能夠「建置」更複雜、採用 Javascript 框架的應用程式，並且並具有分支部署、輕鬆自訂網域設定、即時部署和密碼保護等功能。
