フルスタックの NextJS アプリをデプロイする PaaS を徹底比較!

目次

はじめに

NextJS のアプリケーションをネットに公開してみたいあなたへ。

最近では、色々なクラウドサービスが無料または安価でアプリケーションのホスティングを提供しています。
果たして、どのサービスを使ったらいいのでしょうか?

この記事では、人気の PaaS サービス 5 社について比較してみました。
加えて、自前の VPS でアプリケーションをホスティングするシステムを活用した方法の有効さも評価します。

比較対象

  • Vercel
  • Netlify
  • Fly.io
  • Heroku
  • Firebase App Hosting
  • Coolify を使って独自に建てた自前 PaaS

テスト環境

NextJSの様々な機能を活用したこちらの サンプルアプリ を各サービスにデプロイし、以下のテストを行いました。

各社プラン & デプロイ環境 (価格比較)

※各社の無料プランまたは最安のプランを使っています。

Vercel

名前Hobby Plan
価格無料
帯域制限100GB/月
CDNあり(AWS を使った自前ネットワーク)
その他補足無料プランは商用利用禁止

Netlify

名前Free Plan
価格無料 (⚠)
帯域制限100GB/月
CDNあり(AWS+GCP を使った自前ネットワーク)
その他補足無料プランでも商用利用可能

Netlify 利用者は気を付けましょう!
Vercel と違って、帯域制限を超えてもサイトの配信が続きます。無料枠を超えた分は通常料金が課金されます。無料運営していたサイトがDDoS攻撃されて、知らない間に高額請求されるケース もありますので、気を付けてください。

Fly.io

名前shared-cpu-1x 256mb x1
価格毎月VM3つまで無料
帯域制限100GB/月 + アジア専用帯域60GB
CDNCDN風のネットワーク(Cloudflare との同時利用を推奨)
その他補足ご利用にはクレジットカードが必要

Heroku

名前Eco Dynos Plan
価格月$5
帯域制限各アプリ毎月2TB
CDNなし(Cloudflare同時利用推進)
その他補足ご利用にはクレジットカードが必要

Firebase App Hosting

名前Firebase Blaze Plan
価格従量課金制(無料枠あり)
帯域制限各アプリ毎日 360MB
CDNあり(Google Cloud CDN)
その他補足ご利用にはクレジットカードが必要・GCP アカウントと連携

FirebaseはNetlifyと同じく、無料枠を超えたら課金されます。

自前環境(Coolify)

VPSHetzner CAX21
価格€7.72 / 月
帯域制限VPS 全体で 20TB
CDNなし(Cloudflare 同時利用)
その他補足環境構築にある程度の Linux スキルが必要

※VPS なので、好きな環境で利用できます。これはあくまで例です。

ビルド時間

各社それぞれ独自の CI/CD システムが備わっており、GitHub にプッシュすると自動的にビルドが行われ、公開されているサイトが入れ替わります。
Fly.io だけは、自前の CI/CD ではなく、GitHub Actions を利用してデプロイされます。

各社のビルド時間を比較してみましょう。上のタイムラプス動画を参考にしてください。

VercelとNetlifyは同等に非常に速く、1分ぐらいでビルドが完了します。
その次に早いのが自前の Coolify ですね。1分30秒ぐらいで完了します。その次に速いのは Heroku で、2分ぐらいかかりました。
Fly.io はその次で、2分15秒で完了しました。

Firebase は GCP のインフラを利用してるにも関わらず、非常にビルドが遅いのが気になりますね。その次に遅い Fly.io の二倍である4分以上かかりました。これはベータ版であることが理由なのでしょうか?

まとめると、ビルド時間に関してだけで言うと、Netlify と Vercel の勝利ですね。

グローバルレイテンシー

次に気になるのはレイテンシーですね。
公開したサイトは世界各国どこからでも快適に見ることができるのでしょうか?確かめてみましょう。

※CDNキャッシュを使った結果です。

Vercel

多くの国では50ms以内にページがロードしてます。いい結果だと思います。日本は 58ms かかっています。

Netlify

Vercel と比べるとちょっと弱いようですね。基本 100-150ms 以内にロードしています。
日本は 864ms かかっているので、国内向けのサイトには適していないかもしれません。

Fly.io

ノードの場所が国一つに指定できるので、ノードの場所から段々と遅くなっていくようですね。今回は東京に置いたので、日本は非常に速い49msですね。
これはノードを増やす、または Cloudflare を通すことで世界全体のスピードを上げることができるでしょう。

Heroku

Fly.io と同じくサーバーの場所が一つなので、そこから広まると遅くなっていくのが目立ちます。これも Cloudflare を通して利用するといいと思います。

Firebase

GCP のインフラを使ってるにも関わらず、全体的に遅く感じますね。これもベータ版だから仕方ないのでしょうか?

自前PaaS(Coolify)

※自サーバーなので Cloudflare を通しての結果となります。あくまで Cloudflare の速度の評価になります。

Heroku 等と同じく、サーバーが一つの場所にあることから分散が苦手のようです。

まとめると、一番早く感じたのは Vercel と Netlify のサーバーレスプラットフォームですね。速度的にはVercelが勝利だと思います。
サーバーレスではないプラットフォームの方では、ユーザーベースを元にサーバーを置く場所を考えるといいでしょう。Firebase は全体的に遅いです。

PageSpeed Performance

Vercel88
Netlify92
Fly.io90
Heroku83
Firebase95
Coolify98

PageSpeed Insights と同じ GCP のインフラを使っている Netlify と Firebase が圧倒的に速いですね。これに関しては、全てのプラットフォームが同様に良い結果であると言えるでしょう。
一番意外だと思ったのは Cloudflare を通した Coolify が一位だったことです。これがまさに Cloudflare の強みなのでしょうか?

まとめ

さて、様々な調査の結果、どの PaaS をオススメするか?と言われると、私はユースケースによって違ってくると思います。まずはじめに、各プラットフォームの利点と欠点をまとめてみましょう。

Vercel

  • NextJS の開発者自身が誇る、超簡単かつ高速なビルド
  • 全体的に速いグローバル CDN が標準装備
  • サーバーレスプラットフォームだからレイテンシーも小さい
  • わかりやすい CI/CD
  • 商用利用は不可能
  • 無料枠以上の帯域がそこそこ高額

Netlify

  • グローバル CDN 標準装備
  • サーバーレスプラットフォームだからレイテンシーが小さい
  • 商用利用可能
  • ビルドが超高速
  • 無料枠を超えると高額請求される可能性あり
  • CI/CD は GitHub 側には表示されない

Fly.io

  • 無料リソースが多く、優しい無料枠
  • コンテナアプリプラットフォームだから、NextJS 以外のアプリも運営できる
  • 商用利用可能
  • 様々なハードウエア構成から選択できて自由度が高い
  • ビルドは GitHub Actions を使う必要がある
  • 登録にはクレジットカードが必要
  • CDN がないからレイテンシーが気になる

Heroku

  • 20TB と大容量な帯域が標準装備
  • コンテナアプリプラットフォームだから、NextJS 以外のアプリも運営できる
  • 商用利用可能
  • GitHub と完全に連携された分かりやすい CI/CD
  • 様々なハードウエア構成から選択できて自由度が高い
  • 無料枠なし
  • CDN がないからレイテンシーが気になる

Firebase

  • GCP との深い連携
  • 大手クラウド特有の高額な従量課金
  • 全体的に遅い

自前PaaS(Coolify)

  • 自分で全てを管理できる
  • コンテナアプリプラットフォームだから、NextJS 以外のアプリも運営できる
  • 商用利用可能(もちろん)
  • 自前サーバーにも関わらず、GitHub と連携した CI/CD
  • 好きなハードウエア構成で動かせるので、自由度が高い
  • 自分で VPS を買って運営する必要がある
  • CDN がないからレイテンシーが気になる(Cloudflare で解決できる)

ケースに対してのオススメ

「自分の個人的なサイトや Web アプリを簡単に動かしたい!」

  • Vercel
  • Fly.io

「バックエンドとかも Web と一緒に動かしたいから、Docker も使えるサーバーが欲しい!」

  • Fly.io
  • 自前PaaS(Coolify)
  • Heroku

「世界中のユーザーへコンテンツを配信したい!」

  • Vercel
  • Netlify
  • Fly.io

「自分で全てやりたい!」

  • 自前PaaS(Coolify)

「ユーザーが多い商用サービスを安価で動かしたい!」

  • Heroku
  • Fly.io
  • 自前PaaS(Coolify)

後書き

最後までお読みいただきありがとうございました。この記事がプロジェクト構成の参考になれば幸いです!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする


目次