Lon Sagisawa

Firebase Hosting

Firebase Hostingを使ってみる

2021年03月17日

ブログ向けの最適なホスティング探しの旅。今回はFirebase Hostingを試してみます。前の記事の続きになりますのであわせてどうぞ。

顛末

このブログはGatsby+Contentfulで構築されており、Contentfulで記事を書くかGitHubのリポジトリにpushするとGatsby Cloudでビルドが走り、Gatsby Cloudがどこかに自動的にデプロイしてくれるという環境になっています。

デプロイ先としてはNetlifyが定番で、最初はこのブログでも採用していたのですが……このNetlify実は日本にCDNのエッジを持っておらず、日本国内からのアクセスはちょっと遅くなりがちな欠点があります。

スクリーンショット 2021-03-13 22.22.01

NetlifyはJamstackなWebアプリを簡単にデプロイできて、無料枠も広いので使い勝手はよいのですが、ゆくゆくはこのブログをポートフォリオを兼ねたものにしたいので、パフォーマンスを追求するべく他のデプロイ先を探すことにしました。Gatsby Cloudが提供しはじめたホスティングも試したのですが、現時点では欧米向けのエッジのみ用意されているようでパフォーマンスは逆に悪化してしまっていました。

使ってみる

FirebaseはGoogleの製品なので、使うにはGoogleアカウントが要ります。ログインしたらコンソールに移動して、プロジェクトを立てます。

スクリーンショット 2021-03-18 0.17.36

プロジェクトを立てたらホスティングの管理に入り、カスタムドメインの設定。この手のホスティングだとCNAMEレコードを向けることが多いのですが、FirebaseはAレコードです。ネイキッドドメインを使いたい場合でもCloudflareのCNAME flatteringに頼らなくてもよいので楽ですね。カスタムドメインを設定すると数十分から1時間ほどでSSLの設定も自動的にやってくれます。

スクリーンショット 2021-03-18 0.18.31

あとはGatsby Cloudのデプロイ先に設定するだけです。Netlifyと違ってFirebase Hosting自体にGatsbyで構築したサイトをビルドする機能は無いので、その辺りも必要なら他のCIやGatsby Cloudと組み合わせる形になります。

スクリーンショット 2021-03-18 0.37.15

パフォーマンス

WebPageTestでは日本からのアクセスでTTFBが250ms前後。

スクリーンショット 2021-03-18 0.45.00

Netlifyのtestmysiteではほとんどの場所でTTFB1桁、日本からのアクセスも15msなのでかなり良い結果が出ています。

スクリーンショット 2021-03-18 0.48.18

Lighthouseも時間帯などにもよりますが100点になりました。以前はサーバーからの応答の遅さで減点されていました。

スクリーンショット 2021-03-18 0.53.57

懸念など

無料枠はNetlifyなどよりは小さめです。といってもこのブログは画像をContentfulから配信しているのでそこまで帯域は食いません。

スクリーンショット 2021-03-18 0.59.05

あとはGoogleのサービスなので突然終了するかもしれないという所もありますが、まあ終了したらNetlifyに戻ればよいだけです……。

とりあえず当分はこれでいきます

ひとまずパフォーマンスは良いし無料枠も思っていたより多いので、このブログはFirebase Hostingに置くことにします。小規模なアプリならバックエンドを丸投げできる、という触れ込みのサービスなのでホスティング以外も触ってみたいと思っています。

logo

Lon Sagisawa

福井県在住の1995年生まれ男性。ゲームしたり写真を撮ったりコードを書いたりして過ごしています。日本国内でお仕事募集中。

Mastodon / GitHub / Twitter / Twitch