從 AWS CodeCommit 儲存庫持續部署現代 AWS Amplify Web 應用程式 - AWS 方案指引
Summary先決條件和限制架構工具史詩相關資源

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

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

由 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

先決條件和限制

先決條件

限制

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

產品版本

  • AWS CLI 2.0 版

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

架構

目標技術堆疊

  • AWS CodeCommit包含 React 的儲存庫 SPA

  • AWS Amplify 託管工作流程

目標架構

從 CodeCommit 儲存庫部署 Web 應用程式並使用 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 文件中的建立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 託管文件中的連接儲存庫。選取 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 會偵測儲存庫中的變更，並自動啟動建置和部署程序。確認應用程式更新會顯示在網域上。

應用程式開發人員

相關資源

AWS CodeCommit 文件

AWS Amplify 託管文件

React 資源