Amplify Gen1で作るフルスタック環境：React + REST API + DynamoDB + Hostingの構築手順まとめ

はじめに

プライベートの開発でAmplifyを採用することが多々あるので、構築手順をまとめます
今回は、以下構成で進めていきます

• フロントエンド
  React
• バックエンド
  REST API(Lambda + API Gateway) + DynamoDB
• ホスティング
  S3 + CloudFront

この記事で記載する手順はGen1についてです

Amplifyとは

• AWS が提供するフルスタック開発フレームワーク
• フロントエンドとバックエンドを統合管理できる

手順

1. Amplify CLIをインストール

npm install -g @aws-amplify/cli
amplify configure

会話形式なのでターミナル上でやりとりしてください
以下手順です

• マネジメントコンソールがブラウザで開くので、サインインしてください
• ターミナル上で使用するリージョンを選択してください
• マネジメントコンソールにて、使用するIAMユーザーを作成してください(既にユーザーが存在する場合はスキップしてください)
• ターミナルに新規or既存のIAMユーザーのアクセスキーとシークレットキーを入力してください
• プロファイル名を聞かれますが、分かりやすいもので問題ないです

2. フロントエンドの作成

今回はReactで作成します

npm create vite@latest my-app -- --template react-ts

3. 初期化

amplify init

こちらも対話形式なのでターミナル上でやりとりしてください
以下手順です

• プロジェクト名について聞かれるため、任意の名前を付けてください
• 今までの設定が表示されます。問題なければ y を入力
• 認証について聞かれますが、先ほどプロファイルを作成したので、「AWS profile」を選択
• 問題が起こった場合、AWSに送って改善に役立てるか聞かれます。y or n任意です

4. DynamoDBでテーブル作成

amplify add storage

こちらも対話形式なのでターミナル上でやりとりしてください
以下手順です

• 画像や動画等を扱うか、単純なNoSQLか聞かれるので、「NoSQL」を選択
• フレンドリ名を聞かれるので、任意の名前を付けてください
• テーブル名を聞かれるので、任意の名前を付けてください
• カラムの作成が出来ます。必要なカラムを任意で作成してください
• パーティションキーとソートキーを設定できます。任意で設定してください
• セカンダリインデックスを設定するか聞かれます。任意で設定してください
• Lambdaトリガーを設定するか聞かれます。任意で設定してください

5. Lambda作成

amplify add function

こちらも対話形式なのでターミナル上でやりとりしてください
以下手順です

• 機能の選択を行います。「Lambda function (serverless function)」を選択してください
• Function名を聞かれるので、任意の名前を付けてください
• runtimeを聞かれるので、今回は「Node.js」を選択してください
• テンプレートを選択します。DynamoDBと連携するので、「CRUD function for DynamoDB (Integration with API Gateway) 」を選択してください
• 先ほどテーブルを作成したので、「Use DynamoDB table configured in the current Amplify project」を選択してください

6. REST API作成

amplify add api

こちらも対話形式なのでターミナル上でやりとりしてください
以下手順です

• GraphQLかRESTを選択します。「REST」を選択してください
• フレンドリ名を聞かれるので、任意の名前を付けてください
• pathを聞かれるので、任意の名前を付けてください
• Lambdaソースの選択です。先ほど作成したものを選択します「Use a Lambda function already added in the current Amplify project」
• 認証について聞かれます。今回は認証無しなので、n を入力します

認証無しのAPIは誰でもアクセス可能です。
本番環境では必ず認証を設定してください。

7. Lambda実装

ここまでで基本的な環境構築は完了しました
実装していきましょう
Lambda関数は以下に作成されています

amplify/backend/function/<関数名>/src/index.js

先程Lambdaを作成した際に、テンプレート「CRUD function for DynamoDB (Integration with API Gateway) 」を選択したので、CRUDのメソッドは用意されているはずです
今回はテンプレートをそのまま使いますので、修正不要です。必要に応じて修正してください

8. バックエンドをデプロイ

amplify push

完了すると、REST APIのエンドポイントがターミナル上で表示されます
以下にも記載されています

<プロジェクト名>/src/aws-exports.js

9. マネジメントコンソールから確認

マネジメントコンソールにて、「DynamoDB」「Lambda」「API Gateway」のページを見ると、先ほどCLIで作成されたものが表示されるはずです

10. フロントエンド実装

バックエンドの作成は完了しました
作成したREST APIにPOSTして、DynamoDBにデータを登録してみましょう
まずは、aws-amplifyをインストールします

npm install aws-amplify

以下Reactのソースです

import { useState } from 'react';
import { post } from '@aws-amplify/api-rest';
import config from './amplifyconfiguration.json';
import { Amplify } from 'aws-amplify';

Amplify.configure(config);

export default function App() {
  const [name, setName] = useState('');

  const handleSubmit = async () => {
    try {
      const res = await post({
        // apiName は API Gateway の名前
        apiName: 'api995edeac',
        // path は amplify add api で設定したパス
        path: '/items',
        options: {
            headers: { 'Content-Type': 'application/json' },
            body: {
              // 自分で作成したDBのカラムに合わせてください
              id: Date.now().toString(),
              name: name,
            }
        }
    })

      alert('保存しました');
      setName('');
      console.log(res);
    } catch (error) {
      console.error(error);
      alert('エラーが発生しました');
    }
  };

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      marginTop: 40,
    }}>
      <h2>DynamoDB に登録</h2>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        style={{ width: 200 }}
      />
      <button onClick={handleSubmit} style={{ marginTop: 10, padding: 8 }}>
        登録
      </button>
    </div>
  );
}

実際にローカルで動かしてみましょう！

DynamoDBを見ると、登録されていることが確認できました！

11. フロントエンドをデプロイ

amplify add hosting

こちらも対話形式なのでターミナル上でやりとりしてください
以下手順です

• 最初の選択は、「Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)」を選択します
• 2個目の選択は、GitHub連携するか聞かれます。とりあえず今回は連携不要の「Manual deployment」を選択します

今回はViteを使用しましたので、一旦、Amplifyの設定を見直します
Viteを使用していない方はスキップで問題無いです

amplify configure project

こちらも対話形式なのでターミナル上でやりとりしてください
以下手順です

• 最初の選択は、「Project information」を選択してください
• 後は、自分の環境に沿って、回答を進めます

Viteのビルド成果物は、distに出力されるので、「Distribution Directory Path:」を聞かれた際は、「dist」を入力してください
「Build Command:」と聞かれたら、「npm run build」を入力してください
「Start Command:」と聞かれたら、「npm start」を入力してください

ここまで完了したら、ソースをビルドしてデプロイしましょう

amplify push
npm run build
amplify publish

全て完了すると、ターミナル上にURLが表示されるので、アクセスしてみましょう！

これで全ての手順が完了しました
お疲れ様です！

公開したままだと、料金が掛かってしまうので、
削除する際は、以下コマンドで削除してください

amplify delete

よく使うコマンド

プロジェクト操作

コマンド	概要
amplify init	プロジェクト初期化
amplify configure project	プロジェクト設定
amplify status	変更点の確認
amplify pull	クラウドの設定をローカルに反映

バックエンドの追加・更新

コマンド	概要
amplify add < category >	category(api/function/storage/auth)の追加
amplify update < category >	category(api/function/storage/auth)の設定変更
amplify remove < category >	category(api/function/storage/auth)の削除

デプロイ関連

コマンド	概要
amplify push	バックエンドをAWSにデプロイ
amplify publish	フロントエンドをAWSにデプロイ

削除・クリーンアップ

コマンド	概要
amplify remove < category >	category(api/function/storage/auth)の削除
amplify delete	プロジェクト削除

デバッグ・確認

コマンド	概要
amplify console	Amplifyコンソールをブラウザで開く
amplify console api	API Gatewayをブラウザで開く
amplify console function	Lambdaをブラウザで開く
amplify console storage	S3 or DynamoDBをブラウザで開く

最後に

Amplifyは対話形式で簡単に構築できる反面、仕組みがブラックボックス化しやすい点には注意が必要です。
今回はGen1の構築手順をまとめましたが、今後はGen2版の記事もまとめる予定です。