FirebaseでWEBサイトを開設するFirebase Hostingの手順を詳しく解説

Firebase Hostingは、Firebase内でWEBサイトを公開（ホスティング）できる機能です。

Wordpressなどのシステムは入れる事ができませんが、HTMLサイトならOKです。

配信はCDNでSSL化されたアドレスになり、デプロイ単位で前の状態にロールバックする事が可能です。

Firebase Hostingとは

本記事では、FirebaseのバックエンドサービスでWEBサイトをホスティングする方法について紹介します。

Firebaseのサーバー利用料は無料（無料プラン枠内転送量あり）です。

WEBサイト用のサーバーをレンタルしていなかったり、ポートフォリオなど個人サイトを開設したい場合は利用価値があります。

Firebaseを利用する準備やインストール方法については以下の記事をご参照下さい。

上記ページで準備まで済んでいる事を前提に進めます。

Firebase Hostingの特徴

Firebase Hostingは、アプリケーションのホスティングを行う機能です。

小・中規模のWEBサイトの開設運営ができます（※大規模サイト運営には向いていません）。

過去の状態に戻れる

Firebaseでは、サーバーにサイトをアップ（デプロイ）するごとにそのデータ履歴が自動保存されます。

つまり過去のリリース状態（デプロイ状態）へ、簡単に戻る事ができる訳です。

デプロイ単位でロールバックすることができる点は、より管理に向いていると言えますね。

CDN配信でSSL経由

Firebase hostingの配信は、グローバルコンテンツ配信ネットワーク、いわゆる「CDN」での配信です。

エッジキャッシュ機能を利用することができるので、世界各地のGoogleのエッジ接続拠点を使って高速配信することができる訳です。

さらに「SSL経由」でコンテンツを配信するので、必ずhttps:通信になります。

ドメインが発行される

公開URLは通常、Firebaseの発行するドメインになります。

上記の様にデフォルトでは「firebaseapp.com」というドメインでホスティングされますが、独自ドメインも設定可能です。

独自ドメインでの解説はまた別の記事で紹介するつもりです。

まずはFirebaseの発行するドメインを使って開設をしていきます。

Firebase Consoleのセットアップ

まずはFirebase Consoleを開きます。前の記事では新規プロジェクトまで作成をしていました。

左から新たにプロジェクトを作成するか、前回作成した右のプロジェクト名をそのままクリックします。

プロジェクトの作成方法についても、前の記事をご参照ください。

Firebase Console画面

ここからは生成したプロジェクトを開いたページになります。

左の「構築」メニューから「Hosting」をクリックします。

すると以下のような画面が表示されますので、「はじめる」ボタンをクリックします。

Firebase Hostingの設定

1番から3番までの工程がありますが、実際の設定はコマンドライン側でおこないます。

ですので、ここではすべてスキップしていきます。

1番のFirebase CLIのインストールは前回までに済ませているので、次へを押しましょう。

2番のプロジェクトの初期化はコマンドラインで後で行いますので、次へを押します。

3番のデプロイもあとから行いますので、「コンソールへ進む」をクリックします。

ダッシュボードが開きます。

Hositingダッシュボート

公開URL

画面上にある2つのURLはWEBページ専用に設けられたアドレスです。

クリックすると新しいタブが起動し、次のような画面が表示されます。

これはFirebase Hostingにまだ何もデプロイされていないためですね。

リリース履歴

ダッシュボードの下に「最初のリリースを待機しています」と表示されている欄がありますよね。

ここにサイトをアップする（デプロイ）ごとに、「リリース履歴」としてデータ表示が蓄積されていきます。

このリリース履歴から、デプロイ単位で過去の状態に戻れる訳ですね。

WEBページの準備

まずは公開するWEBページを準備しておきましょう。

htmlファイル、およびCSS・JS・imagesフォルダ等一式を一つのフォルダに入れておきます。

今回フォルダ名を「lpeg-hosting」にしましたが、このディレクトリ名は何でも構いません。

今回作ったWEBページを確認してみます。

今回作ったWEBページ

ロゴとlpeg-hostingのタイトルテキストのみのページです。

今回はサンプルのため、上記の様に非常に単純なWEBページにしています。

本来はもっと複雑でファイル量も多くなるはずですが、HTMLサイトならば通常のレンタルサーバーと同様に公開できます。

コマンドラインによるfirebase操作

ではコマンドラインを使って、Firebase Hostingへデプロイするまでの操作を紹介します。

コマンドラインでの移動

コマンドプロンプトを開いて、まずはWEBページを保存しているディレクトリに移動しましょう。

cd C:\Users\xxx\xxx\xxx\lpeg-hosting パスは実際の環境に合わせて下さい

スムーズに移動するためには

上記のC:からのパスは手入力するよりも、コピペしてきた方が簡単です。

まずWEBページを保存しているフォルダ（lpeg-hositng）を開きましょう。

右上の「フォルダマーク」をクリックすると絶対パスが表示されるので、右クリックしてコピーしましょう。

cd の後にそれをペーストするだけ済みます。

Firebaseの初期化

次に以下の様に入力して、Firebaseを初期化していきます。

firebase init

Firebaseに接続されました。

Are you ready to proceed？と聞かれるので「Y」を押しましょう。

Firebase Hostingサービス選択

まずは利用するサービスの選択です。

上記の様にいくつかの項目が表示されます。

キーボードの矢印「↑」「↓」を押すと青い選択テキストが移動しますよね。

リストのうちHostingの項目は2つです。下の項目の方を青くして「spaceキー」を押しましょう。

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

すると先頭の()の中に＊が入りますので、そのままEnterを押しましょう。

プロジェクトの選択

初めて設定をする場合は上記の様な選択項目が出ます。

以下の項目に合わせてEnterを押しましょう。

Use an existing project

既に作成されているプロジェクトを利用する選択です。

プロジェクト名の選択

次にプロジェクト名を聞いてきますので、Firebase Consoleで作成したプロジェクト名を選択しましょう。

Select a default Firebase project for this directory:

作ったプロジェクト名が青くなっている事を確認して、Enterを押します。

プロジェクトが複数ある場合は↓で移動しましょう。

オプション選択

次はオプション選択です。以下の様な形になる様に選択していきます。

一つずつ説明していきますね。

公開フォルダ「public」

まず以下の項目に対しては、そのままEnterキーを押します。

What do you want to use as your public directory?

これはFirebase Hostingでデプロイするディレクトリ名を何にするかという意味です。

初期状態では「public」になりますので、そのままEnterキーを押します。

「spa」は今回は無視

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

今回「spa」は無視しますので、「N」を入力してEnterキーを押します。

「GitHub」も今回は無視

Set up automatic builds and deploys with GitHub?

今回GitHubも無視しますので、「N」を入力してEnterキーを押します。

設定完了

Firebase initialization complete! と表示されれば、初期化が完了したことになります。

公開ディレクトリの確認

ここで公開予定のWEBページが入ったフォルダを確認してみましょう。

Firebaseによって、フォルダの中にjsonファイルやpublicフォルダ等が生成されています。

ファイルの移動

先程のコマンドラインの選択で、「public」を公開フォルダにすると設定していましたよね。

ですので今回公開するリソース（htmlやCSSなどすべて）を、publicフォルダの中に移動させましょう。

ローカルサーバーで確認してみる

それではまずはローカルサーバーでデータを構成してみます。

以下の様にコマンドプロンプトに入力しましょう。

firebase serve

しばらく処理が行われ、以下の様なコードが表示されます。

ローカルPC上にホスティングされ、URLが表示された状態

ローカルホストとポート番号

その中で以下の部分が、ローカルホストのアドレス（およびポート番号）となります。

http://localhost:5000/

このURLをブラウザでたたくと、先程用意したWEBページがブラウザ表示されます。

ローカルホスト上のWEBページ

今は自身のPCがホストサーバーですが、WEBページがきちんと構成されている事が確認できますね。

サーバーに公開

ではいよいよ公開（デプロイ）操作です。

まず先程生成された「public」ディレクトリまでcdで移動しましょう。

C:\Users\xxx\xxx\xxx\lpeg-hosting\public

先程の様にもう一度パスをコピペしてきましょう。

コマンドプロンプトが固まっていた場合は、再度開き直してcdで進んでください。

deploy実行

次のコマンドを実行して、Firebase Hostingをデプロイします。

firebase deploy

以下のようなメッセージが表示されるまで処理を待ちましょう。

表示されたメッセージの「Hosting URL」にあるアドレスをコピーして、ブラウザから起動します。

WEBサイトが公開されているのがわかりますね。

Firebase コンソールを確認する

序盤に一度確認した、Firebase Consoleの管理画面を見てみましょう。

ここに表示されているURLと、先程のコマンドライン上のURLは同じです。

リリース履歴が生成される

先程は画面下のリリース履歴のところは空白でした。

今回はデプロイしたデータが表示されているのがわかると思います。

WEBデータのロールバックについて

冒頭でも説明しましたが、Firebase Hostingにはロールバック機能が備わっています。

デプロイした単位で過去のバージョンが保存され、いつでも過去のバージョンに戻る事ができる訳ですね。

ではこのロールバック機能を実際に使ってみましょう。

HTML内容を更新してみる

publicディレクトリ内にあるindex.htmlファイルの内容を、適当に書き換えてみて下さい。

更新ファイルをデプロイする

上書き保存したら、コマンドプロンプトから次のコマンドを実行して、もう一度Firebase Hostingをデプロイします。

firebase deploy

デプロイ完了後に先程のWEBページを更新すると、書き換えた内容に変わっていますよね。

リリース履歴からロールバック

Firebase Consoleの管理画面に戻ります。

画面下の「○○のリリース履歴」の欄に新しいバージョンが追加されています。

過去のバージョンに戻す

「リリース履歴」の過去のバージョンの右端の…メニューから「ロールバック」を選択しましょう。

もう一度WEBページを更新してみます。すると更新する前の状態に戻ったのがわかります。

この様にデプロイした単位で、簡単に前の状態・次の状態へと変える事ができる訳ですね。

もちろんリリース履歴で今どのデータがデプロイ対象になっているのかも、この画面でわかります。

人気記事

Firebase関連記事