HugoサイトにCloudflare WorkersとResendでお問い合わせフォームを実装した話

mkdir contact-worker
cd contact-worker

name = "contact-worker"
main = "src/index.js"
compatibility_date = "2024-01-01"

const ALLOWED_ORIGINS = [
  'https://jiru-labo.com',
  'http://localhost:1313',
];

export default {
  async fetch(request, env) {
    const origin = request.headers.get('Origin') || '';
    const isAllowed = ALLOWED_ORIGINS.includes(origin) || origin.endsWith('.pages.dev');

    const corsHeaders = {
      'Access-Control-Allow-Origin': isAllowed ? origin : ALLOWED_ORIGINS[0],
      'Access-Control-Allow-Methods': 'POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
    };

    if (request.method === 'OPTIONS') {
      return new Response(null, { status: 204, headers: corsHeaders });
    }

    if (request.method !== 'POST') {
      return new Response('Method Not Allowed', { status: 405, headers: corsHeaders });
    }

    const { name, email, subject, message } = await request.json();

    if (!name || !email || !message) {
      return new Response(JSON.stringify({ error: '必須項目が不足しています' }), {
        status: 400,
        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
      });
    }

    const res = await fetch('https://api.resend.com/emails', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${env.RESEND_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        from: 'お問い合わせフォーム <contact@jiru-labo.com>',
        to: [env.TO_EMAIL],
        reply_to: email,
        subject: subject ? `[お問い合わせ] ${subject}` : `[お問い合わせ] ${name}様より`,
        html: `<p>お名前：${name}</p><p>メール：${email}</p><p>メッセージ：${message}</p>`,
      }),
    });

    if (!res.ok) {
      return new Response(JSON.stringify({ error: 'メール送信に失敗しました' }), {
        status: 500,
        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
      });
    }

    return new Response(JSON.stringify({ ok: true }), {
      status: 200,
      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
    });
  },
};

# Cloudflare にログイン（初回のみ）
npx wrangler login

# シークレットを設定
npx wrangler secret put RESEND_API_KEY
npx wrangler secret put TO_EMAIL

# デプロイ
npx wrangler deploy

<form id="contact-form" novalidate>
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <input type="text" name="subject">
  <textarea name="message" required></textarea>
  <button type="submit">送信する</button>
  <div id="cf-status"></div>
</form>

<script>
var WORKER_URL = 'https://contact-worker.jiru-labo.workers.dev';

document.getElementById('contact-form').addEventListener('submit', function(e) {
  e.preventDefault();
  fetch(WORKER_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      name: this.elements['name'].value,
      email: this.elements['email'].value,
      subject: this.elements['subject'].value,
      message: this.elements['message'].value,
    })
  })
  .then(function(res) { return res.json(); })
  .then(function(data) {
    document.getElementById('cf-status').textContent =
      data.ok ? '送信しました。' : data.error;
  });
});
</script>