使用 CodeBuild Lambda Node.js 創建一個單一頁面的應用程序 - AWS CodeBuild
設定來源儲存庫和成品值區創建一個 CodeBuild Lambda Node.js 項目設置項目構建規格建立並執行您的 React 應用程式清理您的基礎架構

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

使用 CodeBuild Lambda Node.js 創建一個單一頁面的應用程序

創建反應應用程序是一種創建單頁 React 應用程序的方法。下面的 Node.js 示例使用 Node.js 從創建反應應用程序構建源成品，並返回構建工件。

設定來源儲存庫和成品值區

使用紗線創建一個源代碼庫，並創建反應應用程序為您的項目。

若要設定來源儲存庫和成品值區

  1. 在您的本機電腦上執行yarn create react-app <app-name>以建立一個簡單的 React 應用程式。

  2. 將 React 應用程式專案資料夾上傳到支援的來源儲存庫。如需支援的來源類型清單，請參閱ProjectSource。

創建一個 CodeBuild Lambda Node.js 項目

創建一個 AWS CodeBuild Lambda Node.js 項目。

若要建立您 CodeBuild Lambda Node.js 專案

  1. 請在以下位置開啟AWS CodeBuild主控台。 https://console.aws.amazon.com/codesuite/codebuild/home

  2. 如果顯示 CodeBuild 資訊頁，請選擇 [建立組建專案]。否則，在瀏覽窗格中，展開 [組建]，選擇 [建置專案]，然後選擇 [建立組建專案]。

  3. 在 Project name (專案名稱) 中，輸入此建置專案的名稱。組建專案名稱在每個 AWS 帳戶中都必須是唯一的。您還可以包括構建項目的可選描述，以幫助其他用戶了解該項目的用途。

  4. 在來源中，選取AWS SAM專案所在的來源儲存庫。

  5. 在 Environment (環境) 中：

    • 對於運算，選取 Lambda。

    • 對於執行階段，請選取 Node.js。

    • 對於圖像，請選擇 AWS/ 代碼生成器/亞馬遜鏈接-x86_64 標準：節點 20。

  6. 在 Artifacts (成品) 中：

    • 對於類型，選取 Amazon S3。

    • 對於值區名稱，請選取您先前建立的專案成品值區。

    • 對於成品封裝，選取 Zip。

  7. 選擇 Create build project (建立建置專案)。

設置項目構建規格

為了建立你的 React 應用程序， CodeBuild 讀取並從 buildspec 文件執行構建命令。

若要設定您的專案建置規格

  1. 在 CodeBuild 主控台中，選取您的建置專案，然後選擇 [編輯] 和 [建置規格]。

  2. 在 Buildspec 中，選擇插入構建命令，然後選擇切換到編輯器。

  3. 刪除預先填充的構建命令並粘貼到以下 buildspec 中。

    version: 0.2
phases:
  build:
    commands:
      - yarn
      - yarn add --dev jest-junit @babel/plugin-proposal-private-property-in-object
      - yarn run build
      - yarn run test -- --coverage --watchAll=false --testResultsProcessor="jest-junit" --detectOpenHandles
artifacts:
  name: "build-output"
  files:
    - "**/*"
reports:
  test-report:
    files:
      - 'junit.xml'
    file-format: 'JUNITXML'
  coverage-report:
    files:
      - 'coverage/clover.xml'
    file-format: 'CLOVERXML'

  4. 選擇 Update buildspec (更新 buildspec)。

建立並執行您的 React 應用程式

在 CodeBuild Lambda 上構建 React 應用程序，下載構建成品，然後在本地運行 React 應用程序。

若要建立並執行您的 React 應用程式

  1. 選擇 Start build (開始組建)。

  2. 建置完成後，瀏覽至 Amazon S3 專案成品儲存貯體並下載 React 應用程式成品。

  3. 解壓縮 React 構建工件並run npm install -g serve && serve -s build在項目文件夾中。

  4. 該serve命令將為本地端口上的靜態站點提供服務，並將輸出打印到終端機。您可以訪問終端輸出Local:中的本地主機 URL 來查看您的 React 應用程序。

要了解有關如何處理基於 React 的服務器的部署的更多信息，請參閱創建 React 應用程序部署。

清理您的基礎架構

若要避免您在本教學課程中使用的資源進一步收費，請刪除為 CodeBuild 專案建立的資源。

若要清理您的基礎架構

  1. 刪除您的項目工件 Amazon S3 存儲桶

  2. 導覽至 CloudWatch 主控台，然後刪除與 CodeBuild 專案相關聯的 CloudWatch 記錄群組。

  3. 導航到 CodeBuild 控制台並通過選擇刪除構建 CodeBuild 項目刪除項目。