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

2022.03.30

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