ReactとAWSでサーバレスアプリを構築してみた

import React, { useState } from "react";
import axios from "axios";
import "./Form.css";

function Form() {
  const [user_id, setUser_id] = useState("");
  const [task_id, setTask_id] = useState("");
  const [date, setDate] = useState("");
  const [message, setMessage] = useState("");
  const [quantity, setQuantity] = useState("");

  // データ登録
  const handleWrite = async () => {
    try {
      const response = await axios.post("https://your-api-gateway-endpoint", {
        user_id: user_id,
        task_id: task_id,
        date: date,
        message: message,
        quantity: quantity,
      });
      console.log("Write response:", response.message);
    } catch (error) {
      console.error("Error writing data to API", error);
    }
  };
  return (
    <div className="Form">
      <header className="header">
        <h1>DB登録</h1>
      </header>
      <div className="Contents">
        <label>
          user_id:
          <input
            type="text"
            value={user_id}
            onChange={(e) => setUser_id(e.target.value)}
            placeholder="ユーザーIDを入力"
          />
        </label>
        <br />
        <label>
          task_id:
          <input
            type="text"
            value={task_id}
            onChange={(e) => setTask_id(e.target.value)}
            placeholder="タスクIDを入力"
          />
        </label>
        <br />
        <label>
          date:
          <input
            type="text"
            value={date}
            onChange={(e) => setDate(e.target.value)}
            placeholder="日付を入力（YYYYMMDD）"
          />
        </label>
        <br />
        <label>
          message:
          <input
            type="text"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder="メッセージを入力"
          />
        </label>
        <br />
        <label>
          quantity:
          <input
            type="text"
            value={quantity}
            onChange={(e) => setQuantity(e.target.value)}
            placeholder="数量を入力"
          />
        </label>
        <br />
        <button onClick={handleWrite}>登録</button>
      </div>
    </div>
  );
}

export default Form;

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import Form from "./Form";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Form />
  </React.StrictMode>
);

reportWebVitals();

これでフロントの実装が完成しました！

デプロイしてみる

それでは実際にデプロイしてみましょう！
以下のコマンドを実行してビルドを行います。

$ npm run build

sample
  └ build

プロパティタブ下部の「静的ウェブサイトホスティング」にバケットウェブサイトエンドポイントが存在していると思います。
ブラウザからエンドポイントへアクセスすると、作成したReactアプリの画面を確認することができます。

作成したReactアプリをS3にデプロイできました！

CORSの設定

次に今回呼び出すAPIに対してAPI GatewayからCORSの設定を行います。

AWSマネジメントコンソールのナビゲーションバー上の検索ボックスに「API Gateway」と入力します。
サービスの中からAPI Gatewayが見つかるので、選択してAPI Gatewayダッシュボードを開きます。
ナビゲーションペインからリソースを選択し、以下CORS設定有効化手順を進めてください。

CORS設定有効化手順

• 対象のリソースを選択
• リソースの詳細から、「CORSを有効にする」を押下
• Access-Control-Allow-Headers / Access-Control-Allow-Originを設定し、保存
• OPTIONSメソッドが追加されていることを確認

また、対象のLambda関数のレスポンスに以下CORSヘッダーを追加する必要があります。

return formatJSONResponse({
  statusCode: 200,
  headers: {
    "Access-Control-Allow-Origin": "*", // アクセスを許可するオリジンを指定
    "Access-Control-Allow-Methods": "POST,GET,OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token",
  },
  message: `${event.body.task_id}の書き込みに成功しました。`,
  event,
});

上記変更を保存し、APIを再デプロイします。

これで、API GatewayでCORSが有効になり、ReactアプリからAPIを呼び出すことができるようになります。

テストしてみる

それでは実際にデプロイしたReactアプリの画面を操作し、DynamoDBにデータが登録されることを確認しましょう。

まずはDynamoDBの状態を確認します。
現在、PKが[ID:0001] / SKが次で始まる[ShoppingList:]とした場合に以下の1件がヒットする状態です。