FirebaseのHostingを使ってみる

はじめに

FirebaseのHostingを使って公開するところまでについてです。

Firebaseプロジェクトを作る

まずはGoogleアカウントでログインしFirebaseコンソールでプロジェクト作成します。

https://console.firebase.google.com を開くと↑の画面が開くと思うので赤枠からプロジェクトを追加します。

こんな感じですね。

Firebase CLI をインストールする

プロジェクトが作れたので次はローカル環境を整えていきます。

まずはFirebase CLI（コマンドライン インターフェース）をインストールします。インストールにはNode.js とnpmが必要なのですがここでは割愛とします。

こちらのコマンドでインストールできます。

sudo npm install -g firebase-tools

ちなみにFirebase CLIはHostingに関わらずFirebase プロジェクトの管理、表示、デプロイを行うためのさまざまなツールを提供しています。

ローカルでログインする

次にローカルのPCでログインしておきます。

firebase login

Firebase CLIをインストールするとfirebaseコマンドが使えるようになりますので↑を実行します。するとブラウザが起動してGoogleのログイン画面が表示されます。その中から先ほどプロジェクトを作成したアカウントで認証を完了させるとコンソールに Success! Logged in as xxxx とログインしたメールアドレスが表示されていると思います。

ログインしているかどうかを確認するために firebase list コマンドを実行するとアカウントに紐づくプロジェクトの一覧を見ることができるので、その中に先ほど作成したプロジェクトがあれば成功してます。

ローカルにプロジェクトを作る

次にローカルにプロジェクトを作っていきます。

適当なディレクトリに移動し、以下のコマンドを実行します。

firebase init

実行すると↓が表示されてFirebase CLIのどの機能を使うか聞かれます。なのでHostingまで移動してセレクトキーで選択しエンターで決定します。

次はどのプロジェクトを使うか聞かれるので先ほどFirebaseコンソールで作ったプロジェクトを選択します。ここは矢印を合わせてエンター押すだけです。

次はどのフォルダを公開用にしますか、と聞かれるので任意の名前にできますが、そのままエンターを押すと public というフォルダが作成されます。 その下でシングルページアプリケーションにしますか、と聞かれていますが、今回はindex.htmlを表示させるだけなのでNoとしてます。

そうすると firebase.json という設定ファイルとpublicフォルダに index.html と 404.html が生成されるはずです。

最終的なフォルダ構成はこんな感じになりました。

.
|____.firebaserc
|____public
| |____index.html
| |____404.html
|____firebase.json

ここまできたら後はデブロイです。 firebase deploy を実行すると↓の画面が表示されます。

ここに表示されている Hosting URL にアクセスするとindex.htmlが表示されるはずです。

感想

公開までの手順が簡単すぎてびっくりしました。ロールバックとかもコンソールから簡単にできるので静的ページ作る際にはお世話になりそうです。