FirebaseでWebをホスティングしてみた

Firebase とは

FirebaseとはGoogleが提供するBaaS（Backend as a Service）と呼ばれるサービスで、アプリやWebサイトの解析、認証、広告、データベースを構築したり、静的なWebコンテンツのホスティングやデータストレージを提供してくれる。

Firebaseは2014年にGoogleに買収されたらしい。

いろんな機能があるようだが、アプリとかは俺の専門外なので、今回はGoogle DriveのWebホスティング機能の代替としての利用にフォーカスしたいと思う。

FirebaseのWebホスティング機能は容量1GB、転送量10GBまで無料となっている。

とりあえず、Googleアカウントがあれば利用できるので、Firebaseのサイトで利用登録をしておこう。

Firebaseを利用する

俺は以下のページの説明を参考にした。

Firebaseのサイトで新規プロジェクトを作成したら、Firebaseでホスティングするためのツールを利用することになる。

そのツールは Node.js と npm を利用して入手することになる。

開発者なら聞き覚えのある名前かもしれないが、俺はそれらを利用したことがなかったので、以下のページを参考に Node.js と npm をインストール。

ちなみに Node.js のダウンロードは以下のページ。

インストーラーを実行する。デフォルトのままでいい。

Node.js のインストールが済んだら、Node.js のコマンドラインツールを起動し、Firebaseを利用するためのツール、その名も「firebase-tools」を以下のコマンドでインストールする。

npm install -g firebase-tools

しばらく待つとインストールが完了するので、以下のコマンドでFirebaseにログインする。

firebase login

ブラウザで認証フォームが開くので、ボタンを押すだけ。

プロジェクトを設定する

ローカルでファイルを保存するディレクトリを作成し、コマンドラインツールでそのディレクトリに移動する。

そこで以下のコマンドを実行するとプロジェクトの初期化のためのダイアログが開始される。

firebase init

ダイアログの一部は上記のQiitaのリンク先の説明と異なっているが、基本的にはデフォルトのままでいい。

上下キーで選択し、スペースキーでチェックボックスを切り替え、Enterキーで確定して先に進む。

どのプロジェクトを使用するか聞かれるので、Firebaseのサイトで新規作成したプロジェクトを選択。

カレントディレクトリの直下にいくつかのファイルと「public」ディレクトリが生成される。

その「public」ディレクトリに index.html ファイルが生成されているので、それをちょっと弄ったりしてからデプロイすると、「public」ディレクトリ以下のファイルがアップロードされ、サイトが公開される。

デプロイには以下のコマンドを使用する。

firebase deploy

デプロイには少し時間がかかる。

2回目からはデプロイのコマンドだけでいいが、毎回カレントディレクトリやらコマンドを打つのは面倒なので、batファイルを作ってみた。

cd /d %~dp0
firebase deploy
pause
exit

これをbatファイルに保存して、プロジェクトのディレクトリ（public ディレクトリのあるところ）に置いておくと、batファイルを実行するだけでデプロイできる。

batファイルは俺も実際に使って確かめたけど、間違ってたらごめんね。

デプロイしたサイトを見てみるには、Firebaseの管理画面からプロジェクトに入り、左メニューの「Hosting」を選択すると、URLが割り振られているのでそこにアクセスする。

HTMLファイルだけでなくZIPファイルなども設置できるので、ファイルの配布にも使える。

まとめ

今回はFirebaseを利用してWebサイトをホスティングする方法を紹介した。

Node.js と npm は名前は知っていたが、使うのは今回が初めてだった。

いろいろ機能があるようだが、とりあえず今回の目的に必要な最低限の利用方法しか調べていない。

これまではFTPソフトでファイルをアップロードするという昔ながらの方法でWeb開発をしていたが、これからはこんな時代になっていくんかな……

とりあえず、これでGoogle Driveの代替としては問題ないだろう。