Firebase Hosting を使った静的サイトのホスティング方法

FirebaseはGoogleが提供するサービスの一つでモバイルアプリやWebアプリケーション開発で用いられる人気プラットフォームです。BaaS（Backend as a Service）と呼ばれるクラウドサービスの一種に分類されます。Firebaseに関して詳しく知りたい方は以下記事を参照してみてください。

Firebaseの機能と特徴

この記事ではFirebaseが持つ機能の一つFirebase Hostingを用いてHTML、CSS、JavaScript、画像ファイルなどを短時間で静的ホスティングする方法を紹介します。

Firebase でプロジェクトを作成する

Firebaseの公式サイトへアクセスし、「使ってみる」からプロジェクトの作成準備を行います。

https://firebase.google.com/

Firebase

コンソール画面が立ち上がったら、「プロジェクトを追加」から新規プロジェクトの作成を行います。

以下画面が表示されたらプロジェクト名を設定します。

Googleアナリティクス（分析ツール）を入れたい場合はここで有効にしておきます。今回は不要なので利用せずにプロジェクトを作成します。

以下のように管理画面が表示されればGUIでの操作は一旦終了します。

Firebaseへデプロイするコンテンツの用意

ホスティングしたいコンテンツを用意します。ここではReactのフレームワークGatsby.jsを使ってサンプルプロジェクトをサクッと立ち上げたいと思います。

Gatsbyに関する細かい説明は割愛しますので詳しく知りたい方は以下リンクを参照してください。

Quick Start

Quick Start with Gatsby: Create, Develop, and Build Gatsby Sites From the Command Line

以下コマンドでGatsby CLIをインストールします。

npm install -g gatsby-cli

プロジェクトを次のコマンドで作成します。

gatsby new プロジェクト名

作成したプロジェクトへ移動します。

cd プロジェクト名

以下コマンドでpublicファイルに静的コンテンツを出力します。

gatsby build

＊ホスティングするコンテンツ準備にGatsbyを用いる必要はありません。各自好きな方法でアップしたいファイルを用意してください。

Firebase CLIのインストール

ローカルからFirebaseへ接続するためにはFirebase CLIというツールをインストールする必要があります。

Firebase CLI リファレンス

インストール方法はいくつかありますが、ここではnpmを利用してインストールする方法で進めます。以下コマンドを実行してグローバルでfirebaseコマンドが利用できるようにします。

npm install -g firebase-tools

Firebaseへのログイン

ローカルからファイルをデプロイするためにはFirebaseへのアカウント認証を通しておく必要があります。以下コマンドでログインの確認ができればFirebaseのコンソールで作成したプロジェクトへ接続できるようになります。

firebase login

Firebaseプロジェクトの初期化

先ほど用意したローカルのプロジェクトディレクトリで以下コマンドを実行します。

firebase init

すると初期設定を質問形式で行うことができます。
静的コンテンツをアップするだけであればHostingのみをスペースで選択し、次へ進みます。

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
 ◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features

次にアップ先のプロジェクトを選択します。既にプロジェクト自体はFirebaseで作成済みなので Use an existing project を選択します。

? Please select an option: 
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project

Firebaseのコンソールで作成したプロジェクトが候補として表示されますので選択して次へ進めます。

公開ディレクトリが何か聞かれるので入力します。デフォルトではpublicになっています。

? What do you want to use as your public directory? (public)

Gatsbyでコンテンツを用意した場合は公開ディレクトリがpublicになっていますのでそのままエンターで次の質問へ進みます。

SPA(Single Page Application)構成でプロジェクトを立ち上げるか確認されます。SPAを選択した場合はFirebaseが書き換え構成を自動で追加します。ここではNoを選択します。

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

続けて404ページ、index.html について確認されるので回答します。OverwriteをYesにしてしまうとFirebase側でファイルが上書きされてしまうので注意してください。

Firebaseプロジェクトのデプロイ

用意したコンテンツをデプロイしたい場合はローカルのプロジェクトディレクトリで以下コマンドを実行します。

firebase deploy

以上でコンテンツのデプロイが完了しました。ターミナルに以下URLが表示されるのでアクセスしてみてください。
Project Console:（プロジェクトコンソール画面のURL）
Hosting URL:（プロジェクトURL）

用意したコンテンツが表示されれば完了です。

補足

デフォルトではプロジェクト名がFirebaseのドメインとして割り当てられているはずです。独自ドメインを指定したい場合はFirebaseのプロジェクトコンソール画面のHostingからカスタムドメインを追加できます。

まとめ

Firebaseを利用することでバックエンド作業を簡略化し、素早くサービスを立ち上げることができます。特に手動デプロイだけであれば比較的簡単にホスティングすることができるので積極的に利用していきたいですね。