Firebase を使ってサイトを無料で公開してみる ｜ SiTest (サイテスト) ブログ

今回は、Google のホスティングサービス Firebase を使って静的なサイトを公開する方法をお伝えします。
サクッとウェブサイトを公開したいけど、Google サイトのようにテンプレートからではなく、自分で書いた HTML・CSS を使いたい、という方に特にお薦めです。

Firebase は Google が提供する mBaas サービスです。
モバイルアプリを作る際にバックエンドで必要になる機能をまとめて提供してくれます。

静的ウェブサイトのホスティングも可能で、HTTPS 対応のウェブサイトが無料から公開できるのが嬉しいところです。

最近、Cloud Functions にも対応し、できることの幅がまた広がりました。

・リアルタイムデータベース
・ユーザー認証
・クラウドストレージ
・ホスティング
・Cloud Functions

など、開発系の主要な機能だけピックアップしても色々と揃っています。
今回はその中の一つであるホスティング機能を使って、サイトを公開する手順を説明します。

本題に入る前に、気になる料金を確認しておきましょう。
無料でホスティングできる条件は、容量が 1GB までで、月間の転送量は 10GB までとなっています。
また、独自ドメインや SSL の利用も無料でできます。

ちなみに、容量が超えた場合の料金はこちらからご覧ください。

転送量などの利用状況は、Firebase の管理画面からいつでも確認できます。

Firebase は Google アカウントさえあれば、すぐに利用できます。
アカウントを取得してログインしておきましょう。

また、Firebase でホスティングするには、Firebase CLI（コマンドライン インターフェース）を使用する必要があります。
npm からインストールするので、もしまだの場合は Node.js と npm をインストールしておいてください。

Node.js

まずは、Firebase コンソールにアクセスして、プロジェクトを作成します。
「プロジェクトを追加」ボタンを押すと、作成ポップアップが出てきます。

プロジェクト名と国を設定して作成ボタンを押せば、プロジェクトが新しく追加されます。

$ npm install -g firebase-tools

上記を実行して、Firebase ツールをインストールします。

インストールが完了したら、

$ firebase login

を実行します。

これを行うことで Firebase アカウントと接続され、先ほどブラウザ上で作成したプロジェクトにアクセスすることができるようになります。

$ firebase list 

を実行すれば、作成したプロジェクトがリストに表示されるはずです。

プロジェクトを作成したいディレクトリに、移動して下記のコマンドを実行します。

$ firebase init

すると、上記のような熱い表示とともにプロジェクトの設定ステップへと進みます。

まず、このプロジェクトで使用する Firebase の機能を聞かれるので、今回は「Hosting」にチェックを入れてください。
他の機能はチェックしてもしなくても構いません。

次に、どのプロジェクトを紐付けるかを聞かれますので、先ほど作成したプロジェクトを選択してください。

後は、公開ファイルを置くディレクトリや、シングルページアプリケーションとして動作させるかなどを聞かれますが、そのままエンターキーを押していけばOKです。

これで、プロジェクトのディレクトリ直下に
・firebase.json
・/public/
が生成されたかと思います。

public の中には index.html が含まれていますので、これを編集すれば準備は完了です。

$ firebase deploy

を実行して、サイトを公開しましょう！

「Hosting URL: https://~」というように表示されているのがサイトの URL になります。
ブラウザに打ち込めば、実際に公開されているページが確認できるはずです。

Firebase を使うと、お手軽に静的サイトのホスティングが可能です。
コマンドラインを少し使う必要はありますが、FTP ソフトが要らないので更新も簡単ですね。
よかったら一度お試しください！