Vercel でホストしたお問い合わせフォームの 405 エラーを直す

Vercel は静的ビルドをファイルとして配信するので、ファイルへの POST は、そのパスを処理する関数がないため空のボディの 405 になります。フォームの action を Ikiform のエンドポイントに向けるか、送信を受け付ける Vercel Function を書いてください。Ikiform を使う場合は、Vercel の環境ごとにフォーム ID を設定し、プレビューはテスト用フォームに、本番は本物のフォームに送信されるようにします。

Vercel が 405 を返す理由

Vercel は各リクエストを静的ファイルか関数に振り分けます。静的サイト、Vite のビルド、output: "export" の Next.js アプリにはファイルしかありません。/contact への GET はファイルを返しますが、同じパスへの POST には行き先がないので、あなたのコードが動く前に Vercel が拒否します:

curl -i -X POST -d "message=hello" https://your-project.vercel.app/contact

HTTP/2 405
server: Vercel
content-disposition: inline
x-vercel-cache: HIT
content-length: 0

応答にボディがないので、ブラウザーには空白のページか独自のエラー画面が表示されます。原因になる構成は 3 つあります:

つまり、関数を追加するか、送信を別の場所に送るかのどちらかです。api/contact.ts の Vercel Function でも動きますが、メール API、スパム除外、レート制限が必要になり、それを自分で保守することになります。送信を Ikiform に送れば、デプロイは静的なままです。HTML の修正は属性 1 つだけです:

<form method="post">
  <input name="email" type="email" required />
  <textarea name="message" required></textarea>
  <button>Send</button>
</form>

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">

関数を自分で書きたい場合

自分のコードしか届かない場所にメッセージを送る必要があるなら、関数は妥当な選択です。始める前に、必要なものを数えておきましょう:

• メールプロバイダーのアカウント、認証済みの送信ドメイン、Vercel の環境変数に入れた API キー。
• サーバー側のバリデーション。ブラウザーの required 属性は便利なだけで、チェックにはなりません。
• スパム除外とレート制限。なければ、インターネット中のボットからのメールが届くお問い合わせフォームになります。
• メールプロバイダーが停止しているときにメッセージを保管する場所と、再送する方法。

フォームバックエンドなら、この一覧をまとめて引き受けます。それでも自分のコードを挟みたいなら、フォームの送信先は Ikiform のままにして、関数で署名付き Webhook を受け取ってください。ハンドラーは自分のサーバーで紹介しています。

Vercel の環境ごとにフォーム ID を分ける

Vercel ではプルリクエストごとにプレビューのデプロイが作られます。プレビューが本番のフォームに送信すると、テストのメッセージがすべて本物のメッセージと並んで受信トレイに届きます。プレビュー用に 2 つ目の Ikiform フォームを作り、Vercel の環境変数で切り替えましょう。Settings › Environment Variables で、同じ名前を 2 回追加します:

VITE_IKIFORM_FORM_ID   Production   frm_xxxxxxxxxxxxxxxx
VITE_IKIFORM_FORM_ID   Preview      frm_yyyyyyyyyyyyyyyy

Vite はビルド時に index.html の %NAME% プレースホルダーを VITE_ 変数で置き換えるので、プレーンな HTML フォームでも JavaScript なしで使えます。VITE_VERCEL_ENV は Vite のプロジェクトで Vercel が設定する変数で、メッセージがどのデプロイから来たかを記録します:

<form id="contact" action="https://ikiform.com/f/%VITE_IKIFORM_FORM_ID%" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name" required />

  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="6" minlength="10" required></textarea>

  <input type="hidden" name="build" value="%VITE_VERCEL_ENV%" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button type="submit">Send message</button>
</form>

• 静的サイトでは、Vercel はビルド時に環境変数を読みます。変更したら再デプロイしてください。そうしないと HTML に古い値が残ります。
• 変数が存在しないとき、Vite はプレースホルダーをそのまま残すので、ID がないと %VITE_IKIFORM_FORM_ID% のまま公開され、すべての送信がフォームに届く前に 400 Bad Request で失敗します。下のガードでそれを検出します。
• フォーム ID はどちらにせよ公開されます。ブラウザーに届くのは VITE_ 変数だけなので、そこにシークレットを入れてはいけません。

const form = document.querySelector("#contact");

if (form && form.action.includes("%VITE_")) {
  console.error("VITE_IKIFORM_FORM_ID is not set for this Vercel environment");
  form.querySelector("button").disabled = true;
}

output: "export" の Next.js を使っていますか？その場合はクライアントコンポーネントで process.env.NEXT_PUBLIC_IKIFORM_FORM_ID を読んでください。静的エクスポート用のフォームはメインガイドにあります。Next.js アプリが Vercel のサーバーで動いているなら、Server Action からシークレットキーで送信できます。Next.js ガイドを参照してください。

ヘッダーとクリーン URL

サイトで Content-Security-Policy を設定しているなら、vercel.json で設定して Ikiform を含めてください。cleanUrls を使うと thanks.html が /thanks で配信され、リダイレクト先がすっきりします:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "cleanUrls": true,
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; form-action 'self' https://ikiform.com; connect-src 'self' https://ikiform.com"
        }
      ]
    }
  ]
}

プレビューと許可ドメイン

your-project-git-branch-team.vercel.app のようなプレビューの URL は your-project.vercel.app のサブドメインではないので、Allowed domains で一致しません。そこからの送信は origin_mismatch でスパムになります。これもプレビュー用のフォームを分ける理由の 1 つです。プレビュー用フォームの許可ドメインは空のままにするか、テストするプレビューのホストを追加してください。

動作を確認する

1. 修正前に本番の URL に対して上の curl を実行し、405 を確認します。修正後は、デプロイされた HTML のフォームの action が https://ikiform.com/f/ で始まります。
2. プレビューのデプロイを開いて送信し、メッセージが本番ではなくプレビュー用のフォームに届くことを確認します。
3. 本番のドメインで送信し、build フィールドが production になっていることを確認します。
4. 通知の受信者それぞれの受信トレイを確認します。各自にフィールド入りのメールが届き、フォームに email フィールドがあれば Reply の宛先は送信者になります。
5. 何も届かない場合は、ダッシュボードのステータスフィルターを Spam に切り替えてください。スパムにも本物の送信と同じ成功の応答が返ります。

ハマりどころ

よくある質問