從AWS CodeCommit 儲存庫持續部署現代 AWS Amplify Web 應用程式 - AWS 方案指引

本文為英文版的機器翻譯版本,如內容有任何歧義或不一致之處,概以英文版為準。

從AWS CodeCommit 儲存庫持續部署現代 AWS Amplify Web 應用程式

由 Deekshitulu Pentakota (AWS) 和 Sai Katakam (AWS) 建立

環境:PoC 或試行

技術:Web 和行動應用程式 DevOps;現代化

AWS 服務:AWSAmplify; AWS CodeCommit

Summary

請注意:AWS CodeCommit 不再提供給新客戶。的現有客戶AWS CodeCommit 可以繼續正常使用服務。進一步了解

現代 Web 應用程式是以單頁應用程式 (SPAs) 形式建構,將所有應用程式元件封裝為靜態檔案。透過使用 AWS Amplify Hosting,您可以建置持續整合和持續部署 (CI/CD) 管道,以建置、部署和託管在 Git 型儲存庫中管理的現代 Web 應用程式。當您將 Amplify Hosting 連線至程式碼儲存庫時,每個遞交都會啟動單一工作流程,以部署應用程式前端和後端。這種方法的好處是 Web 應用程式只會在部署成功完成之後更新,這可防止前端和後端之間發生不一致。

在此模式中,您可以使用AWS CodeCommit 儲存庫來管理現代 Web 應用程式。這些指示中的範例 Web 應用程式使用 React SPA架構。不過,Amplify Hosting 支援許多其他SPA架構,例如 Angular、Vue、Next.js,也支援單一站台產生器,例如 Gatsby、Hugo 和 Jekyll。

此模式適用於具有下列服務和概念經驗的AWS建置者:

  • AWS CodeCommit

  • AWS Amplify 託管

  • 反應

  • JavaScript

  • Node.js

  • npm

  • Git

先決條件和限制

先決條件

限制

  • 此模式不會討論 Amplify 應用程式的後端開發和整合,例如 API、身分驗證或資料庫。如需後端的詳細資訊,請參閱 Amplify 文件中的建立後端

產品版本

  • AWS CLI 2.0 版

  • Node.js 16.x 版或更新版本

架構

目標技術堆疊

  • AWS CodeCommit包含 React 的儲存庫 SPA

  • AWS Amplify Hosting 工作流程

目標架構

使用 AWS Amplify 從 CodeCommit 儲存庫部署 Web 應用程式和託管的架構圖

工具

AWS 服務

  • AWS Amplify Hosting 提供以 Git 為基礎的工作流程,以持續部署來託管全堆疊無伺服器 Web 應用程式。

  • AWS CodeCommit 是一種版本控制服務,可協助您私有儲存和管理 Git 儲存庫,而無需管理您自己的來源控制系統。

  • AWS Identity and Access Management (IAM) 透過控制誰經過身分驗證並獲授權使用,協助您安全地管理對AWS資源的存取。

其他工具

  • Node.js 是一種事件驅動的 JavaScript 執行期環境,專為建置可擴展的網路應用程式而設計。

  • npm 是在 Node.js 環境中執行的軟體登錄檔,用於共用或借用套件和管理私有套件的部署。

史詩

任務描述所需的技能

建立 儲存庫。

如需指示,請參閱 CodeCommit 文件中的建立AWS CodeCommit 儲存庫

AWS DevOps

複製儲存庫。

如需指示,請參閱在 CodeCommit 文件中複製儲存 CodeCommit 庫以連線至儲存庫。如果出現提示,請提供 Git 憑證。

應用程式開發人員
任務描述所需的技能

建立新的 React 應用程式。

  1. 輸入下列命令以導覽至複製的儲存庫。<repo name> 以您的 CodeCommit 儲存庫名稱取代 。

    $ cd <repo name>
  2. 輸入下列命令,在複製的儲存庫中建立新的 React 應用程式。

    $ npx create-react-app .
  3. 為應用程式編碼,然後輸入下列命令以啟動應用程式。

    $ npm start

如需建立自訂 React 應用程式的詳細資訊,請參閱建立 React 應用程式文件中的建立 React 應用程式說明。您也可以遵循 Amplify 文件中部署前端的指示,將 React 應用程式範例部署至 Amplify 帳戶。

應用程式開發人員

建立分支並推送程式碼。

  1. 輸入下列命令以在本機建立新分支,其中 <branch> 是您要指派給新分支的名稱。

    $ git checkout -b <branch>
  2. 輸入下列命令,將分支推送到 CodeCommit 儲存庫,其中 <branch>是您在上一個步驟中指派的名稱。如需詳細資訊,請參閱使用遞交

    $ git push --set-upstream origin <branch>
應用程式開發人員
任務描述所需的技能

將 Amplify 連接至儲存庫。

如需指示,請參閱 Amplify Hosting 文件中的連接儲存庫。選取您先前建立AWS CodeCommit 的儲存庫和分支。

應用程式開發人員

定義前端建置設定。

如需指示,請參閱 Amplify Hosting 文件中的確認前端的建置設定。接受預設值或輸入以下內容。

Build settings: version: 0.1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: build files: - '**/*' cache: paths: - node_modules/**/*
應用程式開發人員

檢閱和部署。

如需指示,請參閱 Amplify Hosting 文件中的儲存和部署。等待部署程序完成。

應用程式開發人員
任務描述所需的技能

確認初始部署。

當部署程序完成時,在網域 下,選擇連結。驗證應用程式是否如預期般運作。

應用程式開發人員

將變更推送至程式碼儲存庫。

編輯本機工作站上的程式碼,並將變更推送至 CodeCommit 儲存庫。Amplify Hosting 會偵測儲存庫中的變更,並自動啟動建置和部署程序。確認應用程式更新會顯示在網域上。

應用程式開發人員

相關資源

AWS CodeCommit 文件

AWS Amplify Hosting 文件

React 資源