2022.05.06

【第4回】 Firebase Hosting でスタティックな Web ページをデプロイしよう！【はじめてみよう Firebase】

Firebase
Hosting
Webページ

データベースの接続や外部サービスの連携などが必要な Web アプリケーションでは、 Java や Python などのプログラム言語でバックエンドサービスを構築する必要がありますが、単なる Web ページだけを返すような場合は、何が必要になるでしょうか？
レガシーなシステムでは、 Web ページだけを返すような、シンプルなサービスを作るときでも、わざわざ HTTP サーバを用意して、ファイルを配置して、デプロイする。さらに過去のバージョンに戻せるように、成果物を別で管理するなど簡単な Web ページの公開でもやることはたくさんありました。 Firebase にはこういった面倒なことも代わりにやってくれる便利な機能が備わっています。
今回は、 Firebase Hosting を使ってスタティックな Web ページの公開方法について説明します。

この記事の目的

Firebase Hosting を理解しよう。
Firebase Hosting を使ってスタティックな Web ページをデプロイしよう。
ロールバック機能を使って過去のバージョンに戻そう。

Firebase Hosting とは

Firebase Hosting を使えばスタティックな Web ページを公開することができます。近年では HTML, CSS, Javascript の組み合わせてアプリケーションのような Web ページを実現することができるようになりました。こういった Web ページも Firebase Hosting を使って公開することもできます。
また、 Web ページでは、エッジキャッシュの機能を利用することができるので、世界各地に分散している Google のエッジ接続拠点を使って高速にユーザに配信することができます。
Google Cloud Storage (以下、 GCS) にもスタティックな Web ページのホスティング機能がありますが、 Firebase Hosting はデプロイ単位でロールバックすることができるため、より管理に向いています。 GCS にもバージョン管理機能はありますが、ファイル単位となっており、過去のデプロイの状態に戻すような使い方には向いていません。他にも Firebase Hosting のための専用メニューが用意されていたりなど、より Web ページの管理に向いています。

Firebase Hosting でスタティックな Web ページをデプロイする

では、実際に Web ページをデプロイしてみましょう。

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

こちらの記事【第2回】 Firebase の基本操作を理解しよう！を参考にして、 GCP プロジェクトと Firebase プロジェクトを作成します。

Firebase プロジェクトの設定

Firebase コンソールを開いて、 [開発] > [Hosting] を選択すると次のような画面が表示するので、 [使ってみる] ボタンをクリックします。

以下の画面が表示されたら、 [次へ] ボタンをクリックします。

以下の画面が表示されたら、 [終了] ボタンをクリックします。

次のような画面が表示され、 Firebase Hosting はデプロイを待っている状態になっています。これで設定は完了です。なお、 Firebase Hosting はこの操作を省略することができます。 Realtime Database や Firebase Authentication と違って、明示的に機能を有効にするような操作は必要ありません。コマンドライン上で firebase deploy を実行するだけで自動的に、 Firebase Hosting が有効になります。

画面上の、 URL をクリックすると、新しいタブが起動して、次のような画面が表示されます。 Site Not Found というメッセージが表示されているのが確認できます。これは Firebase Hosting に何もデプロイされていないことを表しています。

Site Not Found

作業ディレクトリと Firebase プロジェクトを関連付ける

Firebase Hosting と関連付けをするための任意の作業ディレクトリを作成します。ここでは my-firebase-project というディレクトリを作成しています。

$ mkdir my-firebase-project

作業ディレクトリに移動して次のコマンドを実行します。

$ cd my-firebase-project
$ firebase init

次のような画面が表示されるので、十字キーを使って [Hosting] にカーソルを合わせて、スペースボタンを押して ON にします。次に Enter キーを押します。

? Select a default Firebase project for this directory と聞いてくるので、対象のプロジェクトを選択し Enter キーを押します。

? What do you want to use as your public directory? と聞いてきたら、 Enter キーを押します。これは Firebase Hosting でデプロイするディレクトリをどれにするか聞いてきています。今回はデフォルトの public ディレクトリを指定するため、そのまま Enter キーを押します。
次に、 ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) と聞いてきたら N を入力して Enter キーを押します。

Firebase initialization complete! と表示されることを確認します。

ディレクトリの確認

Code Editor を起動して、ディレクトリの内容を確認してみましょう。
firebase.json ファイルと public ディレクトリが作成されているのが確認できます。公開用の html ファイルなどは public ディレクトリ以下に配置します。また public ディレクトリ以下に index.html が作成されているのも確認できます。

ディレクトリの確認

ローカルサーバで実行する

firebase serve コマンドを使って、ローカルでテストすることができます。

$ firebase serve

コマンドを実行すると次のようなメッセージが表示され、ローカルサーバが起動します。

コマンドを実行してローカルサーバを起動

Cloud Shell から Web プレビューのポート番号を5000に変更します。画面右上の、 [Web プレビュー] ボタンをクリックして [ポートの変更] を選択します。

Web プレビューのポート番号を変更

[プレビューポートの変更] ダイアログが表示されたら 5000 を指定して、 [変更してプレビュー] ボタンをクリックします。

ポート番号を5000に変更

新しいタブが起動し、次のような画面が表示されるのが確認できます。また、 Cloud Shell ではログが出力されているのも確認できます。このようにローカルサーバを使うことで Firebase Hosting サーバにデプロイする前に動作確認を行うことができます。

デプロイ前に動作確認

デプロイする

public ディレクトリに移動して、次のコマンドを実行して、 Firebase Hosting をデプロイします。

$ cd public
$ firebase deploy

以下のようなメッセージが表示されるのを確認します。メッセージの Hosting URL をクリックして新しいタブを起動します。

Firebase Hosting をデプロイ

Web ページを確認する

Hosting URL をクリックすると新しいタブが開かれてローカルで実行したときの同じ画面が表示されているのを確認します。

Web ページを確認

Firebase コンソールを確認する

次に、 Firebase コンソールから [開発] > [Hosting] を開きます。画面が次のようになっているのが確認できます。

Hosting のダッシュボード

ロールバック機能を使って過去のバージョンに戻す

Firebase Hosting にはロールバック機能が備わっており、デプロイ単位でいつでも過去のバージョンにロールバックすることができます。
それでは、ロールバック機能を使ってみましょう

新しい HTML ファイルを用意する

public ディレクトリ内の index.html ファイル内容を以下のように変更します。

<!DOCTYPE html>
<html>
    <head>
        <title>Firebase Hosting</title>
    </head>
    <body>
        <p>Hello, Firebase Hosting!</p>
    </body>
</html>