Next.jsをVPSで動かす：PaaSとの違いと、自分で用意するもの

レン

Next.jsで作ったサイト、専用のホスティングじゃなくてVPSでも動かせる？

プロクラ

動かせるよ。当サイト自身がそうしている。ただ、専用のホスティングが黙ってやってくれていたことを、自分で用意することになる。そこを分かったうえで選ぼう。

自分で用意することになるもの

• ビルドの実行と、その置き場所
• アプリを常駐させ、落ちたら再起動する仕組み
• 前段のWebサーバー（HTTPS、圧縮、静的ファイルの配信）
• 証明書の取得と自動更新
• デプロイの手順（止めずに入れ替える方法）

プロクラ

専用のホスティングを使えば、この全部が最初から用意されている。それでもVPSを選ぶ理由は、月額が読めること、他のものと同居できること、構成を自分で決められることだね。

ビルドをどこでやるか

本番でビルドすると、その間だけメモリが跳ね上がります。普段は1GBで足りていても、ビルドの瞬間だけ倍近く必要になることがあり、そこで強制終了が起きます。しかも落ちるのは動いているサイトのほうです。手元や別の場所で組み立ててから運ぶと、この山を本番に持ち込まずに済みます。

プロクラ

最初の壁がこれ。ビルドはメモリを大きく使うので、小さいプランだと本番サーバー上でのビルドが失敗することがある。

• 本番でビルドする: 手軽だが、メモリと時間を使う
• 別の場所でビルドして、成果物だけを置く: 本番の負荷が小さい
• 小さいプランでは、後者を検討する価値がある
• 依存を最小限にした出力形式を使うと、置くものが減る

常駐させる

• プロセス管理ツールか、systemdで常駐させる
• サーバー再起動後に自動で立ち上がる設定にする
• 落ちたときに自動で再起動する設定を入れる
• ただし、無限に再起動を繰り返さないよう上限を設ける

実際に踏んだ落とし穴

プロクラ

当サイトで実際に起きたことを書いておくね。稼働中のプロセスが読んでいるファイルを、ビルドがそのまま上書きしてしまったんだ。その最中のアクセスがエラーになった。

• デプロイのたびに、数十件のエラーが発生していた
• 検索エンジンの巡回も、その瞬間に当たっていた
• 原因は、稼働中の出力先へ直接ビルドしていたこと
• 別の場所へビルドして、完成してから入れ替える形に変えて解決した

プロクラ

教訓としては「動いているものの上に、直接書かない」だね。作ってから差し替える。この考え方は、他のフレームワークでも同じように使えるよ。

レン

自分で用意するものが5つ。それを引き受けるかどうかなんだね。

どのくらいのプランで動くか

プロクラ

動かすだけなら軽いけれど、ビルドを含めると必要な容量が変わる。ここを分けて考えると、プラン選びがしやすいよ。

• 実行するだけ: それほど大きくなくても動く
• ビルドを本番でやる: 一時的に大きくメモリを使う
• データベースを同居させる: その分を足す
• 迷ったら、ビルドを別の場所でやる構成にして、実行側は小さめにする

前段のWebサーバーに任せること

アプリを直接インターネットに晒さないのが基本です。前にWebサーバーを置けば、暗号化の処理、静的ファイルの配信、同時接続の受け止めをそちらに任せられます。アプリ側は本来の処理に集中でき、証明書の更新もWebサーバー側で完結します。

• HTTPSの終端と証明書の自動更新
• 圧縮（アプリ側の圧縮は無効にして、こちらに一本化する）
• 静的ファイルの配信
• アプリは外に公開せず、前段からだけ繋ぐ