Next.js
ホスティング
どうも、@ryusei__46です。
この記事では、Next.jsで開発したWebアプリ・WebサービスをVPSや自前のサーバーなど、オンプレミス環境にデプロイする方法を解説します。
Next.jsの学習を始めた時に色々調べていると、代替がVercelにデプロイする方法がほとんどだったので、オンプレミス環境でホストする場合の知見が少ないようでした。
Vercelにデプロイする場合は便利なシステムが整っているので、とても楽だと思いますが、VPSと比べて月額料金が割高（月額２０ドル：２０２３年１２月１７日時点）であったり、VPSほどの自由度がないことなどがデメリットになります。
私の場合、VPS上でPythonやPHPといった他の言語も同時に動かしているということもあって、Vercelの環境は合いませんでした。
ということで、以下に備忘録を記載します。
開発環境
ローカル環境では、「Windows 11 Pro WSL 2.0 Ubuntu 22.04」を使用しています。
今回使用するデプロイ先のVPSはGMOグループが運営する「Conoha VPS」を使います。こちらは私が長年利用しているということもありますが、料金が手ごろで管理パネルもモダンで使いやすいと感じています。「Conoha VPS」では、通常のVPSに加えて、メール専用サーバー、データベースサーバー、また最近だと生成AIの開発に特化したGPUサーバーをレンタル可能です。
料金が手ごろというところで言えば、プラスで頻繁に割引キャンペーンもしていますし、学生であれば１５％の学割も使えます。
サービス面としては、「Conoha VPS」の他に「Conoha WING（WordPressブログ向け）」や「Conoha for Game（マインクラフトを初めとするゲームサーバーの作成）」、「Conoha for AI（法人・個人事業者向けAI開発用途／個人用途の場合はConoha VPSのGPUサーバーがおすすめ）」といったものがありますね。
これらすべてを同一の管理パネルから管理できるようになっています。
ConoHa VPSはひと月296円から。最新CPU搭載、超高速SSDを採用した、高性能なのにかんたんに使えるVPSです。今だけお得なキャンペーンも実施中。
ドメインの取得と設定
ドメインがまだない場合は、王道の「ムームードメイン」か「お名前.com」あたりで取得しておくのが良いと思います。どちらも初回１年間の割引が適用されるドメインが多いです。最近だと、ムームードメインでcomドメインが１年間無料で取得できるキャンペーンをやっていたのでお得でした。
当ブログは最近イケてるドメインで話題だったIOドメインを採用しましたが、IOドメインはかなり高価（年間７４００円）なので少し後悔ぎみです。
ムームードメインは、国内最大級のドメイン取得サービスです。選べるドメインは620種類以上。サイトやメールアドレスをすぐに作成できるムームーサーバーなら初期費用0円+ドメインもずっと0円でご利用いただけます。まずはドメイン検索から。
お名前.comは国内最大級のドメイン公式登録サービスです。ドメイン登録実績3900万件を超えました。人気の.com .net .jpドメインを含め630種類のドメインを取り扱っております。
「Conoha VPS」でもドメインは取得できますが、基本的に割引がないのでコスパは悪いです。２年目以降は通常料金が発生してくるので、もしドメインもConohaで一元管理したい場合は、１年後に移管手続きをすると良いと思います。
ドメインのDNS設定
ドメインが取得出来たら、ネームサーバー（DNS）の設定を行います。私は「お名前.com」なので、マイページの「ネームサーバーの変更」ページを開きます。
上記の設定で、Conoha VPSのDNSにトラフィックを転送するようにします。Conoha VPSのDNSは３台あるようなので、1～3までns-a1.conoha.io・ns-a2.conoha.io・ns-a3.conoha.ioをそれぞれ順に入力し、設定処理を完了させます。
次にConohaの管理パネルで取得したドメインをDNSに設定します。
左のメニューから「DNS」をクリックし、「＋ドメイン」をクリックすると、新規ドメインの入力フォームが表示されるので、先ほど取得したドメインを入力して追加します。
そうすると、下に追加したドメインが表示されるので、クリックして適宜必要なレコードを設定します。
赤枠で囲っている部分が当サイトと現在公開している各種サービスのドメイン設定です。これを参考に、「名称」はサブドメインを設定する場合に入力が必要で、「値」にはサーバーのIPアドレスを入力します。
青枠で囲っている部分は、ドメイン追加時に自動で挿入されるDNSレコードです。
新規のレコードを追加する場合は、画像右上の✐鉛筆マークをクリックします。
サーバーを新規で構築する場合
Conoha VPSの管理パネルで、左メニューの「＋サーバー追加」から行えます。
最近管理パネルをアップデートしたようで、「管理パネル Ver 2.0」（旧バージョン）と「管理パネル Ver 3.0」（新バージョン）があります。下記の画像は新バージョンのものです。
様々なOS・各種ディストリビューションからサーバーを構築できます。また、料金プランも柔軟に選択できます。短期で使用したい場合は「時間課金」がおすすめですが、長期の場合は「３ヵ月」以上のプランがおすすめですね。
また記事を書いた時点だと、Ubuntuで一番最安の月額３９９円プランが利用不可になっていますが、旧バージョンの管理パネルに切り替えると選択できるようになっていました。
また、新規サーバー構築時に自動でインストールされるアプリケーションも選択できるようになっています。
WordPressを初めとする各種CMSの他、LaravelなどのWeb開発フレームワーク、Dockerなどのコンテナ管理ツールなどを自動でインストールできます。
Conoha VPSにNext.jsをデプロイする
それではローカル環境にあるNext.jsプロジェクトをConoha VPSにデプロイする準備をします。
まず、プロジェクト内で.envファイルを使って環境変数を使用している場合は、デプロイ先（本番環境）のものを定義します。ビルド時に本番環境の環境変数でビルドを行うには、.env.productionというファイルを追加し、本番環境で使用する値に変更したものを入力して保存します。
.envファイルの詳細な種類は以下のようになります。
ファイル | 用途 | 適応環境 | プライオリティ | 利用頻度 |
|---|---|---|---|---|
.env | 全ての環境で読み込まれる。環境に依存しない共通の変数を定義する際に使用。 | 全環境 | 4 | 高 |
.env.development | 開発環境で読み込まれる。開発環境で変数を定義する際に使用。 | 開発環境（ | 3 | 高 |
.env.production | 本番環境で読み込まれる。本番環境で変数を定義する際に使用。 | 本番環境（ | 3 | 高 |
.env.local | 全ての環境で読み込まれる。環境に依存しない共通のAPIキーやDBパスワードなど機密情報を定義する際に使用。 | 全環境 | 2 | 低 |
.env.development.local | 開発環境で読み込まれる。開発環境におけるAPIキーやDBパスワードなど機密情報を定義する際に使用。 | 開発環境（ | 1 | 中 |
.env.production.local | 本番環境で読み込まれる。本番環境におけるAPIキーやDBパスワードなど機密情報を定義する際に使用。 | 本番環境（ | 1 | 中 |
詳しくは以下の記事で解説があります。
次に、pnpm run buildコマンドでNext.jsをビルドします。
その後、プロジェクト内のファイル一式をConoha VPSで構築したサーバーにSSHでアップロードします。
今回は簡単にローカル環境とリモートの同期をとってくれるrsyncコマンドを使ってデプロイします。
$ rsync -rtuvz --delete --exclude="node_modules" --exclude=".git" --exclude=".vscode" --exclude=".env" --exclude=".env.production" -e "ssh -p [port number] -i [key file path]" [local project root path] [user]@[server ip address]:[remote project root path]ローカル環境の亢進を本番環境に反映したい場合に、その都度こちらのコマンドを実行します。しかし、毎回上記のコマンドを入力するのは手間なので、シェルスクリプトファイルとして保存し、upload-rsync.shなどのファイルをコマンドラインで実行できるようにするのが良いです。
また、本番環境では基本的にプロダクションモードのみの運用になるので、.next/配下のみ一式アップロードするだけでも良いと思います。
あとは、アップロードできたら、本番サーバーにSSHでログインして、pnpm run startコマンドを再実行すれば完了ですね。
また、以下の記事では、VPS上で複数のNext.jsプロジェクトをポート番号で分けて運用する方法を解説しています。本番サーバーで実際に運用していく場合は、NginxやOpen Lite Speedを使ってリバースプロキシを構築する必要があります。
Next.js製のWebアプリをセルフホストする場合に、同じサーバー内でリバースプロキシを使って複数のアプリを運用する方法を解説していきます。リバースプロキシにはOpen Lite Speedを使用します。