Amazon S3 の静的ウェブサイトにお問い合わせフォームを追加する

S3 のウェブサイトエンドポイントはフォームの POST に 405 MethodNotAllowed を返すので、フォームの action は Ikiform のエンドポイントに向けます。エンドポイントは平文の http: なので、そこへ戻る _redirect はたどられません。フォーム設定の Redirect after submit を設定するか、https: のために CloudFront を前段に置いてください。バケットの REST エンドポイントの前に CloudFront を置く場合、デフォルトルートオブジェクトはルートにしか適用されないので、thanks.html のような完全なファイル名にリダイレクトします。

S3 ならではの違い

静的ウェブサイトホスティングを設定したバケットには、http://www.example.com.s3-website-us-east-1.amazonaws.com のような専用のウェブサイトエンドポイントが付きます。AWS のドキュメントによると、オブジェクトに対しては GET と HEAD リクエストしかサポートしていません。フォームを送信すると HTML のエラーページが返ります:

<html>
<head><title>405 Method Not Allowed</title></head>
<body>
<h1>405 Method Not Allowed</h1>
<ul>
<li>Code: MethodNotAllowed</li>
<li>Message: The specified method is not allowed against this resource.</li>
<li>Method: POST</li>
<li>ResourceType: OBJECT</li>

お問い合わせフォームに影響する S3 の特徴があと 3 つあります:

https: のサイトには、CloudFront 上で動く Amplify Hosting か、バケットの前に CloudFront を置く構成を AWS は推奨しています。フォームはどちらでも動きます。変わるのは、送信後に訪問者がたどり着く場所です。

どの CloudFront オリジンを使うか

CloudFront がバケットを読む方法は 2 つあり、どちらを選ぶかでサンクスページの URL の形が決まります:

完全なファイル名ならどちらでも使えるので、サンプルではそうしています。CloudFront を自分で運用したくなければ、Amplify Hosting で https: とマネージド CDN 付きでバケットからデプロイできます。その場合もフォームの変更は不要です。

フォーム

S3 のサイトは企業サイトであることが多いので、このフォームでは仕事用のメールアドレスと会社名を尋ねます。thanks.html と同じ場所に contact.html としてアップロードします:

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

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

  <label for="company">Company</label>
  <input id="company" name="company" autocomplete="organization" />

  <label for="message">How can we help?</label>
  <textarea id="message" name="message" rows="6" minlength="10" required></textarea>

  <input type="hidden" name="_redirect" value="https://www.example.com/thanks.html" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button type="submit">Send</button>
</form>

• _redirect はファイル名付きで CloudFront のドメインを指しています。www.example.com か example.com が Allowed domains にある場合にだけ従います。
• 素の http: エンドポイントでは、_redirect の入力欄を削除し、代わりに Redirect after submit をサンクスページに設定します。この設定は自分のチームしか変更できないので、http: の URL も受け付けます。
• フィールド名は email のままにしてください。通知メールはこれを reply-to アドレスとして使います。

企業サイトでは、問い合わせの受信トレイを複数人で読むのが普通です。確認済みの通知先をフォームに最大 10 件まで追加すると、全員にメッセージが届き、Reply を押した人が送信者に直接返信できます。共有チャンネルやチケットのキューにも届けたい場合は、署名付き Webhook を追加し、Zapier や自分のコードで振り分けてください。company フィールドはプレーンテキストで届くので、どちらでもそのまま絞り込みに使えます。

アップロードの前に、localhost を Allowed domains に入れてローカルサーバーでページをテストします。localhost からの送信はテストとして扱われるので、バケットで配信する前にフォームを仕上げられます。

フォルダーをバケットに同期し、CloudFront でページを無効化して、新しいフォームがすぐに配信されるようにします:

aws s3 sync ./site s3://www.example.com --delete

aws cloudfront create-invalidation --distribution-id E1EXAMPLE --paths "/contact.html" "/thanks.html"

AWS のホストでの許可ドメイン

amazonaws.com、リージョンごとの s3-website のサフィックス、cloudfront.net だけを追加してはいけません。世界中のすべてのバケットやディストリビューションが一致してしまいます。AWS が S3 ウェブサイトエンドポイントのドメインを Public Suffix List に登録しているのも同じ理由で、バケットはそれぞれ別のサイトだからです。

CloudFront でヘッダーを付ける

S3 のオブジェクトメタデータでは Content-Security-Policy を設定できないので、CloudFront のレスポンスヘッダーポリシーで設定し、ディストリビューションのデフォルトキャッシュ動作に関連付けます。ヘッダーの値は 1,783 文字までです:

{
  "Name": "site-csp",
  "SecurityHeadersConfig": {
    "ContentSecurityPolicy": {
      "Override": true,
      "ContentSecurityPolicy": "default-src 'self'; form-action 'self' https://ikiform.com; connect-src 'self' https://ikiform.com"
    }
  }
}

aws cloudfront create-response-headers-policy --response-headers-policy-config file://csp-policy.json

動作を確認する

1. 上の表のドメインと、テスト中は localhost を追加します。
2. CloudFront のドメインから送信します。独自ドメインの thanks.html に移動するはずです。
3. 素のウェブサイトエンドポイントも公開したままにする場合は、そこから送信し、Redirect after submit で設定したページに移動することを確認します。
4. ダッシュボードで Submissions を開きます。送ったすべてのフィールドを含む新しい送信データがあります。
5. 通知の受信者それぞれの受信トレイを確認します。各自にフィールド入りのメールが届き、フォームに email フィールドがあれば Reply の宛先は送信者になります。
6. 何も届かない場合は、ダッシュボードのステータスフィルターを Spam に切り替えてください。スパムにも本物の送信と同じ成功の応答が返ります。

ハマりどころ

よくある質問