VPS低価格プランでもDocker+Next.jsでJamstackしたい

限りある現金を大切にしながら、あらゆる課題に挑戦し続けるはるきょです。

さて、VPSの相場として月に3,000〜5,000円も払えば本番環境に程よいスペックを手に入れられるわけですが、そんな高額なプランをこの実験的ブログに奢るわけにはいきませんので、現状といたしましてはさくらインターネット2Core1GBプラン（年額10,000円くらい）を契約するに至っております。

Docker様の推奨される本番環境の必要メモリは4GB以上であり、スペックが達していないサーバを利用する者はメモリ不足に起因したトラブルに遭遇した際には、泣きながら財布のがま口を開けてクレジットカードを取り出してコントロールパネルのスケールアップをボタンをクリックするのが様式美とされています。（要出典）

502エラーから開放されたくて、ついスケールアップポチりそうになりましたが、すんでのところで踏みとどまりました。

低価格プラン（＝低スペック）で動かしたい！！！！

というわけで、VPS低価格プランでもDockerとNext.jsを安定稼働させるべく断行したいくつかの対策を記載しておきますので、同じお悩みをお持ちの方はご参考ください。

エラーが出る

Next.jsが稼働するサーバのメモリが枯渇すると、Next.jsが落ちてプロキシサーバ側で「502 Bad Gateway」を吐きます。ローカルではうまくいくのに本番環境にアップしたらページ遷移時にサーバが落ちるなどの現象を生じれば、メモリの使用率などを確認しましょう。

# 1秒ごとにメモリの残りをウォッチする
$ watch -n 1 free -tm

やったこと

アクセスのたびにサーバに負担がかかるようでは戦えませんので、なるべく負荷を避けるロジックに変更します。

リファクタリング

無駄な処理がないかソースコードを見直し、書き換えました。あたりまえ体操。

SSG化

これまでSSR+SSGだった構成を、思い切って全ページSSGに変更しました。SSRはなんだかんだサーバのリソースを消費します。

トップページの記事一覧や、タグ別記事一覧や、これらのページネーション（記事一覧の[1][2][3]みたいなやつ）もGetStaticPathsにURLリストを送ってビルドします。

Imageタグの置き換え

Imageもimgタグに置き換えました。

Next.jsに用意されたImageコンポーネントは大変強力な機能です。ファイル情報とパラメータを渡すだけで環境に最適化された画像（Webp）を配信してくれます。

しかしこのImageコンポーネントは、SSG/SSRなど配信方法の如何に関わらず配信時に多くのリソースを消費します。特に記事一覧のサムネイルなど、多くの画像を同時に書き出そうとする場合、メモリ枯渇の原因になってしまいます。

そこで、これも思い切ってImageタグをimgに置き換え、配信時にNext.js側の処理をはさまないように変更しました。

画像はWordPressプラグインでWebpに変換します。（Converter for Mediaを使用）
Next.js側もWordPressのドメイン置き換えなども特に作業もなく導入できました。（無料ライセンスだと1000ファイルまで）

結果

なんとかエラーを発生させることなくブログを安定的に表示することができました。記事一覧ページでShift+Command+Rを押し続けるとダウンしていたのが信じられません。

安定的稼働はSEOにも影響するので、心配事が一つ減って良かったです🏆