Home

Allajah's Reservoir

26 Oct 2017

Firebase Hostingを使って静的Webサイトを独自ドメインかつSSL証明書付きで公開する

このエントリーをはてなブックマークに追加

ブログのホスティング先をGitHub PagesからFirebase Hostingに変えてみた。

Firebase Hostingとは

その名の通りFirebaseがWebサイトをホスティングしてくれるサービス。

https://firebase.google.com/docs/hosting/

嬉しいポイントは

Zero-configuration SSL is built into Firebase Hosting so content is always delivered securely.

ここにあって、なんと独自ドメインでもSSLをサポートしてくれる。

料金も、フリーでそこそこ使えて、ホスティングしてくれるファイルの最大容量は計1GB・ 月10GBまで配信できる。 個人ブログくらいならフリーで間に合うし、足りなくなっても月$25払えば10GBストア・月50GB配信できるので安くすむ。

Firebaseでのセットアップ

FirebaseのConsoleにログインして新規プロジェクトを作成する。

セットアップ

Firebase CLIをnpmでインストールする

npm install -g firebase-tools

Firebase CLIでログインする

firebase login

ブラウザが起動して、Googleアカウントでサインインが求められるのでサインインする。

プロジェクトの設定をする

firebase init

対話型でまずカレントディレクトリを設定する目的を聞いてくる。

Which Firebase CLI features do you want to setup for this folder?

ここでは Hosting を選択する。

次に、設定するFirebaseのプロジェクトを聞いてくるので、さきほど作成したFirebaseプロジェクトを選択する。

Select a default Firebase project for this directory:

次に、どのディレクトリをpublic directoryに選択するか聞かれる。 ここに設定したディレクトリがrootとしてFirebaseにデプロイされるので、 Webサイトの場合はindex.htmlが格納されている、ビルドしたディレクトリ(distなど)を指定する。 jekyllの場合は_siteが該当するので、それを指定する。

 What do you want to use as your public directory?

次に、プロジェクトをSingle Page Applicationとして設定するか聞いてくる。 yesにするとURLを全て/index.htmlにリダイレクトさせる。 今回の場合はNOでいい。

Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
 Firebase initialization complete!

ここまで完了すると、.firebasercfirebase.jsonが作成される。 プロジェクトIDや、firebase initで設定した項目を変えたい場合は編集する。

ビルド

jekyllの場合は_config.ymlurlフィールドを変更する必要がある Firebaseのコンソールにアクセスし、projectIDを確認する。 デプロイ先のURLはhttps://{project_id}.firebaseapp.comになるので、これをurlフィールドに設定する({project_id}は置き換える)。

デプロイ

firebase deploy

デプロイ完了。Firebase ConsoleのメニューからHostingを選ぶと、ダッシュボードにデプロイ履歴が記載されてる。

とりあえずここまででFirebaseにWebサイトを公開するところまで完了。

カスタムドメインの設定

Firebaseの管理コンソールから、 Hostingを選択して、「ドメインを接続」 ボタンを押して、ウィザードの通りに実行する。 自分の場合はAWSのRoute 53でポチポチやった。 流れとしては、

  1. DNSにTXTレコードを設定して、ドメインの管理者であることを証明
  2. 与えられたIPv4をDNSにAレコードを貼る
  3. SSL証明書がプロビジョニングされるまで待つ(Firebaseがやってくれる) すでにGitHub PagesなどにホスティングしていてCNAMEやAレコードを貼っている場合は、2の前に外しておく。

ここまででWebサイトをFirebaseにホスティングしてもらい、独自ドメインを使ってさらにHTTPSに対応することができた。

自動デプロイ

GitHub Pagesの魅力の一つに、GitHub上のリポジトリにpushしたら自動でデプロイしてくれるというものがあったが、 今のままの構成だとその恩恵をウケられないのでCIにデプロイしてもらう。今回はCirlceCI 2.0を使う。 

CI用のtokenの発行

firebase CLIでCI用のtokenを発行する

firebase login:ci

ブラウザでGoogleサインインすると、tokenが出力されるので控えておく。

CircleCIの設定

.circleci/config.ymlを書く

version: 2
jobs:
  build:
    working_directory: ~/repo
    docker:
      - image: circleci/ruby:latest
    steps:
      - checkout
      - run:
          name: Install firebase-tools
          command: |
            curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
            sudo apt-get install -y nodejs
            echo prefix=${HOME}/.local >> ~/.npmrc
            npm install -g firebase-tools
      - run:
          name: Install dependencies
          command: bundle install
      - run:
          name: Build
          command: make build
      - run:
          name: Deploy
          command: ~/.local/bin/firebase deploy --token $FIREBASE_TOKEN

CircleCIのprojectに、さっき取得したCI用tokenを環境変数として指定する。ここではFIREBASE_TOKEN

これでGitHubにpushするとデプロイされるようになった。

まとめ

このブログはCircleCI, GitHub, Firebase Hostingに支えられています。

Allajah at 15:41