TL;DR
Netlifyホスティングで開発開始→最終的にFirebase Hosting x Functionsを使用したのでその経緯等
Netlify
初期開発時はNetlifyを使って作成しました。
これも流行りに乗ったというのが大きな所でしたが、
Githubでコードを管理してdeployまでがとても簡単でした。
Firebaseに移行した理由としては問い合わせフォームを作る（メールで送信する）という
機能をつけようとした時にNetlify FormやLamdaとの連携を使えばNetlifyでもできそうだったものの、他社サービス連携が必要でした。
それであればFirebase Hosting x Cloud Functions for Firebases で同サービス内で完結出来たほうがスッキリするなと思い乗り換えました。
あとは単純にFirebaseも触ってみたかったという所ですね。
Netlify vs Firebase
一概にFirebaseの方が良いということは全く無いと思いますので、思った諸々を上げてみます。
Netlify
- ビルドコマンドを実行してdeployしてくれるCI的側面がある
- これによってプルリクエストやブランチのプレビュー環境も自動的に作ることができる
- のでチーム運用等ではレビュー用の確認環境が立つので便利そうでした
- ただホスティング以外のことをやろうとすると外部サービス連携等を上手く使わないといけないので手間
Firebase
- Firebaseファミリーの中にログイン、DB系サービスやFunctions等が含まれており多機能
- CI的なビルド等がなさそうなのでそこはNetlifyよりも使い勝手が悪い
Netlify -> Firebase
両方便利なサービスなので移行自体はとても簡単でした。
Netlifyで実行していたビルドタスクをFirebaseのpredeployに設定したら大体そのままいけます。
※ Firebaseの初期化等は別途必要
Cloud Functions for Firebases
Cloud Functions for Firebases とは
まだBETAですが、所謂Serverlessのサービスですね。
後ろでExpress等も動かせるので普通にバックエンドなサービスも動かせるような気がします。
今回は問い合わせフォームからPOSTしてその内容を
送信者に受付メール、自身に一緒にBCCでメール送信するという実装を行いました。
この辺りはログイン機能もあるのでDB書き込みして管理画面みたいなのから確認できるようにする、というのも面白かったかもしれません。
今回はめったに問い合わせこないだろうというノリだったので単純にメールで送信できればいいやという感じでした。
使ったのは
mail送信としてnodemailer、バリデーションとしてJoiを使いました。
両方とても良いパッケージだと思います。
実際の実装
実装自体はちょっとバリデーションを端折ったり諸々設定変えて記載しますが下記のような感じです。
それぞれ公式ドキュメントの序盤を読めば実装できるようなレベルだと思います。
const functions = require('firebase-functions');
const api = require('./api')
exports.api = functions.https.onRequest(api)
const express = require('express');
const app = express();
const nodemailer = require('nodemailer');
const account = {
user: 'hogehoge',
pass: 'fugafuga',
};
const transporter = nodemailer.createTransport({
host: 'smtp.gmail.com',
secure: true, // true for 465, false for other ports
auth: {
user: account.user, // generated ethereal user
pass: account.pass // generated ethereal password
}
});
app.post('/api/hogehoge', (req, res) => {
const mailOptions = {
from: '"no-reply@dummy.com',
to: req.body.email || 'address@dummy.com',
bcc: 'address@dummy.com',
subject: 'お問い合わせ内容の確認',
text: 'メール内容',
};
// send mail with defined transport object
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
return res.status(500).json({
error: error,
})
}
return res.json({
error: ""
})
})
})
module.exports = app;
Hosting x Functionsを連携する場合の設定
ホスティング側の方で特定URLをFunctionsに向けてrewriteする設定が必要です。
上記の実装（api配下をapiというfunctionに飛ばしたい）の場合は下記のような設定が必要です
{
"rewrites": [
{
"source": "/api/**", "function": "api"
}
]
}
おわりに
NetlifyもFirebaseもとても良いサービスなのですが、
用途に寄って向き不向きがあるので理解した上で上手く使えばいいと思います！
個人的には開発フロー的には両方組み合わせて使う場面も有りえるかなと思いました。
目次
このサイト作ったぞシリーズです。