こんにちは！自分のポートフォリオサイトをNext.jsで作ったものをデプロイした時の話です。
Next.jsのSSR対応デプロイ先としてよく使われるVercelと今年のGoogle IO 2024で発表されたFirebase App Hositngを比較してみたいと思います！
Vercelとは
VercelはNext.jsの開発元であるVercel社が運営する、アプリケーションをデプロイしインターネット上に置いてアクセスできる状態にするクラウドサービスです。GitHubレポジトリと連携することで、シームレスで手軽にデプロイすることが可能です。
無料プランや対応フレームワークが充実しているため、デプロイ先として非常に便利です。
Firebase App Hostingとは
Firebase App HositingはGoogleが提供する、モバイルやWebアプリケーションの開発プラットフォームであるFirebaseの新しい機能として今年のGoogle IO 2024で発表されました。
基本的な機能としては前述のVercelと同じで、Next.jsもしくはAngularで作られたアプリのGitHubレポジトリと連携することで、手軽にデプロイすることが可能です。
本機能を使う場合は従量課金制プランに加入する必要がありますが、無料枠が設定されており、その範囲内であれば無料で利用することができます。
Firebaseサービス（FirestoreやCloud Storageなど）と統合し、アプリのバックエンドを一括管理できるのが強みです。
それぞれの機能を比較
| 機能 | Vercel | Firebase App Hosting |
|---|---|---|
| 対応フレームワーク | Next.js Angular Nuxt.js SvelteKit など | Next.js Angular |
| Github連携(CI/CD) | あり | あり |
| リージョン | 東京あり | アイオワ・台湾・オランダのみ |
| 独自ドメイン | ~~.vercel.app | ~~.[リージョン名].hosted.app |
| カスタムドメイン | 可能 | 可能 |
| SSL証明書 | 自動で適用 | 自動で適用 |
無料枠の範囲
Vercel
無料枠に関してはhobbyプラン内の制限に基づきます。
詳しくは公式ドキュメントを参考にしてください。
またhobbyプランの場合、個人利用のみで商用利用はできないようです。
Firebase App Hosting
本機能を利用する場合に従量課金制のblazeプランに加入する必要があります。
料金体制はCloud Run、Cloud Build、Artifact Registry、Cloud Secret Managerなどに準じており、無料枠を超過した分に対して課金されます。詳細はこちら
１ページのシンプルなNext.jsアプリケーションをデプロイした時の料金がこちらです。
Firebase上では金額が表示されていますが、無料枠の範囲も表示されてるぽいので、実際の請求は0円でした。
シンプルなポートフォリオサイトなど、広く公開する必要がない場合は、無料枠内で十分運用できそうです。
Firebase App Hostingを使ってみた感想
現時点ではVercelの方が使いやすいと感じました。
GUIで操作できる点や参考記事などの情報源も多く、導入が簡単にできました。一方でFirebase App Hositngは、リリースしたてでプレビュー版ということもありますが、情報や機能が少なかったりやGUIで操作できる場所も少なく、デプロイ時に手こずりました。
天下のGoogle様というのもあって、公式ドキュメントやFirebaseが日本語に対応してる点は、初心者にはわかりやすかったという印象です。
使用感
Firebaseコンソール上でGUI操作できるのは下記の範囲です。
- App Hostiongのプロジェクトの作成
- リージョンの選択
- 連携するGitHubの選択
- カスタムドメイン設定
- 自動ロールアウト設定
それ以外の詳細な操作はGoogle Cloudコンソールに移動する必要があります。
バックエンドの削除
Firebaseコンソール上のGUIからはバックエンドの削除を行うことができないため、Firebase CLIで操作する必要があります。コマンド一覧はこちら
firebase apphosting:backends:delete BACKEND_ID --project PROJECT_ID --location REGION
上記のコマンドを実行したのちに、Google Cloud上のArtifact Registry, Developer Connect,にて該当のコンテナイメージと連携してるレポジトリを削除します。
色々と工程が多く一つのサービス内で完結できないのが不便でした。。
まとめ
現状個人利用の範囲であれば、機能が豊富で無料プランがあるVercelを使うのがいいかなと思いました。Firebase App Hostingの方も手軽でかつ、Firebaseサービスと一貫して管理ができるものの、ほとんどの機能がGoogle Cloud側に依存しているので、操作感があまり良くないと感じました。
今後の一般提供に向けて、Firebaseコンソール上の操作性向上や機能追加に期待したいです！
Discussion