CodeCode

なんか色々おぼえ書き。だいたいweb制作関連。

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

Firebaseは2014年にGoogleに買収された、BaaSと呼ばれる、アプリのバックエンド機能を提供するクラウドサービスです。
Firebaseを使うと、アプリのバックエンド開発をGoogleに丸投げすることができます。

主な機能

  • リアルタイムデータベース
  • ホスティング
  • FirebaseAuth
  • AdWords
  • Crash Reporting

などなど。

今回はこの中のホスティング機能を使って、静的なページを公開しました。

料金

ホスティングは、1GBのストレージ、月10GBの転送量まで無料で使えます。
また、独自ドメインのSSLも無料です。
その他の料金についてはこちら

独自ドメインが使えてかつ、SSLも無料で使えるのは大きいですね。
※サブドメインもSSLが使えるようになりました。

主な手順

まずは、FirebaseにGoogleアカウントでログインし、
プロジェクトを制作します。

プロジェクトを追加を押し、プロジェクト名と、国/地域を選択します。

続いて、ターミナルからFirebase CLIをインストールします。

Node.jsをインストールして、以下のコマンドを打ち込みます。

npm install -g firebase-tools

CLIのインストールが完了したら、firebaseにログインします。

firebase login

ログインが完了したら、プロジェクトの設定を行います。

firebase init

コマンドを叩くとこのような画面が出ると思います。

今回はホスティングを使うので、十字キーで Hosting: Configure and deploy Firebase Hosting
sites
を選択します。

続いて、プロジェクトを選択します。
先ほど作った、プロジェクトを選択します。

プロジェクトのルールはどうするかと聞かれますが、デフォルトで問題ないでしょう。
特別な設定をする場合は、ルールファイルにjsonで記述します。

依存関係にあるnpmスクリプトをインストールするかと聞かれるので、これもそのままエンターで構いません。
インストールが終わると、

サイトホスティングのディレクトリ名は、好みで変更してください。
ここで、設定したディレクトリがアップロードされます。

また、すでにindex.htmlがある場合は、上書きの時に、 N を選択してくだい。

これで初期設定は完了です。

デプロイ

先ほど決めた、サイトホスティングのディレクトリにindex.htmlを作り、アップロードします。

アップロードはFTPソフトを使わず、コマンドライン上で行います。

firebase deploy

このコマンドを実行すると、下に Hosting URL が書かれていると思うので、そこにアクセスすると、制作したindex.htmlが表示されているはずです。
また、通信もSSLになっています。

コマンドラインに慣れさえすれば、簡単にwebページを公開することができますね。

ダッシュボード

デプロイすると、Hostingのダッシュボードにドメインと、デプロイの履歴が表示されます。

この履歴から、ロールバックすることもできます。

使用状況のタブでは、ストレージとダウンロード(転送量)の確認ができます。

独自ドメイン

Hostingのダッシュボードのドメインを追加をクリックして、ドメインを入力します。
次へを押すと、TXTレコードをDNSに設定します。
例:お名前.comの場合

設定の反映はされるまでには最大24時間程度かかる場合があります。
設定したら、確認を押して完了です。
ですが、独自ドメインのSSLには、また2時間程度かかります。
時間を空けて、見てみると独自ドメインがSSLになっているはずです。

まとめ

小規模サイトであれば、ストレージ1GB、通信量10GB/月で問題なく使えると思います。
難点はコマンドラインを使う部分ですが、やることは少ないので、慣れてしまえばそう難しくはないでしょう。

ぜひ、使ってみてください。

参考

Firebaseの始め方
Firebase Hostingの紹介をした – WEB TOUCH MEETING #96

記事一覧