この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、橋本です。 Firebase Blogにて、HostingとCloud Functionsの連携について記事があったので実際に試してみました。
https://firebase.googleblog.com/2017/06/serving-dynamic-content-with-cloud.html
今回は、公式リファレンスの内容を元に調査しました。
https://firebase.google.com/docs/hosting/functions
初期設定
Firebase Hostingの初期化
Firebase Hostingの開始方法については、こちらの投稿を参考にしてください。
Firebase HostingでWebページをデプロイする
Firebase Cloud Functionsの初期化
Firebase Cloud Functionsの開始方法については、こちらの投稿を参考にしてください。
Cloud Functions for Firebase[BETA] を使ってみる (HelloWorld編)
設定
上記の初期化が完了すると、以下のようなファイルが作成されています。
├── firebase.json
├── functions
│ ├── index.js
│ ├── node_modules
│ └── package.json
└── public
└── index.html
Cloud Functionsの設定
/functions/index.js
を以下のように編集します。
const functions = require('firebase-functions');
exports.bigben = functions.https.onRequest((req, res) => {
const hours = (new Date().getHours() % 12) + 1 // london is UTC + 1hr;
res.status(200).send(`<!doctype html>
<head>
<title>Time</title>
</head>
<body>
${'BONG '.repeat(hours)}
</body>
</html>`);
});
これは、 Httpリクエストが来たときに、サーバーサイドレンダリングをしてクライアントに返却するFunctionsになります。
Hostingの設定
firebase.json
の rewrites にFunctionsを設定します。
これで、<HostingのURL>/bigben
のアクセス時に、先程のFunctionsが起動します。
{
"hosting": {
"public": "public",
// Add the following rewrites section *within* "hosting"
"rewrites": [ {
"source": "/bigben", "function": "bigben"
} ]
}
}
デプロイ
下記コマンドでデプロイします。
$ firebase deploy
デプロイ完了後、以下のURLにアクセスするとFunctionsが実行された画面が表示されます!
https://<your-project-id>.firebaseapp.com/bigben
まとめ
Httpリクエストを送るだけなら Cloud Functionsだけでもいいんですが、 Hostingと連携するとカスタムドメインが利用できるので、そこが一番のメリットかなと思いました。 これを使えば、カスタムドメインでAPI作成とかもできますね。
以上です。