Astro + CloudFlare Pages の構成で作ったJAMstack構成のサイトに、問い合わせフォームを追加したい
猫王
先日、Astro + Cloudflare Pagesで自作のブログを作ってみた。
作ったきり放置しているが、そろそろコンテンツを充実させていきたい
猫王形から入るタイプなので、とりあえず問い合わせフォームを追加したい、と思い実現方法を調べた。
NetlifyやらSSGFormsといったマネージドのサービスはいろいろあるけど、一旦ある程度自前で作りたいと思ったので、
フォームに入力→送信したら自分にメールが飛ぶ、みたいな簡単なものを作ろうと調べ始めた。
で、出てきたのが下記の記事。「これいいじゃん。」と思ってとりあえずサンプル通りやってみたが、これが動かない。
猫王具体的にどう動かないか、というと
サンプル通り作って、npm run previewを走らせた後、
フォーム入力して送信すると、
405エラーが返される。
猫王多分POSTを叩くための設定ができてないとかなんだろうけど、結局どうすればいいのかよく分からず行き詰まる。
で、若干途方に暮れていたところ行き着いたのは、この動画。
猫王見ると、Formで入力した情報をもとにResend経由でメールを送信する手順が解説されていて、リポジトリも公開されている。
猫王これいいじゃん、ということでリポジトリをもとに実装してみたところ、うまくいった。
なんでうまくいったかはぶっちゃけよくわかっちゃあいないが、動けばよかろうなのだ。
次は、これを自身のサイトに組み込んでいこうと思う。
猫王結局、そのまま組み込んでも動かない。どうも環境変数周りでエラーが起きている気がする。Cloudflareの環境変数むずい。
猫王トライ＆エラーの末、、原因箇所がわかった。
そもそも、元のページはwrangerの設定周りが一切できていなかったので、一旦scaffoldで別のプロジェクトを作って、そこにファイル群を移動。
その後色々と検証したところ、やはり原因は環境変数の取得だった。
サーバーサイドの処理（フォームの情報処理とメール送信）をsrc/actionsのスクリプトに書いていたのだが、そこからCloudflare側に設定している環境変数を取得できていなかった。
取得方法だが、handlerの第二引数contextからlocals.runtime.envとたどることで、設定されている環境変数一覧を取ってこれるようだ。
ローカルでの動作確認時は、ルートディレクトリの.dev.varsに設定されている値を取得してくる挙動になっている模様。
ここまでわかればいけそうだ。