ブログのホスティング先を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を書く {% highlight yaml %} version: 2 jobs: build: workingdirectory: ~/repo docker: - image: circleci/ruby:latest steps: - checkout - run: name: Install firebase-tools command: | curl -sL https://deb.nodesource.com/setup8.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に支えられています。