「Create React App
ソースリポジトリとアーティファクトバケットを設定
yarn と「Create React App」を使用して、プロジェクトのソースリポジトリを作成します。
ソースリポジトリとアーティファクトバケットを設定するには
-
ローカルマシンで
yarn create react-app
を実行して、シンプルな React アプリを作成します。<app-name>
-
サポートされているソースリポジトリに、React アプリプロジェクトフォルダをアップロードします。サポートされているソースタイプのリストについては、「ProjectSource」を参照してください。
CodeBuild Lambda Node.js プロジェクトを作成
AWS CodeBuild Lambda Node.js プロジェクトを作成します。
CodeBuild Lambda Node.js プロジェクトを作成するには
-
AWS CodeBuild コンソール (https://console.aws.amazon.com/codesuite/codebuild/home
) を開きます。 -
CodeBuild の情報ページが表示された場合、ビルドプロジェクトを作成するを選択します。それ以外の場合は、ナビゲーションペインでビルドを展開し、[ビルドプロジェクト] を選択し、次に [Create build project (ビルドプロジェクトの作成)] を選択します。
[プロジェクト名] に、このビルドプロジェクトの名前を入力します。ビルドプロジェクトの名前は、各 AWS アカウントで一意である必要があります。また、他のユーザーがこのプロジェクトの使用目的を理解できるように、ビルドプロジェクトの説明を任意で指定することもできます。
-
[ソース] で、AWS SAM プロジェクトがあるソースリポジトリを選択します。
-
[環境] で以下の操作を行います。
-
[コンピューティング] で、[Lambda] を選択します。
-
[ランタイム] で、[Node.js] を選択します。
-
[イメージ] で、[aws/codebuild/amazonlinux-x86_64-lambda-standard:nodejs20] を選択します。
-
-
[アーティファクト] で、次のようにします。
-
[タイプ] で、[Amazon S3] を選択します。
-
[バケット名] で、先ほど作成したプロジェクトアーティファクトバケットを選択します。
-
[アーティファクトのパッケージ化] では、[Zip] を選択します。
-
-
Create build project (ビルドプロジェクトの作成)を選択します。
プロジェクトの buildspec の設定
React アプリをビルドするために、CodeBuild は buildspec ファイルからビルドコマンドを読み取り、実行します。
プロジェクトの buildspec を設定するには
-
CodeBuild コンソールで、ビルドプロジェクトを選択し、[編集] と [Buildspec] を選択します。
-
[Buildspec] で、[ビルドコマンドを挿入]、[エディタに切り替え] の順に選択します。
-
事前入力されたビルドコマンドを削除し、次の 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'
-
[Update buildspec (buildspec の更新)] を選択します。
React アプリをビルドして実行
CodeBuild Lambda で React アプリをビルドし、ビルドアーティファクトをダウンロードして、React アプリをローカルで実行します。
React アプリをビルドして実行するには
-
[Start build] を選択します。
-
ビルドが完了したら、Amazon S3 プロジェクトアーティファクトバケットに移動し、React アプリアーティファクトをダウンロードします。
-
React ビルドアーティファクトと
run npm install -g serve && serve -s build
をプロジェクトフォルダに解凍します。 -
serve
コマンドは、ローカルポートで静的サイトを提供し、出力をターミナルに出力します。ターミナル出力のLocal:
にある localhost URL にアクセスして、React アプリを表示できます。
React ベースのサーバーのデプロイを処理する方法の詳細については、「Create React App Deployment
インフラストラクチャをクリーンアップ
このチュートリアルで使用したリソースに対して追加料金が発生しないようにするには、CodeBuild プロジェクト用に作成されたリソースを削除します。
インフラストラクチャをクリーンアップするには
-
プロジェクトアーティファクト Amazon S3 バケットを削除
-
CloudWatch コンソールに移動し、CodeBuild プロジェクトに関連付けられている CloudWatch ロググループを削除します。
-
CodeBuild コンソールに移動し、[ビルドプロジェクトを削除] を選択して CodeBuild プロジェクトを削除します。