在 Amazon Amplify 上部署 Web 應用程式

入門指南

單元 3:自動化部署

在本單元中,請使用 Amplify 內建的 CI/CD 管道部署 Web 應用程式

簡介

在本單元中,將會把應用程式存放在 GitHub 儲存庫中,接著使用 Amplify 主控台設定持續部署。

您將學到的內容

  • 將 Github 儲存庫連接到 Amplify
  • 使用 Amplify 設定持續部署

 完成時間

5 分鐘

 單元先決條件

  • 有管理員等級存取權限的 AWS 帳戶**
  • 建議的瀏覽器:最新版的 Chrome 或 Firefox

[**]過去 24 小時內建立的帳戶可能尚未有權存取本教學課程所需的服務。

實作

在 GitHub 上存放專案

在將專案設定為自動部署更新前,需要託管在某處。在本指南中,假設您熟悉 GitHub,擁有帳戶,並且了解如何建立新的私有儲存庫。請建立私有儲存庫,並將目前建立的程式碼推入儲存庫中。

設定持續部署

若要配置 Amplify 以部署您的程式碼,需要與 GitHub 帳戶連接。這會透過 AWS 主控台完成,因為它需要產生 GitHub 權杖以存取私有儲存庫,並存放在 AWS 帳戶中。若要這麼做,請從 amplify-app 目錄執行 amplify 新增託管。Amplify 將會顯示有關託管的問題列表,請選取下列顯示的選項:

amplify add hosting

? Select the plugin module to execute (Use arrow keys)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
  Amazon CloudFront and S3
? Choose a type
❯ Continuous deployment (Git-based deployments)
  Manual deployment
  Learn more

這會啟動瀏覽器中的新視窗,並開啟 Amplify 主控台以在專案上配置託管。在 Amplify 主控台上的應用程式頁面,按一下 Frontend environments (前端環境) 索引標籤,選取 GitHub 再按一下 Connect branch (連接子目錄) 按鈕。

gsg-build-amplify-4.png

這會將您重新引導至 GitHub。現在 Amplify 主控台有 GitHub 帳戶的存取權限,所以它可以部署您託管在該處的原始碼。若要這麼做,請按一下綠色的 Authorize aws-amplify-console (授權 aws-amplify-console) 按鈕。

gsg-build-amplify-5

現在 GitHub 儲存庫會連接到 Amplify 應用程式。在「新增儲存庫子目錄」頁面上,選取 amplify-web-app 儲存庫及 main (主要) 子目錄。然後按一下 Next (下一步)。

gsg-build-amplify-6

下一步是配置應用程式的建置設定。您將需要 IAM 服務角色,允許 Amplify 存取帳戶內的 AWS 資源,以進行自動部署。在「配置建置設定」頁面上,按一下藍色方塊內的 Create new role (建立新角色)。

gsg-build-amplify-7

IAM 主控台會在新的索引標籤上開啟,並填入必要的數值,請按一下 Create Role (建立角色):

  • 信任的實體類型:AWS 服務
  • 服務:Amplify
  • 使用案例:Amplify - 後端部署
  • 許可政策:AdministratorAccess-Amplify
gsg-build-amplify-8

建立後,就可以關閉瀏覽器中的該索引標籤,返回「配置建置設定」頁面,按一下「重新整理現有角色」後,在下拉式功能表中選取剛建立的角色。接著,從「環境」下拉式功能表中選取 dev,這是執行 amplify init 後,在專案上配置 Amplify 時建立的環境。

將剩餘的設定保留預設值,並按一下 Next (下一步)。

gsg-build-amplify-9

檢閱配置的數值,並按一下 Save and deploy (儲存並部署)。Amplify 會開始在來源儲存庫變更時,自動部署您的 React 應用程式。

gsg-build-amplify-10

現在可以返回終端,按一下 enter 追蹤進度:

? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository
Amplify hosting urls:
┌──────────────┬────────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                     │
├──────────────┼────────────────────────────────────────────┤
│ main         │ https://main.d339jiqv9kzj2m.amplifyapp.com │
└──────────────┴────────────────────────────────────────────┘

完成部署後,將會以實際 URL 形式開放,而任何人都可以透過此 URL 存取應用程式。

結論

在本單元中,您了解如何連接私有 GitHub 儲存庫與 Web 應用程式的程式碼,利用 Amplify 設定自動部署。在下一單元中,您將會了解如何刪除已部署的應用程式,以及為此建立的所有 AWS 資源。

下一步:清理資源

讓我們知道我們表現如何。

感謝您的意見回饋
我們很高興此頁面對您有所幫助。您願意分享更多詳細資訊以協助我們繼續改進嗎?
關閉
感謝您的意見回饋
很抱歉此頁面沒有幫助到您。您願意分享更多詳細資訊以協助我們繼續改進嗎?
關閉