📅 February 02, 2026
⏱ 15 分で読める
DevOps / Infrastructure

VPSにNext.jsアプリをデプロイする方法

VPSへのNext.jsアプリケーションデプロイ完全ガイド：サーバー設定、Node.jsインストール（NVM経由）、アプリのクローン作成、ビルド、PM2によるプロセス管理、リバースプロキシとしてのNginx設定、SSL設定を網羅。

⭐ Intermediate

Next.jsアプリケーションを仮想専用サーバー（VPS）にデプロイするには、サーバー環境のセットアップからリバースプロキシとプロセスマネージャーの設定まで、いくつかの重要な手順が必要です。このガイドでは、UbuntuベースのVPSの使用、リバースプロキシとしてのNginx、プロセスマネジメントのためのPM2、およびSSL証明書のためのCertbotに焦点を当てます。

前提条件:

  • Ubuntuを実行しているVPS（例: 20.04、22.04、または24.04）。
  • 登録済みドメイン名（そのDNSレコードがVPSのIPアドレスを指していること）。
  • Linuxコマンドラインの基本知識。
  • 本番環境準備が整った Next.js アプリケーション（Git リポジトリへのプッシュが理想的）。

ステップ 1: VPS に接続しシステムを更新する

  1. SSH 経由で接続: ターミナルを開き、SSH で VPS に接続します: bash ssh your_username@your_vps_ip your_vps_ip は実際の VPS の IP アドレスに置き換えてください。

  2. システムパッケージの更新とアップグレード: セキュリティと安定性のため、サーバーのパッケージが最新であることを確認することが重要です。 bash sudo apt update && sudo apt upgrade -y

ステップ 2: Node.js および npm/yarn をインストールする

Next.js には Node.js が必要です。Node.js は、柔軟なバージョン管理のために Node Version Manager (NVM) を使用して、または Ubuntu のリポジトリから直接インストールできます。 一般的には NVM の使用が推奨されます。

オプション A: NVM を使用した Node.js のインストール (推奨) 1. NVM のインストール: bash curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash (注: v0.39.7 は検索結果からのものです。最新バージョンは NVM GitHub ページで確認してください。 ) 2. NVM を有効化: ターミナルを閉じて再起動するか、使用しているシェルに応じて以下のいずれかのコマンドを実行する必要があるかもしれません: bash source ~/.bashrc # または source ~/.profile または source ~/.zshrc 3. Node.js LTS バージョンのインストール: bash nvm install --lts または、特定のバージョンをインストールします。例: nvm install 20。 4. インストール確認: bash node -v npm -v これにより、インストールされた Node.js および npm のバージョンが表示されます。

オプション B: Ubuntu リポジトリから Node.js および npm をインストールする 1. Node.js をインストール: bash sudo apt install nodejs -y 2. npmのインストール: bash sudo apt install npm -y 3. インストール確認: bash node -v npm -v

ステップ 3: Next.js アプリケーションのデプロイ

  1. リポジトリのクローン: 適切なディレクトリ (例: /var/www/) に移動し、Git リポジトリから Next.js プロジェクトをクローンします。 bash sudo mkdir -p /var/www/your-app-name sudo chown -R your_username:your_username /var/www/your-app-name cd /var/www/your-app-name git clone https://github.com/your-username/your-nextjs-app.git . リポジトリが非公開の場合は、SSH キーを設定するか、HTTPS 経由でクローンするために個人用アクセストークンを使用してください。

  2. 依存関係をインストールしてビルドする: プロジェクトの依存関係をインストールし、本番用の Next.js アプリケーションをビルドします。 bash npm install # または yarn install npm run build # または yarn build npm run build コマンドは、アプリケーションの最適化された本番環境ビルドを作成します。

ステップ 4: PM2 (プロセスマネージャー) のインストールと設定

PM2はNode.jsアプリケーション向けの本番環境向けプロセスマネージャーであり、アプリケーションを無期限に稼働させ続け、容易な管理を可能にします。

npm install -g pm2

PM2でNext.jsアプリケーションを起動します。Next.jsアプリケーションは通常、デフォルトでlocalhost:3000で実行されます。

pm2 start npm --name "my-nextjs-app" -- start

"my-nextjs-app" をアプリケーションの説明的な名前に置き換えてください。

サーバー再起動時にPM2がアプリケーションを確実に再起動させるには：

pm2 startup systemd pm2 save

ステップ5: Nginxをリバースプロキシとして設定する

Nginxはリバースプロキシとして機能し、ドメインからのリクエストをポート3000で動作するNext.jsアプリケーションに転送します。

sudo apt install nginx -y

サイト用の新しい Nginx 設定ファイルを作成します。your_domain.com を実際のドメイン名に置き換えてください。

sudo nano /etc/nginx/sites-available/your_domain.com

以下の設定を追加します：

server {
 listen 80;
 server_name your_domain.com www.your_domain.com;

 location / {
 proxy_pass http://localhost:3000; # Next.js デフォルトポート
 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_set_header Host $host;
 proxy_cache_bypass $http_upgrade;  }
}

sites-enabled へのシンボリックリンクを作成してサイトを有効化し、Nginx 設定をテストします:

sudo ln -s /etc/nginx/sites-available/your_domain.com /etc/nginx/sites-enabled/
sudo nginx -t

テストが成功したら、Nginxを再起動します：

sudo systemctl restart nginx

ステップ6: ファイアウォール (UFW) の設定

UFW (Uncomplicated Firewall) を使用している場合は、HTTP (ポート 80) および HTTPS (ポート 443) トラフィックを許可してください。

sudo ufw allow 'Nginx Full'
sudo ufw enable

ステップ7: (オプション) Certbot (Let's Encrypt) によるSSL設定

アプリケーションをHTTPSで保護するには、Certbotを使用してLet's EncryptからSSL証明書を取得し設定します。

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your_domain.com -d www.your_domain.com

プロンプトに従ってください。Certbotが自動的にNginx設定を変更し、証明書の自動更新を設定します。

ステップ 8: 導入の確認

Next.js アプリケーションは、HTTPS 経由でドメイン名（ドメイン設定をスキップした場合は VPS IP アドレス）からアクセスできるはずです。ウェブブラウザを開き、https://your_domain.com に移動してください。

(オプション) CI/CD の設定

自動デプロイメントについては、GitHub Actions、GitLab CI、Jenkins などのツールを使用して、継続的インテグレーション/継続的デプロイメント (CI/CD) パイプラインの設定を検討してください。これにより、新しいコードをリポジトリにプッシュするたびに、VPS 上でアプリケーションのクローン作成、インストール、ビルド、再起動の手順が自動化されます。

これで、Next.js アプリケーションにドメイン名からアクセスできるはずです。