firebaseのfunctionsを使い，メールフォームを作成する。

firebaseのfunctionsを使い，メールフォームを作る。

firebase hostingで，静的なウェブサイトを公開できる。firebase functionsを使い，メールフォームの設置が可能である。

なお，この文書はあくまでメモであり完全な説明では無い。

• サイト本体は，firebase hostingで静的サイトとして公開。
• hosting上には，formのページ，完了ページ，処理失敗を知らせるページを公開。
• formのページは，functionsにformに入力内容をpostする。
• postを受け取ったfunctionは，受け取ったデータをメールで送信し，処理終了後，hosting上の完了ページに303リダイレクトする。
• functionの処理が失敗した場合には，hosting上の処理失敗ページに303リダイレクト。

firebase hostingでの静的サイトでの公開

Firebase Hosting のスタートガイドやホスティング動作を構成する，カスタム ドメインを接続するを参考に行う。

特に難しくないはず。

firebase serveでfirebaseのhostingをローカルで使える。

firebase functionをhostingに接続する。

メールフォームを使うためには，functionsをhostingに接続する。Cloud Functions を使用した動的コンテンツの配信とマイクロサービスのホスティング に従う。

上記のページにもあるが，hostingは，us-central1にあるfunctionsとのみ接続できるので気をつけること。

hostingとfunctionsの接続は，firebase.jsonに，redirectを書く。関数に Hosting リクエストを送信するを参照。hosting上のpathと，functions上の関数名（index.jsでexportsした名前）をfirebase.jsonで紐付ける。

finctionsを書く。

functionsは，functions/の下のindex.jsで，exportsして作成する。 firebaseのfunctionsはnode10で動作するため，exports/requireが使える（export/importは使えない）ので，ファイルを分割することも可能。

post先の処理

処理は functions.https.onRequest の引数に処理を書いてもよい。

expressも利用可能。expressを使う場合は，処理を書いたexpressにインスタンスを， functions.https.onRequest の引数に入れる。

expressでの処理

expressでの処理は，ルーティングを確認。

firebase functionsで，request bodyを処理しているらしいため（リクエストからの値の読み込み），expressのmiddleware（express.json()やexpress.urlencoded）を使わなくても，req.body.nameでpostした値が呼び出せる。

multipart/form-dataはfirebase側では処理できない。ファイルは，おとなしくjsonでpostするほうが良い。それか，cloud storageを使い，functionsを経由しないファイルの送信を検討するのも良いかもしれない。やったことないけど。

functionsによるメールの送信

nodemailerを使う。

smtpサーバは，gmailを使うとめんどくさいので，別途用意したSESかSendGridを使うほうが手っ取り早い。

処理後のredirect

expressを使っている場合には，

app.post((req, res) =>{
  res.status(303).redirect("/redirect/to/path/")
})

とする。redirect時のステータスコードは，303 other seeを使うのがよいのかしら？

最後に

SSG（静的サイトジェネレータ）とGitLabのCIをうまく組み合わせると，firebaseのhositngとfunctionsを使い，CMSっぽいことができるのかもしれない。試してないけど。