個人開発のサービスをNetlifyからFirebase Hostingに移行した話

はじめに

個人開発のサービスで使用していたホスティングサービスをNetlifyからFirebase Hostingに移行したので、その経緯などについてまとめておきます。

なぜNetlifyからFirebase Hostingに移行したのか

Firebaseに集約したい

最近認証機能を実装したことから、Firebase AuthenticationやFirestoreを利用することになり、ホスティングサービスもFirebaseにまとめたい感がありました。

今後もFirebaseのサービスを使っていきたいと考えていたので、早いタイミングで集約していこうと思いました。

コストが安くなる

Netlifyの1ヶ月のビルド時間の無料枠は300分で、追加500分ごとに7ドルという料金体系でした。

最初は無料枠でも問題なくビルドできていましたが、コンテンツが増えて無料枠で収まることがなくなり、毎月追加枠を2つ購入していた感じになっていました。

そもそもビルド時間長すぎ問題があり、そちらも解決する必要があるのですが、今後もコンテンツが増えていくことを考えると地味にコストが効いてくるなと思っていました。

そこで色々調べていくとFirebase HostingとGitHub Actionsを組みわせた場合、無料枠は2000分とコストがかからずビルドできることを知り、移行したいと思う大きな要因となりました。

CDNのエッジが国内にあるので早くなるのでは

Netlifyの無料プランだと日本のエッジノードが利用できず海外からの配信になっているようで、Page Speed Insightsでチェックすると結構遅いことがわかりました。

Firebase Hostingなら国内からの配信になるようなので、サイトのパフォーマンスも向上すると考えていました。

NetlifyからFirebase Hostingへの移行作業

ローカルからFirebase Hostingにデプロイできるようにする

まずは公式を参考にして、ローカルでgenerateしたファイルをFirebase Hostingにデプロイできるようにしました。

デプロイしてみてFirebase Hostingにデフォルトで使われているドメインにアクセスしてみて、ページに問題ないかを確認しました。

GitHub Actionsでパイプラインを構築する

パイプラインを構築するといってもfirebase initするといい感じのymlファイルを生成してくれるので、それを元にちょっと変更しただけでした。

出来上がったパイプラインのymlファイルはこんな感じになりました。ちなみにworkflow_dispatchを追加するとGitHub Actionsから手動でトリガーできるようになります。

特にソースコード変更せずにコンテンツの更新などでビルドしたい場合に役立ちます。

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
  workflow_dispatch:
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm i && npm run generate
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_HOGE }}'
          channelId: live
          projectId: hoge

Firebase Hostingにドメインを設定する

この時点でGitHubにPushするとNetlifyとFirebase Hosting両方にデプロイされるようになっている状態です。

あとは独自ドメインをFirebase Hostingの方に設定するだけです。これも公式を元にポチポチ設定していけば完了します。

設定してから反映まで数時間かかったので、移行日が決まっている場合は、あらかじめ考慮しておくと良いでしょう。

NetlifyからFirebase Hostingに移行する際に注意すること

完全に忘れていたのですが、NetlifyはURLのパスを大文字から小文字に自動で変換していました。

ヘッドレスCMSとしてContentfulを使用しているのですが、そこのIDは自動で大文字小文字などが混ざった文字列を生成しており、それをURLのパスとして利用していました。

そのため、Google検索などからアクセスした際にURLのパスが小文字に変換された文字列になっており、Firebase Hostingに移行した際にFirebaseは小文字変換はしないため、存在しないページとして認識されてしまっていました。

リダイレクト処理する

ということで急いで対応しなければならず、一旦Netlifyに切り戻しを行いつつ、対策を考えました。

パッと思いついたのは小文字のパスでアクセスされた際にちゃんと元々の大文字が含まれたパスにリダイレクトする処理を入れることを思いつきました。

ビルドしているログには大文字が含まれたパスで生成されているのが確認できたので、それらを元にサクッとPythonでいい感じにFirebase.jsonのredirectsにそのまま貼っつけられるような処理を書きました。

url_list = [ここに元々のURLを書く]

mappings = []

for url in url_list:
  source = url.lower()
  destination = url
  mappings.append({
    "source": source,
    "destination": destination,
    "type": 301
  })

print(mappings)

printした結果をfirebase.jsonに貼ってPushしてなんとかことなきを得ました。

NetlifyからFirebase Hostingに移行する際に結構ありがちな失敗かと思うので、参考になればと思います。

JISOUのメンバー募集中

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

気になる方はぜひHPからライン登録お願いします👇