Hugo で作ったブログを Firebase Hosting に移行した

どうも、たくチャレ(@takuchalle)です。

今までNetlifyで動かしていたこのブログをFirebase Hostingに移行しました。

Netlify に不満があったわけではないですが、試しにやってみたらすごい簡単に移行できそうだったのでやってみました。

そしたら、数ステップで簡単にドメインの設定までできました。その後自動でデプロイできるように設定して完了です。

Hugoの公式サイトにFirebaseで動かす方法が書いてあるので、基本的にはこの通りに行いました。

英語で書いてあるので、スクリーンショットも交えて補足していきます。順に説明していきます。

  • Firebase プロジェクト作成
  • Firebase CLI の設定
  • カスタムドメイン設定
  • CI で自動デプロイ

Firebase プロジェクトの作成

ブラウザで Firebase のコンソールを開きます。

自分の好きなプロジェクト名といくつか設定をしてCreate projectボタンを押します。

Firebase CLI の設定

ツールのインストール

Firebase CLI ツールで設定やデプロイができるので、まずそれをインストールします。Node.js で書かれているのでそちらもインストールします。macOS 上での作業を想定しています。

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

Firebase にログイン

先程プロジェクトを作成したアカウントに CLI ツールでログインします。

$ firebase login

コマンドを打つとブラウザが開いて、アカウントの選択画面が出ます。先程プロジェクトを作成したアカウントを選択します。

Firebase の初期化

デプロイしたい Hugo プロジェクトのルートディレクトリにいって、次のコマンドを打ちます。

$ firebase init

次のように、Database,Firestore,Hosting など選択肢が出てくるので、Hostingを選択してください。(字が小さくてすいません)

次はプロジェクトの選択です。先程作ったプロジェクトを選択してください。

次は Hosting の設定です。基本的にデフォルトでいいかと思います。 それぞれの質問は次のようになっています。

  • デプロイするディレクトリの選択。Hugo の書き出しディレクトリです。デフォルトはpublicです。
  • Single app page か?Hugo なのでNoです。
  • public/404.html を上書きするか?Noです。
  • public/index.html を上書きするか?Noです。

デプロイの設定は以上です。

デプロイの確認

先ほどの設定で正しくデプロイできるか確認します。

$ hugo && firebase deploy

デプロイが成功すると最後に URL が表示されるので、ブラウザで開いて意図通り表示されているかみてください。 URL は[project id].firebaseapp.comになっているはずです。

カスタムドメイン設定

自分のカスタムドメインの設定をします。特別な設定はせずに SSL 対応してくれます。

Firebase Console の Hosting の Dashboard にConnect domainというボタンがあるので、クリックします。

ドメイン入力するところで、自分のカスタムドメインを入力します。Redirectと書かれているチェックボックスはチェックしないでください。

表示されているIPアドレスは両方DNSに登録します。スクショを取り忘れたのでHost名がこのブログ異なってますが、blog.takuchalle.meと読み替えてください。 この IPアドレスは公式ブログに書いてるので、みんな一緒だと思います。

僕はGoogle Domainsを使っているので、次のような設定になります。

しばらくすると設定したドメインで見れるようになると思います。 この方法はDNSの切り替わりのため1時間程度ダウンタイムがあるので、一切ダウンタイムを許さないサービスだとDNSの設定の仕方は工夫したほうがいいと思います。1

CI で自動デプロイ

これまでの設定で一通り移行は終わったのですが、今まで Netlify でもやってたようにデプロイを自動化したいと思います。

Netlify が GitHub の修正を検知して、ビルド・デプロイをしてくれてたんですけど、Firebase Hosting はそこまで行いません。 GCP の一つであるCloud Buildを使ってビルド・デプロイを行うようにします。

長くなったので別の記事に詳しく書きました。

まとめ

Netlify から Firebase Hosting に移行してみました。自動デプロイの設定が少し面倒だったくらいで、Firebase Hosting を使い始めることは非常に簡単にできました。これもHugoみたいな静的サイトジェネレータを使ってるメリットの一つですね。

あと、表示速度のことは気にしてなかったんですけど、体感で早くなった気がします。 定量的な評価としてGoogle の速度計測するサイトで計測してみたら、4秒から3秒になったので図らずも高速化されてラッキーでした笑

一つ気になるのがFirebaseの無料枠を超えないか、ということです。1 Firebae Hostingの転送量の無料枠は10GB/monthなので、画像などサイズの大きいファイルはFirebase Storageなどの他のところに置いたほうが良いと思います。

参考サイト


  1. 僕みたいな弱小ブログにそんなにアクセスがあるとは思いませんけど。

同じカテゴリの記事