満を辞して？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から手動でトリガーできるようになります。
特にソースコード変更せずにコンテンツの更新などでビルドしたい場合に役立ちます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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の方に設定するだけです。これも公式を元にポチポチ設定していけば完了します。
設定してから反映まで数時間かかったので、移行日が決まっている場合は、あらかじめ考慮しておくと良いでしょう。
カスタム ドメインを接続する | Firebase Hosting
NetlifyからFirebase Hostingに移行する際に注意すること
完全に忘れていたのですが、NetlifyはURLのパスを大文字から小文字に自動で変換していました。
ヘッドレスCMSとしてContentfulを使用しているのですが、そこのIDは自動で大文字小文字などが混ざった文字列を生成しており、それをURLのパスとして利用していました。
そのため、Google検索などからアクセスした際にURLのパスが小文字に変換された文字列になっており、Firebase Hostingに移行した際にFirebaseは小文字変換はしないため、存在しないページとして認識されてしまっていました。
リダイレクト処理する
ということで急いで対応しなければならず、一旦Netlifyに切り戻しを行いつつ、対策を考えました。
パッと思いついたのは小文字のパスでアクセスされた際にちゃんと元々の大文字が含まれたパスにリダイレクトする処理を入れることを思いつきました。
ビルドしているログには大文字が含まれたパスで生成されているのが確認できたので、それらを元にサクッとPythonでいい感じにFirebase.jsonのredirectsにそのままそのまま貼っつけられるような処理を書きました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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に移行する際に結構ありがちな失敗かと思うので、参考になればと思います。