GatsbyとAWS Lambdaでお問い合わせページを作成する方法

GatsbyはReactを使用して、静的サイトを構築するためのフレームワークです。お問い合わせページを作成するには、以下の手順を参考にしてください。

フォームを作成する

まず、HTMLのform要素を使用して、お問い合わせフォームを作成します。フォームには、テキストフィールドやテキストエリア、ボタンなどが含まれます。以下は、名前、メールアドレス、お問い合わせ内容を入力するためのフォームの例です。

import * as React from "react"
import { useState } from 'react';
import { graphql } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"

const ContactForm = ({ data, location }) => {
  const siteTitle = data.site.siteMetadata?.title || `Title`

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState(null);
  const [success, setSuccess] = useState(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    setSubmitting(true);
  
    fetch('Lambadaのエンドポイント', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, email, message }),
    })
      .then((response) => response.json())
      .then((data) => {
        if (data.error) {
          setError(data.error);
          setSubmitting(false);
        } else {
          setSuccess(true);
          setName('');
          setEmail('');
          setMessage('');
        }
      })
      .catch((error) => {
        setError(error.message);
        setSubmitting(false);
      });
    };


  return (
      <main>
              <h2>お問い合わせ</h2>
              <form onSubmit={handleSubmit}>
              {error && <div className="error">{error}</div>}
                {success && <div className="success">お問い合わせを送信しました。</div>}
                <div className="form-group">
                  <label htmlFor="name">お名前:</label>
                  <input
                    type="text"
                    id="name"
                    value={name}
                    onChange={(event) => setName(event.target.value)}
                    className="form-control"
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="email">メールアドレス:</label>
                  <input
                    type="email"
                    id="email"
                    value={email}
                    onChange={(event) => setEmail(event.target.value)}
                    className="form-control"
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="message">ご相談内容:</label>
                  <textarea
                    id="message"
                    value={message}
                    onChange={(event) => setMessage(event.target.value)}
                    className="form-control"
                  />
                </div>
                <button type="submit" disabled={submitting} className="btn btn-primary">
                  送信する
                </button>
              </form>
      </main>

  )
}

export default ContactForm

フォームの送信処理を実装する

次に、フォームの送信処理を実装します。Gatsbyでは、JavaScriptを使用して、送信されたデータを処理することができます。送信されたデータをサーバーに送信するには、JavaScriptのfetch関数を使用することができます。fetch関数は、HTTPリクエストを送信するための関数です。以下は、fetch関数を使用して、サーバーに送信する例です。

    const handleSubmit = (event) => {
      event.preventDefault();
      setSubmitting(true);
    
      fetch('Lambadaのエンドポイント', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, email, message }),
      })
        .then((response) => response.json())
        .then((data) => {
          if (data.error) {
            setError(data.error);
            setSubmitting(false);
          } else {
            setSuccess(true);
            setName('');
            setEmail('');
            setMessage('');
          }
        })
        .catch((error) => {
          setError(error.message);
          setSubmitting(false);
        });
    };

サーバーでデータを受信して処理する

AWSのLambdaで関数を作成します。

import json
import boto3

def lambda_handler(event, context):
    try:
        data = json.loads(event['body'])
        name = data['name']
        email = data['email']
        message = data['message']
        
        client = boto3.client('ses')
        response = client.send_email(
            Destination={
                'ToAddresses': ["webnakanotomoki@gmail.com"]
            },
            Message={
                'Subject': {
                    'Data': f'{name}様からのお問い合わせby jamstackメディア'
                },
                'Body': {
                    'Text': {
                        'Data': message
                    }
                }
            },
            Source='webnakanotomoki@gmail.com'
        )
        return {
            'statusCode': 200,
            'body': json.dumps(event)
        }
      except Exception as e:
        return {
            'statusCode': 500,
            'body': json.dumps({'message': str(e)})
        }

CROSの設定をする

Lambda > 関数 > lambda関数名 > 関数 URL を設定

からCORSの設定をします。フロントのサーバーを設定します、開発中はlocalhostを指定します。

まとめ

GatsbyとAWS Lambdaを使用して、お問い合わせページを作成しました。