Firebase Hostingを使えば静的なWebサイトを手軽にホスティングできます。しかし、Webサイトは静的な情報だけでは物足りないものです。たとえばお問い合わせフォームなど、動的な要素も組み込みたくなるでしょう。
Firebase HostingにはCloud Functions for Firebaseと連携して動的コンテンツやAPIを追加する機能があります。今回はその機能を使ってお問い合わせフォームを作ってみました。
Hosting側の設定
firebase CLIでプロジェクトを作成したら、firebase.jsonを開きます。そして、次のようにリライト条件を追加します。
"rewrites": [ { "source": "/functions/**", "function":"contact" } ]
Hosting側にて、HTMLでお問い合わせフォームを作ります。今回はBootstrapで作成しています。
次にフォームを送信した際の処理として、APIを呼び出します。リライト条件に従って /functions/ としています。
const d = document.querySelector;
await fetch('/functions/', {
method: 'post',
body: JSON.stringify({
email: d('#email').value,
name: d('#name').value,
body: d('#body').value。
}),
headers: {
'Content-Type': 'application/json'
}
});
alert('お問い合わせありがとうございます');
Functionの設定
Firebase CLIでFunctionを作成したら、まずCustomers Mail CloudのNode.jsライブラリを追加します。
npm i customersmailcloud -S
次に環境変数を設定します。今回は以下を設定しています。
- APIユーザ
- APIキー
- From（メールアドレス）
firebase functions:config:set cmc.apiuser=AAAA firebase functions:config:set cmc.apikey=BBBB firebase functions:config:set cmc.from=info@smtps.jp
コードを編集します。今回はTypeScriptを利用しています。まずライブラリを読み込みます。
const { CustomersMailCloud } = require('customersmailcloud');
そして contact 関数を定義します。
export const contact = functions.https.onRequest( async (request, response) => {
}
以下は contact 関数の中の実装です。まず設定を取得してCustomers Mail Cloudを初期化します。
const config = functions.config().cmc; const client = new CustomersMailCloud(config.apiuser, config.apikey)
次にAPIのエンドポイントを選択します。 trial / standard / pro から選択します。
client.trial();
そしてメールを作成します。名前や本文はお問い合わせフォームから送られてきた情報を利用します。
const {email, name, body} = request.body;
client
.setFrom('Admin', config.from)
.addTo(name, email)
.setSubject('お問い合わせがありました')
.setText(`お問い合わせ内容\n${body}`)
最後にメールを送信します。
try {
const res = await client.send()
response.send(res);
} catch (e) {
response.send(e);
}
試す
実装がうまくいっていれば、お問い合わせフォームからメール送信が行えるはずです。
まとめ
Firebase Hosting と Cloud Functionsを組み合わせればWebサイトに動的な要素を簡単に実装できます。同一ドメイン内であれば、CORSも気にすることはありません。Firebase HostingとCustomers Mail Cloudを組み合わせる際に参考にしてください。
