【Next.js】のビルド時間をいくつかのプラットフォームで計測してみた

2023-03-09

はじめに

以前Amplifyで個人開発のNext.jsのアプリをビルドさせたら遅すぎて萎えたって話をしたことがあるが、そういえば同じやつを他でビルドしてみたらどうなるんだろうと思って試してみた。その結果のまとめ。

はじめに
概要
実験対象
結果
余談

概要

ソースコードはこちら。create-next-appした後に適当なSSRとSSGのページを1つずつ加えただけの、ほぼNext.jsの初期セットのアプリである。ちなみにTypescript。README.mdに既に簡単に結果は載せてある。なお各プラットフォームのビルドのログも載せた。
面倒なので（簡単のために）、基本的にGitHubのリポと繋げたら(GitHubにpushしたら)そのままビルドが走るプラットフォームのみを実験の対象とした。そういう意味ではGitHub Actions使えば実質なんでもアリなのだが、あれだとコードのcloneなどdeployに至るまでの一部の処理は恐らくGitHub側で動くことになるので、厳密にプラットフォームのビルド時間の計測にならんと思われ、採用しないこととする。

実験対象

Next.jsの元祖Vercel。まあNext.jsつったら基本的にまずこれが挙がるだろう。
AWS Amplify。冒頭書いた通り、こいつにビルドさせたら鬼のように遅かった記憶があるので、それを実証するために実験させていただいた。
Cloudflare pages。これは実は個人的に使ったことがなかったので、ビルド時間の計測云々とは別に単純に興味本位で使って見たくて候補にいれた。
我らが（？）Heroku。もともとこいつは実験対象に挙がらなかったんだが（既に色々使いまくってるので面白みがない）、簡単に試せるしまあやっとくかという感じで実験対象とした。
Render。こいつも簡単に試せるという意味ではHerokuと同様で、候補にいれた。Freeだとビルドが遅いのは承知の上なので、これも興味本位の色が強い。

その他以下も候補の検討に挙げたが、試してない。

GAE(Google App Engine)。既にひなっちのおはっちのサイトはNext.jsのアプリとして動作させているので、実績はある。ただGitHubと繋げるのがちょっと面倒くさかった記憶があるので試していない。
Firebase。これは確かNext.js動かすにあたってFunctionsが必要になったはずで、その手間が面倒くさいのでやめた。
その他、Netfilyとか思いついたけど、使ったことないしそこまで興味もないからいいやって感じで手を出していない。そもそもNetlifyって確かSSR動かなかった（SSGしか動かない）と記憶しているので、ちょっとだけでもSSRを含んでいるこのアプリをビルドする意味はないと考えている。（ここは正直裏とったわけじゃないからよくわからん、あってるかな）

結果

以下の通りになりました。（速い順）

Platform	Region	Time(s)
Heroku	US region	11
Vercel	Washington, D.C., USA (East) – iad1	56
Cloudflare Pages	? (Cloudflare's global network)	87
AWS Amplify	ap-northeast-1	188
Render	Oregon (US West)	254

HerokuはCommon Runtime/US、RenderはWeb Service(Free)にdeploy。Cloudflareはどこでビルドしてるんだか設定やログからはわからなかったが、まあこういう場合大抵はアメリカ西海岸のどっかだろう。（多分）deploy先は「Edge Network」と書いてあったのでリージョンという概念は恐らく存在しない、はず。
別にポジショントークとかじゃなく、単純にこの実験を行い結果を見た一個人の意見として書くのだが、この中だとHerokuが何故かダントツで速い。本家本元のVercelより速いのは驚きだ。（まあ構成が全然違うからその辺の違いが出るのは当然か）
Vercelはまあ普通って感じ。Next.jsのビルドという意味ではこれが基本というか基準とみていいんじゃないかと思う。単一のWebアプリというより、裏でLambdaとか色々用意してる（だろう）ことを考えると、むしろ速いほうではないか。
Cloudflare pagesは思ったより遅かったのだが、まあでも1分半だしね、それくらいなら、、、というのが個人的な感想。ただ、実際にこれでアプリ運用したことがないので、ビルド時間だけ見ても一概に優劣は判断できない。余談だが、ビルドの設定が他と違ってやや特殊だった。後述する。
AWS Amplifyはまあ想定通りの遅さだ。むしろ3分ちょいで終わってるのが早いとすら感じられる。（前に試したときは12分くらいかかった記憶があるのだが）ただまあ3分かかっちゃうんじゃな…他が1分前後で終わる中でわざわざこれ選ぶかな…という気には正直、なってしまう。
Renderは抜群に遅い。Amplifyより遅いのは驚きだ。Freeはビルドが遅いというのは知らされているが、それにしてもここまで遅いのかという驚き。ビルド時間の制限もあることだし、少なくともFreeのWeb ServiceでNext.jsを運用するのはチョイスとしては完全に「ナシ」だろう。余談だがこれもちょっと細工しないとビルドできなかったので、後述する。

とまあ、試した中ではこんな感じになった。速いものは1分かからず終わるが、遅いものは6分以上かかるなど、意外にバラバラだった。速さだけで言うならHerokuが一位だが、運用後のコスパとか考えると総合的にはVercelが一位になるのだろうか。まあNext.jsの本家だからな。色々家系ラーメン食ったけどやっぱり吉村家が一番だよなみたいな回帰と同じだ。（？）

余談

Cloudflare pagesでこのプロジェクトをビルドする場合、環境変数 NODE_VERSION=16 の指定が必要だった。このドキュメントにその辺の注意が書いてある。なお、他と違って、プロジェクトの種類にNext.jsを選ぶと、ビルドのコマンドが自動的にnpx @cloudflare/next-on-pages --experimental-minifyといった見慣れないものになるが、これも下手にyarn install; yarn buildとかに変えたら動かなくなる（ビルドがエラーになる）。Cloudflare pagesのビルド環境にはそもそもyarnが入ってないようだ。
RenderにNext.jsのアプリをdeployする場合のドキュメントはこちら。このドキュメントの中に、Node.jsのバージョンに関する注意事項についてのリンクがあるが、package.jsonのenginesに、最低でも>=16の記述が必要。このソースコードはそうなってるが。
他がUSリージョン使ってるのにAmplifyだけ（AWSの初期設定のままの）東京リージョン使っちゃったのを、あとから見直して気付いたが、まあ面倒くさいからもういいかという結論に至った。us-east-1にしたところで多分大して変わらないだろう…多分。