CDKを使用して React アプリを Amplifyでデプロイしてみた。

AWS Amplifyとは？

AWS Amplify は、AWS でフルスタックアプリケーションをすばやく簡単に構築できるようにします。Amplify でウェブまたはモバイルアプリケーションのバックエンドを設定することができます。Amplifyは、フロントエンドのWebおよびモバイル開発者にとって非常に便利なツールです。Amplifyを使用してWebフロントエンドUIを視覚的に構築することもできます。

この記事では、CDKを使用して React アプリを Amplifyでデプロイしてみました。ここでは、AmplifyのソースリポジトリとしてGitHubを使用しました。

やってみた

React アプリの作成

• フロントエンドコードとバックエンドコードの両方を一緒に保持するディレクトリを作成しておきます。

mkdir react-amplify-cdk
cd react-amplify-cdk

• 次のコードでReactアプリを作成しておきます。

npx create-react-app react-amplify

• Buildスクリプトを作成しておきます。 Amplifyは、Buildスクリプトを使用してアプリケーションをビルドします。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

• フロントエンドディレクトリにノードモジュールをインストールしておきます。

npm install

GitHub リポジトリの作成

• GitHubアカウントにログインし、[New]をクリックしてリポジトリを作成しておきます。
• リポジトリ名を入力してリポジトリを作成しておきます。

• 次のコマンドを使用して、フロントエンドコードをGitHubリポジトリにプッシュしておきます。

git init
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/rest-of-your-repository-url.git
git push -u origin main

• これで、GitHubリポジトリにコードが表示されます。

Amplifyの作成

CDKをインストールする

• 次のコマンドを使用してCDKをインストールしておきます。

npm install aws-cdk-lib

CDKアプリを作成する

• 新しいディレクトリを作成しておきます。
• CDKは、プロジェクトディレクトリの名前に基づいてソースファイルとクラスに名前を付けます。

#create new directory
mkdir amplify-cdk
cd amplify-cdk

• cdk initコマンドを使用してアプリを初期化しておきます。

cdk init --language typescript

AWS サービスの作成

• 新しいファイル [lib/index.ts] を作成して、作成する必要のあるAWSサービスを定義しておきます。
• Amplifyを定義し、GitHubをソースリポジトリとして指定しておきます。

import { Construct } from 'constructs';
import { StackProps} from 'aws-cdk-lib';
import {CfnApp, CfnBranch} from 'aws-cdk-lib/aws-amplify';

export class amplifyStack extends Construct {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id);

    const amplifyApp = new CfnApp(this, 'amplify-app', {
        name: 'amplify-react-app',
        repository: 'https://github.com/rest-of-your-repository-url',
        oauthToken: 'specify-your-github-auth-token'
      });
    
    new CfnBranch(this, 'MasterBranch', {
        appId: amplifyApp.attrAppId,
        branchName: 'main'
    });
  }
}

アプリにサービスを追加する

• /lib/amplify-cdk-stack.ts ファイルに次のコードを追加しておきます。

#Import the Index file created in the previous step
import * as amplify from '../lib/index';
new amplify.amplifyStack(this, 'amplify-stack');

CDK Deploy

• Deploy する前に、環境をブートストラップする必要があります。
• 次のコマンドを実行して、AWS環境をブートストラップしておきます。

cdk bootstrap

• CDKを展開しておきます。

#Run build command before deploying CDK
npm run build
cdk deploy

アプリケーションをテストする

• コンソールでは、サービスが作成されたことを見ることができます。
• Amplifyアプリが作成されたことをみることができます。

• 展開のさまざまなフェーズを見ることができます。

• AmplifyURLを使用してアプリケーションにアクセスできます。

まとめ

CDKを使用して React アプリを Amplifyでデプロイしてみました。

Reference :

Amplify using CDK

Creating new React App