Cookie の設定を選択する

当社は、当社のサイトおよびサービスを提供するために必要な必須 Cookie および類似のツールを使用しています。当社は、パフォーマンス Cookie を使用して匿名の統計情報を収集することで、お客様が当社のサイトをどのように利用しているかを把握し、改善に役立てています。必須 Cookie は無効化できませんが、[カスタマイズ] または [拒否] をクリックしてパフォーマンス Cookie を拒否することはできます。

お客様が同意した場合、AWS および承認された第三者は、Cookie を使用して便利なサイト機能を提供したり、お客様の選択を記憶したり、関連する広告を含む関連コンテンツを表示したりします。すべての必須ではない Cookie を受け入れるか拒否するには、[受け入れる] または [拒否] をクリックしてください。より詳細な選択を行うには、[カスタマイズ] をクリックしてください。

CodeBuild Lambda Node.js を使用してシングルページの React アプリを作成

フォーカスモード
CodeBuild Lambda Node.js を使用してシングルページの React アプリを作成 - AWS CodeBuild

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

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

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

ソースリポジトリとアーティファクトバケットを設定するには
  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 の情報ページが表示された場合、ビルドプロジェクトを作成するを選択します。それ以外の場合は、ナビゲーションペインでビルドを展開し、[ビルドプロジェクト] を選択し、次に [Create build project (ビルドプロジェクトの作成)] を選択します。

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

  4. [ソース] で、AWS SAM プロジェクトがあるソースリポジトリを選択します。

  5. [環境] で以下の操作を行います。

    • [コンピューティング] で、[Lambda] を選択します。

    • [ランタイム] で、[Node.js] を選択します。

    • [イメージ] で、[aws/codebuild/amazonlinux-x86_64-lambda-standard:nodejs20] を選択します。

  6. [アーティファクト] で、次のようにします。

    • [タイプ] で、[Amazon S3] を選択します。

    • [バケット名] で、先ほど作成したプロジェクトアーティファクトバケットを選択します。

    • [アーティファクトのパッケージ化] では、[Zip] を選択します。

  7. Create build project (ビルドプロジェクトの作成)を選択します。

プロジェクトの buildspec の設定

React アプリをビルドするために、CodeBuild は buildspec ファイルからビルドコマンドを読み取り、実行します。

プロジェクトの buildspec を設定するには
  1. CodeBuild コンソールで、ビルドプロジェクトを選択し、[編集][Buildspec] を選択します。

  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: にある localhost URL にアクセスして、React アプリを表示できます。

React ベースのサーバーのデプロイを処理する方法の詳細については、「Create React App Deployment」を参照してください。

インフラストラクチャをクリーンアップ

このチュートリアルで使用したリソースに対して追加料金が発生しないようにするには、CodeBuild プロジェクト用に作成されたリソースを削除します。

インフラストラクチャをクリーンアップするには
  1. プロジェクトアーティファクト Amazon S3 バケットを削除

  2. CloudWatch コンソールに移動し、CodeBuild プロジェクトに関連付けられている CloudWatch ロググループを削除します。

  3. CodeBuild コンソールに移動し、[ビルドプロジェクトを削除] を選択して CodeBuild プロジェクトを削除します。

プライバシーサイト規約Cookie の設定
© 2025, Amazon Web Services, Inc. or its affiliates.All rights reserved.