本文為英文版的機器翻譯版本,如內容有任何歧義或不一致之處,概以英文版為準。
從 AWS 儲存庫持續部署現代 AWS Amplify Web 應用程式 CodeCommit
創建者:迪克什圖魯五寶塔科塔卡(AWS)和西片假村(AWS)
環境:PoC 或試點 | 技術:Web 和移動應用程序 DevOps; 現代化 | AWS 服務:AWS Amplify;AWS CodeCommit |
Summary
現代 Web 應用程序構建為單頁應用程序(SPA),將所有應用程序組件打包到靜態文件中。透過使用 AWS Amplify 託管,您可以建立持續整合和持續部署 (CI/CD) 管道,以建置、部署和託管在 Git 儲存庫中管理的現代 Web 應用程式。當您將 Amplify Hosting 連接到代碼存儲庫時,每次提交都會啟動一個工作流程來部署應用程序的前端和後端。這種方法的好處是,只有在成功完成部署後才會更新 Web 應用程式,以避免前端與後端之間的不一致。
在此模式中,您可以使用 AWS CodeCommit 儲存庫來管理現代 Web 應用程式。這些指示中的範例 Web 應用程式使用 React SPA 架構。然而,Amplify 託管支持許多其他 SPA 框架,如角,Vue,Next.js,它還支持單站點生成器,如蓋茨比,雨果和傑基爾。
此模式適用於具有下列服務和概念經驗的 AWS 建置人員:
AWS CodeCommit
AWS Amplify 託管
反應
JavaScript
Node.js
NPM
Git
先決條件和限制
先決條件
作用中的 AWS 帳戶
在 Amplify 和 CodeCommit. 中建立資源的權限。如需詳細資訊,請參閱適用於 Amplify 的身分 Identity and Access Management 理以及 AWS CodeCommit 的身分與存取管理。
文字編輯器或程式碼編輯器。
CodeCommit,為使用 Git 認證的 HTTPS 使用者進行設定。
「Amplify」的 IAM 服務角色。
故宮和 Node.js,已安裝
(故宮文檔)。
限制
此模式不會討論 Amplify 應用程式 (例如 API、驗證或資料庫) 後端的開發和整合。如需有關後端的詳細資訊,請參閱 Amplify 文件中的建立後端。
產品版本
AWS CLI 2.0 版
Node.js 版本 16.x 或更新版本
架構
目標技術堆疊
包含反應 SPA 的 AWS CodeCommit 儲存庫
AWS Amplify 託管工作流程
目標架構
![從存放 CodeCommit 庫部署 Web 應用程式,以及使用 AWS Amplify 託管的架構圖](images/pattern-img/370c0a43-fc09-46dc-a018-853cbd4cff11/images/746a9450-6a0b-4798-bf22-e8f89c7933f6.png)
工具
AWS 服務
AWS Amplify 託管提供基於 Git 的工作流程,用於託管具有持續部署的全堆疊無伺服器 Web 應用程式。
AWS CodeCommit 是一種版本控制服務,可協助您以私密方式存放和管理 Git 儲存庫,而無需管理自己的原始檔控制系統。
AWS Identity and Access Management (IAM) 可透過控制誰經過身份驗證和授權使用 AWS 資源,協助您安全地管理對 AWS 資源的存取。
其他工具
史诗
任務 | 描述 | 所需技能 |
---|---|---|
建立 儲存庫。 | 如需指示,請參閱 CodeCommit 文件中的建立 AWS CodeCommit 儲存庫。 | AWS DevOps |
複製儲存庫。 | 如需指示,請參閱說明 CodeCommit 文件中的透過複製存放庫 Connect 至存放庫。 CodeCommit 如果系統提示您,請提供 Git 認證。 | 應用程式開發人員 |
任務 | 描述 | 所需技能 |
---|---|---|
創建一個新的 React 應用程序。 |
有關創建自定義 React 應用程序的更多信息,請參閱創建 React 應用程序 | 應用程式開發人員 |
創建一個分支並推送代碼。 |
| 應用程式開發人員 |
任務 | 描述 | 所需技能 |
---|---|---|
Connect Amplify 到存儲庫。 | 有關說明,請參閱 Amplify 主機文檔中的 Connect 存儲庫。選取 AWS 以 CodeCommit 及您先前建立的儲存庫和分支。 | 應用程式開發人員 |
定義前端構建設置。 | 有關說明,請參閱 Amplify 託管文檔中的確認前端的構建設置。接受預設值或輸入以下內容。
| 應用程式開發人員 |
檢閱和部署。 | 如需指示,請參閱 Amplify 主機文件中的儲存和部署。等到部署程序完成。 | 應用程式開發人員 |
任務 | 描述 | 所需技能 |
---|---|---|
驗證初始部署。 | 部署程序完成時,在 [網域] 下,選擇連結。確認應用程式是否如預期般運作。 | 應用程式開發人員 |
將變更推送至程式碼儲存庫。 | 編輯本機工作站上的程式碼,並將變更推送至 CodeCommit 儲存庫。Amplify 託管檢測存儲庫中的更改,並自動啟動構建和部署過程。確認應用程式更新在網域上可見。 | 應用程式開發人員 |
相關資源
AWS CodeCommit 文件集
AWS Amplify 託管文件
反應資源
創建反應應用程序存儲庫
(GitHub)