FirebaseでHTTPSアクセス可能なWebサイトを公開

静的なWebサイトをホスティングする方法はいくつかありますが、会社のWebサイトをホスティングする環境を用意する必要があり、ひとまず私がよく使っているHerokuで公開しました。しかし、HerokuでカスタムドメインSSL証明書を適用すると、少額ですが課金する必要があります。

FirebaseにWebサイトをホスティングする機能があり、それを使ってみました。

コマンドラインツールのインストー

Firebaseのコマンドラインツールをインストールします。

$ brew install npm
$ npm install -g firebase-tools

アプリの初期化

次にアプリを初期化します。アプリのタイプにはHostingを選択します。Firebaseプロジェクトの選択もありますので、もし既存のFirebaseプロジェクトが無ければ、ここで作成します。

$ firebase init

 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Functions: Configure and deploy Cloud Functions
❯◯ Hosting: Configure and deploy Firebase Hosting sites

設定とデプロイ

publicディレクトリを作成して、Webコンテンツを格納します。appディレクトリの中に404.htmlというファイルを作成しておくと、そのページが404エラーの際に表示されます。

firebase.jsonを以下のように作成します。

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

以下のコマンドでコンテンツをデプロイします。

$ firebase deploy

デプロイが正常に実行されると、WebsサイトのURLが表示されます。ブラウザでアクセスしてWebサイトが表示されることを確認します。

カスタムドメインの設定

Firebaseの管理画面のHostingのページから「ドメインの接続」を選択して、カスタムドメインを設定します。DNSのAレコード情報が表示されるので、それをDNSに設定します。

DNS情報が反映されると、しばらくはHTTPSでアクセスすると証明書エラーが表示されますが、数時間後にアクセスしてみると、カスタムドメインの証明書が有効になっていました。証明書はLet's Encryptを使っていました。カスタムドメインの証明書の取得までやってくれるのはすばらしいです。

HTTPアクセスのリダイレクト

HTTPでアクセスすると、HTTPSにリダイレクトされました。これもデフォルトで設定されていてよかったです。