Next.js + SupaBaseを利用したWebアプリケーションの最適なホスティングサービスについての比較
今回対象とするサービスは以下の3つです。
とても参考になる比較記事があったのでメリット・デメリットについてはそちらから抜粋しました。
（参考記事）
Vercel
メリット
- Next.jsの新機能サポートが手厚い
- 信じられないくらい設定が簡単（ポチポチしていればCI/CDが設定できる）
- 簡単な故に構成や設定が複雑になりにくいため、メンテナンスコストが低い
デメリット
- 無料プランだと商用利用できないため、個人開発で使うケース以外だとProプラン（月20ドル）の契約が最低限必要になる
Netlify
メリット
- Vercelと同レベルで設定が簡単
- 無料プランでも商用利用が可能
デメリット
- Enterpriseプラン以外だと日本のCDNを使えないため、パフォーマンスが悪い
Cloudflare Workers
メリット
- 帯域幅制限が無い
デメリット
- ベータ版のため、動作に不安が残る
コスト比較
| サービス名 | 無料版 | 商用利用 | 費用 | 備考 |
|---|---|---|---|---|
| Vercel | 〇 | △（有償版のみ〇） | Pro ：月20ドル エンタープライズ：問合せ必須 |
各種追加サービスやアドオンなどによる従量課金 Vercelの料金 |
| Netlify | 〇 | 〇 | Pro ：月19ドル エンタープライズ：問合せ必須 |
GithubOganizationのPrivateRepoを利用するにはPro版必須 Netlifyの料金 |
| Cloudflare Workers | 〇 | 〇 | Paid：月5ドル＋超過料金？ |
Next.js + Supabaseとの互換性
| サービス | 互換性 | 説明 |
|---|---|---|
| Vercel | ◎ | ・Next.jsを作った会社が行っているサービスなので、デプロイの際に特に何も設定しなくてもほぼすべての機能が利用できる ・Supabaseの設定も環境変数を設定すれば問題なく接続できた |
| Netlify | 〇 | ・静的ホスティングサービスだが、こちらも同様に環境変数を設定すれば問題なく接続できた ・Next.jsの機能を代替するサービスがあるがネイティブでサポートはしていないので設定が必要 |
| Cloudflare Workers | △ | Next.jsとSupabaseのビルド自体は行えるが、Next.jsで利用できる機能については独自実装が必要とのこと。 独自のパッケージや設定が必要なので少し工夫が必要 |
Next.js：Vercel・Netlify・Cloudflare Workersの比較
| 機能 | 説明 | Vercel | Netlify | Cloudflare Workers |
|---|---|---|---|---|
| ISR | ページの静的キャッシュを動的に更新できる機能 | ネイティブサポート | 設定が必要 | カスタム実装が必要 |
| Middleware | リクエストごとにカスタムロジックを挟める機能 | フルサポート | なし | 独自コードで実装可能 |
| Edge Functions | エッジネットワークでサーバーサイド処理を実行する機能 | 完全対応 | 設定が必要 | 標準で利用可能 |
| API Routes | サーバーサイドのエンドポイントを構築する機能 | シームレスに動作 | Functionsで代替 | Workersで独自実装必要 |
| Rewrites/Redirects | URLのリダイレクトや書き換えを簡単に設定できる機能 | 簡単に設定可能 | 手動設定が必要 | カスタム実装が必要 |
| 画像最適化 | 画像を動的に最適化して配信する機能 | 標準対応 | プラグインが必要 | 独自構築が必要 |
| Preview Mode | 下書き状態のコンテンツをプレビューする機能 | ネイティブサポート | 設定が必要 | 独自実装が必要 |
セキュリティ（IP制限、プロキシ制限）
-
Vercel・Netlify
サイトの前にプロキシサーバーを経由する構成は非推奨とのことです。
参考記事 -
Cloudflare Workers
IP許可リスト設定が可能（ゾーンロックダウン機能）ですが、Workersで利用可能かは未確認です。
詳細はこちら
IP制限
| 種類 | 説明 |
|---|---|
| Vercel | Vercel Firewall が利用可能、IP制限を利用できるがプランによって上限あり |
| Netlify | Netlify Advanced Web Security が利用可能だが、エンタープライズ版のみらしい・・・ 
|
| Cloudflare Workers | ゾーンロックダウンというセキュリティ機能があり、IP許可リストを設定可能な模様 Workersで利用できるかは未確認 詳細はこちら |
ログ出力
| プラットフォーム | ログの種類 | 説明 | 出力形式 |
|---|---|---|---|
| Vercel | ビルドログ | デプロイ時に生成されるビルドの進行状況を示すログ。ビルドツールのバージョン、警告やエラー、依存関係の詳細などを含む。 | - |
| ランタイムログ | サーバーサイドのランタイムログを検索、検査、共有可能。Vercelダッシュボードで閲覧可能。データ保持期間は3日間。 | - | |
| アクティビティログ | 環境変数の変更やデプロイメントなど、イベントを時系列で表示。 | - | |
| 監査ログ | チームメンバーの操作を追跡可能。最大90日間のデータをCSV形式でエクスポート可能。 | CSV | |
| ログドレイン | ログデータを外部へエクスポート可能。デバッグや分析を容易にする機能。 | CSV | |
| Netlify | デプロイログ | サイトのビルドイメージ、依存関係のキャッシュ、Netlify Buildプロセスの詳細を含む。 | テキスト |
| ファンクションログ | サーバーレス関数の実行に関するログ。 | テキスト | |
| エッジファンクションログ | エッジ関数のコンソール出力のログを提供。 | テキスト | |
| トラフィックログ | 訪問者のアセットやページリクエストを追跡。 | JSON / NDJSON | |
| WAFログ | WAFルールに一致するリクエストを追跡。 | JSON / NDJSON | |
| サイト監査ログ | サイト設定の変更、環境変数の更新、デプロイのロールバックなどを監視。 | JSON / NDJSON | |
| チーム監査ログ | チームメンバーのアクションを追跡。 | JSON / NDJSON | |
| Identity監査ログ | Netlify Identityユーザーのアクションを追跡。 | JSON / NDJSON | |
| Log Drains機能 | JSONまたはNDJSON形式で外部エンドポイントへログを送信可能。Amazon S3の場合はGzip圧縮されたファイル。 | JSON / NDJSON / Gzip | |
| Cloudflare Workers | HTTPリクエストログ | WebサイトへのHTTPリクエストに関する詳細を提供。 | JSON (Logpush機能) |
| DNSログ | DNSクエリの詳細を記録。 | JSON (Logpush機能) | |
| ファイアウォールイベントログ | セキュリティ関連のイベントやトラフィックの詳細を提供。 | JSON (Logpush機能) | |
| アクセスリクエストログ | Cloudflare Accessの認証リクエスト情報を記録。 | JSON (Logpush機能) | |
| 監査ログ | アカウント内で行われた変更の履歴を記録。 | JSON (Logpush機能) | |
| Instant Logs機能 | HTTPリクエストログを即座にダッシュボードやCLIで表示可能。 | ダッシュボードまたはCLIで閲覧 | |
| Logs Engine機能 | Cloudflare R2にログを保存し、クエリ可能。 | JSON |
結論
-
Vercel
Next.jsのすべての機能をシームレスに活用したい場合は最適。
AI駆動開発では、「この機能が使えない」を極力なくしたいので、できれば優先したい。 -
Netlify
コストを抑えつつ基本機能を使いたい場合や、サーバーレス機能をメインで使う場合に適している。 -
Cloudflare Workers
高度なセキュリティやエッジネットワークの超低遅延を活用したい場合、またカスタム実装に対応できる開発チームがいる場合におすすめ。
自由度が高い分、環境構築のハードルが高い。