翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# CodeBuild Lambda Node.js を使用してシングルページの React アプリを作成
<a name="sample-lambda-react-nodejs"></a>

「[Create React App](https://create-react-app.dev/)」は、シングルページの React アプリケーションを作成する方法です。次の Node.js サンプルは、Node.js を使用して「Create React App」からソースアーティファクトをビルドし、ビルドアーティファクトを返します。

## ソースリポジトリとアーティファクトバケットを設定
<a name="sample-lambda-react-nodejs.set-up-repo"></a>

yarn と「Create React App」を使用して、プロジェクトのソースリポジトリを作成します。

**ソースリポジトリとアーティファクトバケットを設定するには**

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)://https://https://https://https://https

1.  CodeBuild の情報ページが表示された場合、**ビルドプロジェクトを作成する**を選択します。それ以外の場合は、ナビゲーションペインで**ビルド**を展開し、**[ビルドプロジェクト] **を選択し、次に **[Create build project (ビルドプロジェクトの作成)] **を選択します。

1. [**プロジェクト名**] に、このビルドプロジェクトの名前を入力します。ビルドプロジェクト名は、 AWS アカウントごとに一意である必要があります。また、他のユーザーがこのプロジェクトの使用目的を理解できるように、ビルドプロジェクトの説明を任意で指定することもできます。

1. Source で****、 AWS SAM プロジェクトが配置されているソースリポジトリを選択します。

1. [**環境**] で以下の操作を行います。
   + **[コンピューティング]** で、**[Lambda]** を選択します。
   + **[ランタイム]** で、**[Node.js]** を選択します。
   + **[イメージ]** で、**[aws/codebuild/amazonlinux-x86\$164-lambda-standard:nodejs20]** を選択します。

1. [**アーティファクト**] で、次のようにします。
   + **[タイプ]** で、**[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 ベースのサーバーのデプロイを処理する方法の詳細については、「[Create React App Deployment](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 プロジェクトを削除します。