【AWS】LambdaとDynamoDBでサーバーレスWebアプリを構築！AWSの設定から実際のコードまで解説！

import boto3
from boto3.dynamodb.conditions import Key

# DynamoDBリソースの初期化
dynamodb = boto3.resource('dynamodb')

def lambda_handler(event, context):
    # リクエストパラメータの取得
    parameters = event['queryStringParameters']
    user_id = parameters['id']
    user_name = parameters['name']
    user_age = parameters['age']
    user_email = parameters['email']
    
    # user-tableへの参照
    table = dynamodb.Table('user-table')
    
    # DynamoDBにデータが存在するか確認
    response = table.get_item(Key={'id': user_id})
    
    # データが存在する場合は更新、存在しない場合は新規登録
    if 'Item' in response:
        # データの更新
        table.update_item(
            Key={'id': user_id},
            UpdateExpression='SET #name = :name, #age = :age, #email = :email',
            ExpressionAttributeNames={
                '#name': 'name',
                '#age': 'age',
                '#email': 'email'
            },
            ExpressionAttributeValues={
                ':name': user_name,
                ':age': user_age,
                ':email': user_email
            }
        )
    else:
        # 新規データの登録
        table.put_item(
            Item={
                'id': user_id,
                'name': user_name,
                'age': user_age,
                'email': user_email
            }
        )
    
    return {
        'statusCode': 200,
        'body': 'データの登録または更新に成功しました。'
    }

import React, { useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [name, setName] = useState('');
  const [results, setResults] = useState([]);
  const [updateStatus, setUpdateStatus] = useState({});
  const [registStatus, setRegistStatus] = useState('');

  const handleSearch = async () => {
    // 処理結果をクリア
    setUpdateStatus({});

    try {
      const response = await axios({
        method: 'post',
        url: 'https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/test/get-user-data',
        data: {
          queryStringParameters: {
            name: name
          }
        }
      });
      const usersData = JSON.parse(response.data.body);
      const editableUsersData = usersData.map(user => ({
        ...user,
        editId: user.id,
        editName: user.name,
        editAge: user.age,
        editEmail: user.email
      }));
      setResults(editableUsersData);
    } catch (error) {
      console.error('検索中にエラーが発生しました:', error);
    }
  };

  const handleEdit = (index, field, value) => {
    const updatedResults = [...results];
    updatedResults[index][field] = value;
    setResults(updatedResults);
  };

  // 更新ボタンの処理
  const handleUpdate = async (index) => {
    const user = results[index];
    try {
      const response = await axios({
        method: 'post',
        url: 'https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/test/update-user-data', // 実際のエンドポイントURLに置き換えてください
        data: {
          queryStringParameters: {
            id: user.editId,
            name: user.editName,
            age: user.editAge,
            email: user.editEmail
          }
        }
      });
      // 処理結果を状態にセット
      setUpdateStatus({ ...updateStatus, [index]: '処理が正常終了しました' });
    } catch (error) {
      // エラー処理
      setUpdateStatus({ ...updateStatus, [index]: 'エラーが発生しました' });
    }
  };

  // 新しいデータを登録するための状態
  const [newUser, setNewUser] = useState({
    newName: '',
    newAge: '',
    newEmail: ''
  });

  // 新しいデータの入力を処理する関数
  const handleNewUserChange = (field, value) => {
    setNewUser({ ...newUser, [field]: value });
  };

  // 新しいデータを登録する関数
  const handleRegister = async () => {
    setRegistStatus('');
    try {
      const response = await axios({
        method: 'post',
        url: 'https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/test/update-user-data', // 実際のエンドポイントURLに置き換えてください
        data: {
          queryStringParameters: {
            id: newUser.newId,
            name: newUser.newName,
            age: newUser.newAge,
            email: newUser.newEmail
          }
        }
      });
      // 登録成功時の処理
      console.log('データが正常に登録されました。', response);
      // 処理結果を状態にセット
      setRegistStatus('処理が正常終了しました');
    } catch (error) {
      // 登録失敗時のエラー処理
      console.error('データ登録中にエラーが発生しました。', error);
    }
  };

  return (
    <div>
      <div>
        <h2>検索条件</h2>
        <div>
          <label htmlFor="name">名前:</label>
          <input
            type="text"
            id="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
          />
        </div>
      </div>
      <div>
        <h2>検索結果</h2>
        <ul className="results-list">
        {results.map((user, index) => (
          <li key={index}>
            <label>ID:</label>
            <input
              type="text"
              value={user.editId}
              disabled
              readOnly="true"
              onChange={(e) => handleEdit(index, 'editId', e.target.value)}
            />
            <label>名前:</label>
            <input
              type="text"
              value={user.editName}
              onChange={(e) => handleEdit(index, 'editName', e.target.value)}
            />
            <label>年齢:</label>
            <input
              type="number"
              value={user.editAge}
              onChange={(e) => handleEdit(index, 'editAge', e.target.value)}
            />
            <label>メール:</label>
            <input
              type="email"
              value={user.editEmail}
              onChange={(e) => handleEdit(index, 'editEmail', e.target.value)}
            />
            <button onClick={() => handleUpdate(index)}>更新</button>
            <span>{updateStatus[index]}</span>
          </li>
        ))}
      </ul>
      </div>
      <h2>データ登録</h2>
      <div>
      <label>ID:</label>
        <input
          type="text"
          value={newUser.newId}
          onChange={(e) => handleNewUserChange('newId', e.target.value)}
        />
        <label>名前:</label>
        <input
          type="text"
          value={newUser.newName}
          onChange={(e) => handleNewUserChange('newName', e.target.value)}
        />
        <label>年齢:</label>
        <input
          type="number"
          value={newUser.newAge}
          onChange={(e) => handleNewUserChange('newAge', e.target.value)}
        />
        <label>メール:</label>
        <input
          type="email"
          value={newUser.newEmail}
          onChange={(e) => handleNewUserChange('newEmail', e.target.value)}
        />
        <button onClick={handleRegister}>登録</button>
        <span>{registStatus}</span>
      </div>
    </div>
  );
}

export default App;

npm build