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

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

從 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

先決條件和限制

先決條件

限制

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

產品版本

  • AWS CLI 2.0 版

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

架構

目標技術堆疊

  • 包含反應 SPA 的 AWS CodeCommit 儲存庫

  • AWS Amplify 託管工作流程

目標架構

從存放 CodeCommit 庫部署 Web 應用程式，以及使用 AWS Amplify 託管的架構圖

工具

AWS 服務

  • AWS Amplify 託管提供基於 Git 的工作流程，用於託管具有持續部署的全堆疊無伺服器 Web 應用程式。

  • AWS CodeCommit 是一種版本控制服務，可協助您以私密方式存放和管理 Git 儲存庫，而無需管理自己的原始檔控制系統。

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

其他工具

  • Node.js 是一個事件驅動的 JavaScript 運行時環境，旨在構建可擴展的網絡應用程序。

  • npm 是一個在 Node.js 環境中運行的軟件註冊表，用於共享或借用軟件包以及管理私有軟件包的部署。

史诗

任務描述所需技能

建立 儲存庫。

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

AWS DevOps

複製儲存庫。

如需指示，請參閱說明 CodeCommit 文件中的透過複製存放庫 Connect 至存放庫。 CodeCommit 如果系統提示您，請提供 Git 認證。

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

創建一個新的 React 應用程序。

  1. 輸入以下命令以導航到克隆的回購庫。替換<repo name>為您的 CodeCommit 存儲庫的名稱。

    $ cd <repo name>

  2. 輸入以下指令，在複製的儲存庫中建立新的 React 應用程式。

    $ npx create-react-app .

  3. 編碼應用程序，然後輸入以下命令以啟動它。

    $ npm start

有關創建自定義 React 應用程序的更多信息，請參閱創建 React 應用程序文檔中的創建反應應用程序說明。您也可以依照 Amplify 文件中部署前端中的指示，將範例 React 應用程式部署到您的 Amplify 帳戶。

應用程式開發人員

創建一個分支並推送代碼。

  1. 輸入以下命令在本地創建新分支，其中<branch>是要分配給新分支的名稱。

    $ git checkout -b <branch>

  2. 輸入下列指令，將分支推送至 CodeCommit 儲存庫，其中<branch>是您在上一個步驟中指派的名稱。如需詳細資訊，請參閱使用提交。

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

Connect Amplify 到存儲庫。

有關說明，請參閱 Amplify 主機文檔中的 Connect 存儲庫。選取 AWS 以 CodeCommit 及您先前建立的儲存庫和分支。

應用程式開發人員

定義前端構建設置。

有關說明，請參閱 Amplify 託管文檔中的確認前端的構建設置。接受預設值或輸入以下內容。

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 託管檢測存儲庫中的更改，並自動啟動構建和部署過程。確認應用程式更新在網域上可見。

應用程式開發人員

相關資源

AWS CodeCommit 文件集

AWS Amplify 託管文件

反應資源