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

PDF

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

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 和 AWS CodeCommit 的 Identity and Access Management。

• 安裝https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html並設定 AWS Command Line Interface (AWS CLI)。

• 文字編輯器或程式碼編輯器。

• CodeCommit，使用 Git 登入資料為 HTTPS 使用者設定 。

• Amplify 的 IAM 服務角色。

• npm 和 Node.js，已安裝 (npm 文件）。

限制

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

產品版本

• AWS CLI 2.0 版

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

架構

目標技術堆疊

• 包含 React SPA 的 AWS CodeCommitrepository

• AWS Amplify 託管工作流程

目標架構

工具

AWS 服務

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

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

• AWS Identity and Access Management (IAM) 可透過控制已驗證和獲授權的人員來協助您安全地管理對 AWS 資源的存取。

其他工具

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

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

史詩

建立 CodeCommit 儲存庫

任務	描述	所需的技能
建立 儲存庫。	如需說明，請參閱 CodeCommit 文件中的建立 AWS CodeCommit 儲存庫。 CodeCommit	AWS DevOps
複製儲存庫。	如需說明，請參閱 CodeCommit 文件中的複製儲存庫以連線至 CodeCommit 儲存庫。 CodeCommit 如果出現提示，請提供 Git 登入資料。	應用程式開發人員

建立 CodeCommit 儲存庫

任務	描述	所需的技能
建立 儲存庫。	如需說明，請參閱 CodeCommit 文件中的建立 AWS CodeCommit 儲存庫。 CodeCommit	AWS DevOps
複製儲存庫。	如需說明，請參閱 CodeCommit 文件中的複製儲存庫以連線至 CodeCommit 儲存庫。 CodeCommit 如果出現提示，請提供 Git 登入資料。	應用程式開發人員

建立 React 應用程式

任務	描述	所需的技能
建立新的 React 應用程式。	輸入下列命令以導覽至複製的儲存庫。<repo name> 將 取代為 CodeCommit 儲存庫的名稱。 $ cd <repo name> 輸入下列命令，在複製的儲存庫中建立新的 React 應用程式。 $ npx create-react-app . 為應用程式編碼，然後輸入下列命令來啟動應用程式。 $ npm start 如需建立自訂 React 應用程式的詳細資訊，請參閱建立 React 應用程式文件中的建立 React 應用程式說明。您也可以遵循 Amplify 文件中部署前端中的指示，將範例 React 應用程式部署到您的 Amplify 帳戶。	應用程式開發人員
建立分支並推送程式碼。	輸入下列命令以在本機建立新的分支，其中 <branch>是您要指派給新分支的名稱。 $ git checkout -b <branch> 輸入下列命令，將分支推送到 CodeCommit 儲存庫，其中 <branch>是您在上一個步驟中指派的名稱。如需詳細資訊，請參閱使用遞交。 $ git push --set-upstream origin <branch>	應用程式開發人員

建立 React 應用程式

任務	描述	所需的技能
建立新的 React 應用程式。	輸入下列命令以導覽至複製的儲存庫。<repo name> 將 取代為 CodeCommit 儲存庫的名稱。 $ cd <repo name> 輸入下列命令，在複製的儲存庫中建立新的 React 應用程式。 $ npx create-react-app . 為應用程式編碼，然後輸入下列命令來啟動應用程式。 $ npm start 如需建立自訂 React 應用程式的詳細資訊，請參閱建立 React 應用程式文件中的建立 React 應用程式說明。您也可以遵循 Amplify 文件中部署前端中的指示，將範例 React 應用程式部署到您的 Amplify 帳戶。	應用程式開發人員
建立分支並推送程式碼。	輸入下列命令以在本機建立新的分支，其中 <branch>是您要指派給新分支的名稱。 $ git checkout -b <branch> 輸入下列命令，將分支推送到 CodeCommit 儲存庫，其中 <branch>是您在上一個步驟中指派的名稱。如需詳細資訊，請參閱使用遞交。 $ git push --set-upstream origin <branch>	應用程式開發人員

在 AWS Amplify Hosting 中部署應用程式

任務	描述	所需的技能
將 Amplify 連接至儲存庫。	如需說明，請參閱 Amplify 託管文件中的連接儲存庫。選取您先前建立的 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 託管文件中的儲存和部署。等待部署程序完成。	應用程式開發人員

在 AWS Amplify Hosting 中部署應用程式

任務	描述	所需的技能
將 Amplify 連接至儲存庫。	如需說明，請參閱 Amplify 託管文件中的連接儲存庫。選取您先前建立的 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 託管文件中的儲存和部署。等待部署程序完成。	應用程式開發人員

驗證持續部署

任務	描述	所需的技能
驗證初始部署。	當部署程序完成時，請在網域下選擇連結。驗證應用程式是否如預期般運作。	應用程式開發人員
將變更推送至程式碼儲存庫。	編輯本機工作站上的程式碼，並將變更推送至 CodeCommit 儲存庫。Amplify Hosting 會偵測儲存庫中的變更，並自動啟動建置和部署程序。確認應用程式更新會顯示在網域上。	應用程式開發人員

驗證持續部署

任務	描述	所需的技能
驗證初始部署。	當部署程序完成時，請在網域下選擇連結。驗證應用程式是否如預期般運作。	應用程式開發人員
將變更推送至程式碼儲存庫。	編輯本機工作站上的程式碼，並將變更推送至 CodeCommit 儲存庫。Amplify Hosting 會偵測儲存庫中的變更，並自動啟動建置和部署程序。確認應用程式更新會顯示在網域上。	應用程式開發人員

相關資源

AWS CodeCommit 文件

• 設定 AWS CodeCommit

  • 使用 Git 登入資料為 HTTPS 使用者設定

  • 使用 AWS CLI 登入資料協助程式，在 Linux、macOS 或 Unix 上設定 HTTPS 連線至 AWS CodeCommit 儲存庫的步驟 macOS

• AWS CodeCommit 入門

AWS Amplify 託管文件

• 現有程式碼入門

• 設定自訂網域

React 資源

• 建立 React 應用程式網站

• 建立 React 應用程式文件

• 建立 React 應用程式儲存庫 (GitHub)