Firebase HostingとCloud Functionsの連携

#Firebase

#Google Cloud Functions

橋本早樹

2017.07.07

この記事は公開されてから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"
    } ]

  }
}