Switch contact flow to Workers and Turnstile

Author: Yusaku01

.env.example

@@ -1,8 +1,8 @@
 # Contact Form
-RESEND_API_KEY=
 CONTACT_TO_EMAIL=
 CONTACT_FROM_EMAIL=
-GOOGLE_RECAPTCHA_SECRET_KEY=
+TURNSTILE_SECRET_KEY=
+PUBLIC_TURNSTILE_SITE_KEY=
 
 # Qiita Settings
 QIITA_API_ENDPOINT=https://qiita.com/api/v2
@@ -17,7 +17,3 @@ ZENN_USERNAME=
 # Google Analytics
 # 計測に使用するMeasurement ID（例: G-XXXXXXXXXX）
 PUBLIC_GOOGLE_ANALYTICS_ID=
-
-# Google reCAPTCHA
-# reCAPTCHA v2のサイトキー（公開可能なキー）
-PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY=

.prettierignore

@@ -1,3 +1,5 @@
 src/content/blog/*
 src/content/profile/*
-environment.md
+environment.md
+migrations/*.sql
+pnpm-lock.yaml

astro.config.mjs

@@ -1,4 +1,5 @@
 import { defineConfig, fontProviders } from 'astro/config';
+import cloudflare from '@astrojs/cloudflare';
 import mdx from '@astrojs/mdx';
 import UnoCSS from 'unocss/astro';
 import sitemap from '@astrojs/sitemap';
@@ -48,7 +49,11 @@ const codeFilenameMetaTransformer = {
 export default defineConfig({
   site: 'https://saku-space.com',
   cacheDir: './.astro-cache',
-  output: 'static',
+  output: 'server',
+  adapter: cloudflare({
+    imageService: 'compile',
+    prerenderEnvironment: 'node',
+  }),
   fonts: [
     {
       name: 'Zen Kaku Gothic New',

docs/public-release-checklist.md

@@ -1,21 +1,28 @@
 # 公開リポジトリ移行チェックリスト
 
-パブリック化に伴う環境変数の再投入と動作確認フローをまとめています。Cloudflare Pages や Vercel など、デプロイ環境に合わせて調整してください。
+パブリック化に伴う環境変数の再投入と動作確認フローをまとめています。Cloudflare Workers Static Assets へのデプロイを前提にしています。
 
 ## 1. ローカル環境の `.env`
 
 1. `.env.example` をコピーして `.env` を再作成する。
 2. 以下の値を最新の本番向けクレデンシャルに置き換える。
-   - `PUBLIC_CONTACT_FORM_ENDPOINT`
    - `PUBLIC_GOOGLE_ANALYTICS_ID`
-   - `PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY`（reCAPTCHA v2 checkbox のサイトキー）
+   - `PUBLIC_TURNSTILE_SITE_KEY`（Cloudflare Turnstile のサイトキー）
+   - `TURNSTILE_SECRET_KEY`
+   - `CONTACT_TO_EMAIL`
+   - `CONTACT_FROM_EMAIL`
    - Qiita / Zenn のユーザー名（任意）
-3. reCAPTCHA 管理画面でサイトキーの許可ドメインに `saku-space.com` と `localhost` が含まれることを確認する。
+3. ローカル確認では Cloudflare Turnstile の公式テストキーを使える。本番キーを `localhost` に許可しなくてもよい。
 4. `pnpm run dev` で起動し、フォーム送信やダークモード切替など主要機能を確認する。
 
 ## 2. デプロイ環境のシークレット設定
 
-- Cloudflare Pages を利用する場合、プロジェクト設定の環境変数セクションに上記キーを登録する。
+- `TURNSTILE_SECRET_KEY` は Wrangler secret として登録する。
+- `CONTACT_TO_EMAIL`, `CONTACT_FROM_EMAIL`, `PUBLIC_TURNSTILE_SITE_KEY` は公開されても問題ない値として `wrangler.jsonc` の vars か Cloudflare 側の変数で管理する。
+- `CONTACT_DB` の D1 binding と `EMAIL` の Email Sending binding を `wrangler.jsonc` と Cloudflare 側で一致させる。
+- D1 は `saku-space-contact` / `7cfb9a52-694f-4c2b-aa06-0052e6080186` を使用する。schema は `migrations/0001_contact_submissions.sql` と一致させる。
+- Email Sending は `saku-space.com` を sending domain とし、`contact@saku-space.com` から送信する。Cloudflare 側で `cf-bounce.saku-space.com` の MX/SPF/DKIM と `_dmarc.saku-space.com` の DNS status が `ready` であることを確認する。
+- Turnstile 本番 widget は `saku-space-contact` を作成済み。公開サイトキーは `wrangler.jsonc` の `PUBLIC_TURNSTILE_SITE_KEY` に反映済み。
 - Google Analytics など第三者サービスでローテーションを実施した際は、同じ手順で最新値へ更新する。
 - 値の変更後は `pnpm run build` → `pnpm run preview` をローカルで実行し、エラーがないことを確認してからデプロイする。
 

eslint.config.mjs

@@ -23,7 +23,7 @@ const compat = new FlatCompat({
 
 export default [
   {
-    ignores: ['dist/**/*', 'node_modules/**/*', '.astro/**/*', 'videos/**/*'],
+    ignores: ['dist/**/*', 'node_modules/**/*', '.astro/**/*', '.wrangler/**/*', 'videos/**/*'],
   },
   {
     files: ['**/*.css'],

migrations/0001_contact_submissions.sql

@@ -0,0 +1,17 @@
+CREATE TABLE IF NOT EXISTS contact_submissions (
+  id TEXT PRIMARY KEY,
+  name TEXT NOT NULL,
+  email TEXT NOT NULL,
+  subject TEXT NOT NULL,
+  message TEXT NOT NULL,
+  created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  delivery_status TEXT NOT NULL DEFAULT 'pending',
+  provider TEXT NOT NULL DEFAULT 'cloudflare-email',
+  provider_message_id TEXT
+);
+
+CREATE INDEX IF NOT EXISTS idx_contact_submissions_created_at
+  ON contact_submissions (created_at DESC);
+
+CREATE INDEX IF NOT EXISTS idx_contact_submissions_delivery_status
+  ON contact_submissions (delivery_status);

package.json

@@ -28,7 +28,9 @@
     "generate-ogp": "node scripts/build-ogp.js",
     "build:with-ogp": "pnpm run generate-ogp && pnpm run build",
     "build:cloudflare": "pnpm exec playwright install chromium chromium-headless-shell && pnpm run build:with-ogp",
-    "analyze": "ANALYZE=true astro build"
+    "analyze": "ANALYZE=true astro build",
+    "db:migrate:local": "wrangler d1 migrations apply CONTACT_DB --local",
+    "db:migrate:remote": "wrangler d1 migrations apply CONTACT_DB --remote"
   },
   "dependencies": {
     "@astrojs/cloudflare": "^13.5.5",

public/.assetsignore

@@ -0,0 +1,4 @@
+_worker.js
+_routes.json
+.DS_Store
+**/.DS_Store

src/actions/index.ts

@@ -0,0 +1,54 @@
+import { defineAction } from 'astro:actions';
+import { env } from 'cloudflare:workers';
+import { createContactActionHandler, extractContactFormValues } from '../lib/contact/contactAction';
+import { submitContactSubmission } from '../lib/contact/contactService';
+import { createCloudflareEmailNotifier } from '../lib/contact/cloudflareEmailNotifier';
+import { createD1ContactSubmissionRepository } from '../lib/contact/d1Repository';
+import { createTurnstileVerifier } from '../lib/contact/turnstile';
+import type { ContactRuntimeEnv } from '../lib/contact/types';
+
+const isContactRuntimeEnv = (
+  runtimeEnv: Partial<ContactRuntimeEnv>
+): runtimeEnv is ContactRuntimeEnv =>
+  Boolean(
+    runtimeEnv.CONTACT_DB &&
+    runtimeEnv.EMAIL &&
+    runtimeEnv.CONTACT_TO_EMAIL &&
+    runtimeEnv.CONTACT_FROM_EMAIL &&
+    runtimeEnv.TURNSTILE_SECRET_KEY
+  );
+
+export const server = {
+  contact: defineAction({
+    accept: 'form',
+    handler: async (formData, context) => {
+      const runtimeEnv = env as Partial<ContactRuntimeEnv>;
+
+      if (!isContactRuntimeEnv(runtimeEnv)) {
+        return {
+          ok: false as const,
+          values: extractContactFormValues(formData),
+          fieldErrors: {},
+          message: 'お問い合わせ機能の設定が不足しています。',
+        };
+      }
+
+      const actionHandler = createContactActionHandler({
+        submitContactSubmission: (input) =>
+          submitContactSubmission(input, {
+            verifyTurnstile: createTurnstileVerifier({
+              secretKey: runtimeEnv.TURNSTILE_SECRET_KEY,
+            }),
+            repository: createD1ContactSubmissionRepository(runtimeEnv.CONTACT_DB),
+            notifier: createCloudflareEmailNotifier({
+              email: runtimeEnv.EMAIL,
+              toEmail: runtimeEnv.CONTACT_TO_EMAIL,
+              fromEmail: runtimeEnv.CONTACT_FROM_EMAIL,
+            }),
+          }),
+      });
+
+      return actionHandler(formData, { remoteIp: context.clientAddress });
+    },
+  }),
+};

src/cloudflare-env.d.ts

@@ -0,0 +1,3 @@
+declare module 'cloudflare:workers' {
+  export const env: import('./lib/contact/types').ContactRuntimeEnv;
+}