CodeCode

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

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

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

主な機能

  • リアルタイムデータベース
  • ホスティング
  • FirebaseAuth
  • AdWords
  • Crash Reporting
などなど。 今回はこの中のホスティング機能を使って、静的なページを公開しました。

料金

ホスティングは、1GBのストレージ、月10GBの転送量まで無料で使えます。 また、独自ドメインのSSLも無料です。 その他の料金についてはこちら 独自ドメインが使えてかつ、SSLも無料で使えるのは大きいですね。 ※サブドメインもSSLが使えるようになりました。

主な手順

まずは、FirebaseにGoogleアカウントでログインし、 プロジェクトを制作します。 プロジェクトを追加を押し、プロジェクト名と、国/地域を選択します。 続いて、ターミナルからFirebase CLIをインストールします。 Node.jsをインストールして、以下のコマンドを打ち込みます。 CLIのインストールが完了したら、firebaseにログインします。 ログインが完了したら、プロジェクトの設定を行います。 コマンドを叩くとこのような画面が出ると思います。 今回はホスティングを使うので、十字キーで Hosting: Configure and deploy Firebase Hosting sites を選択します。 続いて、プロジェクトを選択します。 先ほど作った、プロジェクトを選択します。 プロジェクトのルールはどうするかと聞かれますが、デフォルトで問題ないでしょう。 特別な設定をする場合は、ルールファイルにjsonで記述します。 依存関係にあるnpmスクリプトをインストールするかと聞かれるので、これもそのままエンターで構いません。 インストールが終わると、 サイトホスティングのディレクトリ名は、好みで変更してください。 ここで、設定したディレクトリがアップロードされます。 また、すでにindex.htmlがある場合は、上書きの時に、 N を選択してくだい。 これで初期設定は完了です。

デプロイ

先ほど決めた、サイトホスティングのディレクトリにindex.htmlを作り、アップロードします。 アップロードはFTPソフトを使わず、コマンドライン上で行います。 このコマンドを実行すると、下に Hosting URL が書かれていると思うので、そこにアクセスすると、制作したindex.htmlが表示されているはずです。 また、通信もSSLになっています。 コマンドラインに慣れさえすれば、簡単にwebページを公開することができますね。

ダッシュボード

デプロイすると、Hostingのダッシュボードにドメインと、デプロイの履歴が表示されます。 この履歴から、ロールバックすることもできます。 使用状況のタブでは、ストレージとダウンロード(転送量)の確認ができます。

独自ドメイン

Hostingのダッシュボードのドメインを追加をクリックして、ドメインを入力します。 次へを押すと、TXTレコードをDNSに設定します。 例:お名前.comの場合 設定の反映はされるまでには最大24時間程度かかる場合があります。 設定したら、確認を押して完了です。 ですが、独自ドメインのSSLには、また2時間程度かかります。 時間を空けて、見てみると独自ドメインがSSLになっているはずです。

まとめ

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

参考

Firebaseの始め方 Firebase Hostingの紹介をした - WEB TOUCH MEETING #96
トップへ戻る