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

# 使用 CodeBuild Lambda Node.js 建立單一頁面 React 應用程式
<a name="sample-lambda-react-nodejs"></a>

[Create React 應用程式](https://create-react-app.dev/)是建立單頁 React 應用程式的一種方式。下列 Node.js 範例使用 Node.js 來建置來自 Create React 應用程式的來源成品，並傳回建置成品。

## 設定來源儲存庫和成品儲存貯體
<a name="sample-lambda-react-nodejs.set-up-repo"></a>

使用 yarn 和 Create React 應用程式為您的專案建立來源儲存庫。

**設定來源儲存庫和成品儲存貯體**

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

1. 將 React 應用程式專案資料夾上傳至支援的來源儲存庫。如需支援的來源類型清單，請參閱 [ProjectSource](https://docs.aws.amazon.com/codebuild/latest/APIReference/API_ProjectSource.html)。

## 建立 CodeBuild Lambda Node.js 專案
<a name="sample-lambda-react-nodejs.create-project"></a>

建立 AWS CodeBuild Lambda Node.js 專案。

**建立 CodeBuild Lambda Node.js 專案**

1. 開啟 AWS CodeBuild 主控台，網址為 [https://console.aws.amazon.com/codesuite/codebuild/home](https://console.aws.amazon.com/codesuite/codebuild/home)：//。

1.  如果顯示 CodeBuild 資訊頁面，請選擇**建立組建專案**。否則，在導覽窗格中，展開**組**建，選擇**組建專案**，然後選擇**建立組建專案**。

1. 在 **Project name (專案名稱)** 中，輸入此建置專案的名稱。組建專案名稱在每個 AWS 帳戶中必須是唯一的。您也可以包含建置專案的選用描述，以協助其他使用者了解此專案的用途。

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

1. 在 **Environment (環境)** 中：
   + 針對**運算**，選取 **Lambda**。
   + 對於**執行期 (Runtime)**，選取 **Node.js**。
   + 針對**影像**，選取 **aws/codebuild/amazonlinux-x86\$164-lambda-standard：nodejs20**。

1. 在 **Artifacts (成品)** 中：
   + 針對**類型**，選取 **Amazon S3**。
   + 針對**儲存貯體名稱**，選取您先前建立的專案成品儲存貯體。
   + 針對**成品封裝**，選取 **Zip**。

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

## 設定專案 buildspec
<a name="sample-lambda-react-nodejs.set-up-buildspec"></a>

為了建置您的 React 應用程式，CodeBuild 會從 buildspec 檔案讀取並執行建置命令。

**設定您的專案 buildspec**

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

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

1. 刪除預先填入的建置命令，並貼到下列 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'
   ```

1. 選擇 **Update buildspec (更新 buildspec)**。

## 建置並執行您的 React 應用程式
<a name="sample-lambda-react-nodejs.build"></a>

在 CodeBuild Lambda 上建置 React 應用程式、下載建置成品，並在本機執行 React 應用程式。

**建置和執行您的 React 應用程式**

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

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

1. 解壓縮專案資料夾中的 React 建置成品 和 `run npm install -g serve && serve -s build` 。

1. `serve` 命令將在本機連接埠上提供靜態網站，並將輸出列印至您的終端機。您可以在終端機輸出`Local:`中造訪 下的 localhost URL，以檢視您的 React 應用程式。

若要進一步了解如何處理以 React 為基礎的伺服器的部署，請參閱[建立 React 應用程式部署](https://create-react-app.dev/docs/deployment/)。

## 清除您的基礎設施
<a name="sample-lambda-react-nodejs.clean-up"></a>

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

**清除您的基礎設施**

1. 刪除專案成品 Amazon S3 儲存貯體

1. 導覽至 CloudWatch 主控台，並刪除與 CodeBuild 專案相關聯的 CloudWatch 日誌群組。

1. 導覽至 CodeBuild 主控台，然後選擇刪除組建專案來刪除您的 CodeBuild 專案。 ****