調べ物

FirebaseのHostingを使ってみた

2021-06-09

alt text

いい感じに使っていたCloudflare Pgaesですが、ある日突然ビルドができずサイト更新ができなくなりました。 ビルドのリトライをするものの、Initializeで止まってしまう・・・・

そんなとき、Cloudflareには開発者用のコミュニティサイトがあります。

https://community.cloudflare.com/

ここは、ユーザ登録制となっており登録したあと、過去に遭遇した事象の検索や、質問を投げかけると開発者またはCloudflareのサポートが回答してくれます。 今回発生した事象を検索すると見つかったものの、的を得た回答はなく、、途方にくれてました。

サイト更新を今すぐしたいので、他のホスティングサーバを用意して解決を図ろうと思いました。 Googleで調べたところ、Gatsbyをそのまま使えそうなのはFirebase！ ということで、Firebaseを使えるようにしてCloudflareのDNSサーバに連携してサイト更新をする、ということを行いました。

今回はその時に行った手順をまとめました。

目次

  1. Firebaseとは？
  2. セットアップ
  3. Deploy
  4. まとめ

Firebaseとは

Firebaseは、Google社2011年に買収したFirebase社の mBaaS(mobile Backend as a Service)です。 もともとはスマホアプリのバックエンド機能（ストレージ、認証、データベース等）を中心にサービスを提供していましたが、近年はWebサイト向けの機能としてHosting機能も提供してます。

今回は、Hosting機能を使うために、Firebaseを使います。

セットアップ

まずはFirebaseのWebサイトにいき、Gmailのアカウントがあれば、そのままログインするだけです。 最初のプロジェクト（？）は、Sparkというプランが適用されます。基本無料で使えます。

その後、公式サイトにある手順に沿ってインストール、設定を行いDeployを行います。

Firebase 公式サイトはこちら

ここでは大まかな流れを説明します。

  • Projectを作成
  • Hostingを選択してWebアプリを選択
  • Webアプリ名、Hostingで利用するためのドメイン名を入力
  • Firebase SDK の追加

  • Firebase CLI をインストール ローカルPCで以下のコマンドを実行してインストールします。

    $ npm install -g firebase-tools
$ firebase login
$ firebase init

    途中コンソール上で、いくつかの質問を効かれるため、適切にspace と y を使って回答します。

  • firebase.json でサイトを指定する

これでDeployまでの手続きが完了しました。

Deploy

Deployは、簡単です。ローカルで gatsby build したあとに、firebase deployを実行するだけになります。 以下は実行したときのコマンドログです。

=== Deploying to '*************'...

i  deploying hosting
i  hosting[my-first-deploy-5732d]: beginning deploy...
i  hosting[my-first-deploy-5732d]: found 1120 files in public
+  hosting[my-first-deploy-5732d]: file upload complete
i  hosting[my-first-deploy-5732d]: finalizing version...
+  hosting[my-first-deploy-5732d]: version finalized
i  hosting[my-first-deploy-5732d]: releasing new version...
+  hosting[my-first-deploy-5732d]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/*****/overview
Hosting URL: https://*****.firebaseapp.com

complte! が出ればOK

まとめ

  • Cloudflare Pagesはたまにビルドができなくなるので、別のミラー環境を揃えておくと障害発生時でも速やかに対応できる
  • Firebase は、導入からデプロイまでとても簡単で素早くできるのでおすすめ
  • 制限あるものの基本無料で利用できるので、普段使わないようなミラーサイトとしては良いのでは

© 2023 tk2021