Help us understand the problem. What is going on with this article?

Cloud Functions for FirebaseとFirebase Hostingを連携させる

More than 3 years have passed since last update.

Firebase Hostingで動的コンテンツのホスティングができないか調べていたら、「それCloud Functions for Firebaseでできるよ」というドキュメントが英語版だけ存在した(2017年8月時点)ので実際に試してみました。

Cloud FunctionsとFirebase Hostingを組み合わせるメリットは次の3点かと思います。

  • 静的コンテンツと動的コンテンツを組み合わせやすくなる
  • 動的コンテンツのURLを自由に設定できる
  • カスタムドメインの指定ができる

以下、手順を紹介します。

セットアップ

まずFirebaseのコンソールにログインし、適当なプロジェクトを1個作成します。

次にNode.jsを最新版にアップデートします。私はmacOSを使っていますが、他のOSを利用している場合は適宜読み替えてください。

$ brew upgrade node

次にnpmでFirebase用のパッケージをインストールして、Firebaseにログインします。

$ npm install -g firebase-tools
$ firebase login

作業ディレクトリに移動して初期化します。

$ cd node-example-on-firebase-hosting
$ firebase init

注意点というほどではありませんが、firebase initの最初の質問は、スペースで選択してエンターで確定するというインターフェースになっています。

firebase-init.png

上の図ではFunctionsとHostingを有効にしています。その次の質問で先ほど作成したプロジェクトと紐付けて、初期化を行います。

初期化が終わると必要ファイルが作られているので、public以下やfunctions以下のファイルを適当に編集して、デプロイします。

$ firebase deploy

これで、https://[proj_id].firebaseapp.com/以下にコンテンツがデプロイされます。

Firebase HostingからCloud Functionsの呼び出し

Firebase HostingのURLとCloud Functionsの紐付けは、firebase.jsonrewritesで指定できます。

firebase.json
{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "/**", "function": "nodeinfo"
      }
    ]
  }
}

上記の設定だと、public以下に存在しないURLが指定された場合は全部nodeinfoが処理を行うことになります。

カスタムドメインの設定

Cloud Functions単体ではカスタムドメインの指定はできません。せっかくFirebase Hostingと組み合わせたわけですから、そのメリットを生かす意味でカスタムドメインを紐付けてみましょう。Firebaseコンソールの「Hosting」「ダッシュボート」から「ドメインを接続」を選びます。

connect-domain.png

上記のように自分が管理するドメインのFQDNを指定した上で、DNS設定を行います。

自分がドメインの所有者であることを示した上で1、しばらくすると2SSL証明書が自動的に発行され、カスタムドメインにHTTPS経由でアクセスできるようになります。

デモサイト

そんなこんなで作ったデモサイトは下記です。

上記URLではnodeinfoというパッケージを使ってサーバの情報を表示しています。

今後の変遷を確認する意味で、ブラウザのキャプチャ画像も残しておきます。

上記サイトに対応するgitリポジトリは下記です。同じ内容でデプロイしてみたい方はご利用ください。

料金

気になる料金ですが、無料枠だけでもアプリケーションの性質次第では便利に使えそうな印象です(参照:Firebase 料金表)。

無料枠で使っていて最初に引っかかりそうなのはCloud FunctionsのCPU時間で、月間4万CPU秒が上限です。上記デモサイトの場合は1リクエストで200ms程度かかっているので、月間20万リクエストでクォータに引っかかることになります。これを多いとみるか少ないとみるかは人それぞれでしょうが、仲間内で使う程度のサービスなら十分すぎるように思います。

ただ、無料枠だとGoogle外部へのネットワーク通信ができません。これは作りたいアプリケーションによっては厳しい制約だと言えそうです。また、RDBが欲しいような場合には別のサービスを利用した方が良さそうな気がします。この環境にこだわりたい場合はFirebase Realtime Database(Firebase独自のNoSQL)で頑張れるかもしれません。


  1. 私は「セットアップモード」「詳細設定」を選んでTXTレコードを登録しましたが、通常は「クイックセットアップ」で問題ないと思います 

  2. 私の場合は数時間後には使える状態になっていました 

hnw
境界値バグが大好物。自分の日記で書くには小ネタすぎるネタをQiitaに書いています。
https://hnw.hatenablog.com/
klab
モバイルオンラインゲーム、その他スマートフォン関連サービス、及びサーバーインフラ開発・運用
http://www.klab.com/jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away