CodeBuild Lambda Node.js で単一ページの React アプリを作成する

ローカルマシンで、 yarn create react-app <app-name>を実行してシンプルな React アプリを作成します。

React アプリケーションプロジェクトフォルダを、サポートされているソースリポジトリにアップロードします。サポートされているソースタイプのリストについては、「」を参照してくださいProjectSource。

AWS CodeBuild コンソール (https://console.aws.amazon.com/codesuite/codebuild/home) を開きます。

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

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

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

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

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

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

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 の更新)] を選択します。

[Start build] を選択します。

ビルドが完了したら、Amazon S3 プロジェクトアーティファクトバケットに移動し、React アプリケーションアーティファクトをダウンロードします。

React ビルドアーティファクト と をプロジェクトフォルダrun npm install -g serve && serve -s buildに解凍します。

serve コマンドは、ローカルポートで静的サイトを提供し、出力をターミナルに出力します。ターミナル出力の Local:にある localhost URL にアクセスして、React アプリを表示できます。

プロジェクトアーティファクト Amazon S3 バケットを削除する

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

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