本文為英文版的機器翻譯版本,如內容有任何歧義或不一致之處,概以英文版為準。
從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
先決條件和限制
先決條件
作用中的 AWS 帳戶。
在 Amplify 和 中建立資源的許可 CodeCommit。如需詳細資訊,請參閱適用於 Amplify 的 Identity and Access Management 和適用於 的 Identity and Access ManagementAWS CodeCommit。
文字編輯器或程式碼編輯器。
CodeCommit,使用 Git 憑證 為HTTPS使用者設定 。
Amplify IAM的服務角色。
npm 和 Node.js,已安裝
(npm 文件)。
限制
此模式不會討論 Amplify 應用程式的後端開發和整合,例如 API、身分驗證或資料庫。如需後端的詳細資訊,請參閱 Amplify 文件中的建立後端。
產品版本
AWS CLI 2.0 版
Node.js 16.x 版或更新版本
架構
目標技術堆疊
AWS CodeCommit包含 React 的儲存庫 SPA
AWS Amplify Hosting 工作流程
目標架構
工具
AWS 服務
AWS Amplify Hosting 提供以 Git 為基礎的工作流程,以持續部署來託管全堆疊無伺服器 Web 應用程式。
AWS CodeCommit 是一種版本控制服務,可協助您私有儲存和管理 Git 儲存庫,而無需管理您自己的來源控制系統。
AWS Identity and Access Management (IAM) 透過控制誰經過身分驗證並獲授權使用,協助您安全地管理對AWS資源的存取。
其他工具
史詩
任務 | 描述 | 所需的技能 |
---|---|---|
建立 儲存庫。 | 如需指示,請參閱 CodeCommit 文件中的建立AWS CodeCommit 儲存庫。 | AWS DevOps |
複製儲存庫。 | 如需指示,請參閱在 CodeCommit 文件中複製儲存 CodeCommit 庫以連線至儲存庫。如果出現提示,請提供 Git 憑證。 | 應用程式開發人員 |
任務 | 描述 | 所需的技能 |
---|---|---|
建立新的 React 應用程式。 |
如需建立自訂 React 應用程式的詳細資訊,請參閱建立 React 應用程式 | 應用程式開發人員 |
建立分支並推送程式碼。 |
| 應用程式開發人員 |
任務 | 描述 | 所需的技能 |
---|---|---|
將 Amplify 連接至儲存庫。 | 如需指示,請參閱 Amplify Hosting 文件中的連接儲存庫。選取您先前建立AWS CodeCommit 的儲存庫和分支。 | 應用程式開發人員 |
定義前端建置設定。 | 如需指示,請參閱 Amplify Hosting 文件中的確認前端的建置設定。接受預設值或輸入以下內容。
| 應用程式開發人員 |
檢閱和部署。 | 如需指示,請參閱 Amplify Hosting 文件中的儲存和部署。等待部署程序完成。 | 應用程式開發人員 |
任務 | 描述 | 所需的技能 |
---|---|---|
確認初始部署。 | 當部署程序完成時,在網域 下,選擇連結。驗證應用程式是否如預期般運作。 | 應用程式開發人員 |
將變更推送至程式碼儲存庫。 | 編輯本機工作站上的程式碼,並將變更推送至 CodeCommit 儲存庫。Amplify Hosting 會偵測儲存庫中的變更,並自動啟動建置和部署程序。確認應用程式更新會顯示在網域上。 | 應用程式開發人員 |
相關資源
AWS CodeCommit 文件
AWS Amplify Hosting 文件
React 資源