静的なWebサイトを無料・独自ドメイン、常時SSLでgoogleのクラウド「Firebase」に公開する方法

こんにちは、エンジニアの高崎です。
Twitterで以下のようにつぶやいたところ、


思いかけず反響をたくさん頂いたので、具体的な方法を記事にしたいと思います。

Firebaseって?

Googleの提供するクラウドサービス。サーバーレスと呼ばれ、サーバーやデータベースなどのインフラ周り機能から、ユーザー認証やメッセージなどバックエンドの機能を提供しており、これを使うことでインフラ周りやバックエンドを開発することなくWebサービスが作れます
FirebaseでWebサービスを作る方法はこちらで記事にしましたが、このサービス、単に静的なWebサイトをホスティングするだけの用途でも、ものすごく便利なんです。
Google Firebaseをホスティングサーバーとして使うメリットは以下のとおりです。

  • 1GBの容量と、10GBまでの転送量であれば無料
  • http/2という通信方式を使っているので、通常のhttp通信よりも早い
  • 無料でSSL証明書が付いてくる
  • 無料で独自ドメインを使うことができる
  • 無料でCDNが付いて来るので、静的なコンテンツを高速に配信できる

Firebaseを準備する

1.Firebaseのサイトにアクセスして赤枠の「スタードガイド」をクリックします。
2.Googleアカウントでログインします。

3.赤枠の新規プロジェクトを追加から新しいプロジェクトを作ります。

4.プロジェクト名の入力、国の選択、規約への同意を行います。
5.Firebaseで自動でプロジェクトが作成されます。完了画面で次へを押すと自動的に管理画面のトップページに遷移します。

Firebaseにプロジェクトを公開する

1.npmというパッケージマネジャー(いろんな機能を管理するためのシステム)が必要になります。NPMをインストールするためにNode.jsをインストールする必要があるので、まずはこちらを参考にインストールします。
2.ターミナル、もしくはコマンドプロンプトを開いて、Firebase関連のパッケージをインストールします。

npm install -g firebase-tools

* Missing write access to 〜というエラーメッセージが出てくる方は、こちらをご参照ください。
3.ターミナル上でFirebaseにログインするコマンドを入力します。

firebase login

4.初回はGoogleに使用情報やエラー情報を共有するか聞かれますので任意で回答します。

? Allow Firebase to collect anonymous CLI usage and error reporting information?

5.ブラウザの認証画面が表示されるので、ログインします。
6.Firebaseのホスティング初期設定を行います。

firebase init hosting

8.デフォルトのプロジェクトを選択するように聞かれますので、「Firebaseを準備する」の段で作ったFirebaseで作ったプロジェクトを十字キーで選択、エンターを押して決定します。

? Select a default Firebase project for this directory: 

8.公開ディレクトリを聞かれますので、任意の値を入力します。

? What do you want to use as your public directory?

9.シングルページアプリケーションとして公開するか聞かれますのでそのままエンターを押します。

? Configure as a single-page app (rewrite all urls to /index.html)?

10.自動で.firebaserc、firebase.jsonという設定ファイルができます。
11.8で設定したフォルダの中に公開したいファイルを入れます。
12.ターミナルで以下のコマンドを入力して、Firebaseに本番公開します。

firebase deploy

13.これで本番公開できました。ターミナルに表示されているURL(プロジェクト名.firebaseapp.com)にアクセスすると本番公開されているのが確認できます。

公開したプロジェクトに独自ドメインを設定する


1.Firebaseにログインし、独自ドメインを設定したいプロジェクトを選択します。

2.Hostingから「ドメインの接続」をクリックします。

3.設定したい独自ドメインを入力して「次へ」をクリックします。

4.表示されているTXTレコードをドメイン管理しているサービスで設定します。設定したら「確認」をクリックします。

5.Aレコードが表示されますので、こちらもドメイン管理しているサービスで設定して次へをクリックして完了です。少し時間が経つとSSL証明書も自動で設定され常時SSLになります。

以上で、完了です、いかがでしたでしょうか?弊社ではFirebaseを使ったWebサービスの作り方も記事にしてますので、もしよろしければ御覧ください!