VPSサーバー構築ガイド

はじめに

VPS（Virtual Private Server）は、レンタルサーバーの一種で、仮想化技術を使って1台の物理サーバーを複数の独立した仮想サーバーに分割したものです。VPSを利用することで、専用サーバーに近い自由度と性能を低コストで得られます。この記事では、VPSにNext.jsアプリケーションをデプロイする手順を詳しく解説します。

前提条件:

VPSが契約済みで、SSH接続が可能であること（OSはUbuntu 22.04 LTSを想定）

独自ドメインを取得し、VPSのIPアドレスにAレコードを設定済みであること

Next.jsアプリが完成していること（GitHub等で管理されていると便利）

1. VPSの初期設定

1.1 SSHでサーバーに接続

ターミナルから以下のコマンドでVPSに接続します。

ssh root@<VPSのIPアドレス>

1.2 システムの更新と必要なパッケージのインストール

apt update && apt upgrade -y
apt install -y curl git ufw

1.3 ファイアウォールの設定

SSHとHTTP/HTTPSのポートを許可します。

ufw allow OpenSSH
ufw allow 'Nginx Full'
ufw enable

1.4 一般ユーザーの作成（セキュリティ向上のため）

adduser <ユーザー名>
usermod -aG sudo <ユーザー名>

以降はこのユーザーで作業します。

2. Node.jsのインストール

Node.jsは、Next.jsアプリを実行するために必要です。最新の安定版をインストールします。

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

バージョン確認:

node -v
npm -v

3. Gitとアプリケーションのセットアップ

3.1 Gitのインストール（完了済み）

3.2 アプリケーションのクローン

mkdir /var/www
cd /var/www
git clone <あなたのリポジトリURL> myapp
cd myapp

3.3 環境変数の設定

Next.jsアプリで使用する環境変数（例：DATABASE_URL, API_KEYなど）を.env.localファイルに設定します。

nano .env.local

内容例:

DATABASE_URL=postgresql://user:password@localhost:5432/mydb
NEXT_PUBLIC_API_URL=https://api.example.com

3.4 依存関係のインストールとビルド

npm install
npm run build

ビルドが成功すると、.nextフォルダが生成されます。

4. PM2のインストールと設定

PM2はNode.jsアプリケーションのプロセスマネージャーで、アプリを常時稼働させたり、自動再起動したりするのに便利です。

4.1 PM2のインストール

npm install -g pm2

4.2 PM2でアプリを起動

Next.jsの本番サーバーを起動します。

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

4.3 起動確認

pm2 status

onlineと表示されていれば成功です。

4.4 PM2の自動起動設定

サーバー再起動時にPM2が自動でアプリを起動するように設定します。

pm2 startup systemd
pm2 save

5. Nginxのインストールとリバースプロキシ設定

Nginxをリバースプロキシとして使用し、外部からのリクエストをNext.jsアプリ（デフォルトポート3000）に転送します。

5.1 Nginxのインストール

apt install -y nginx

5.2 サイト設定ファイルの作成

nano /etc/nginx/sites-available/myapp

以下の内容を記述します。example.comは実際のドメインに置き換えてください。

server {
    listen 80;
    server_name example.com www.example.com;
location / {
        proxy_pass http://localhost:3000;
        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;
    }
}

5.3 設定の有効化とテスト

ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/
nginx -t

test is successfulと表示されればOKです。

5.4 Nginxの再起動

systemctl restart nginx

6. SSL証明書の設定（Let's Encrypt）

HTTPSを有効にするため、Let's Encryptから無料のSSL証明書を取得します。

6.1 Certbotのインストール

apt install -y certbot python3-certbot-nginx

6.2 SSL証明書の取得

certbot --nginx -d example.com -d www.example.com

メールアドレスを入力し、利用規約に同意します。自動でNginxの設定が更新され、HTTPSが有効になります。

6.3 自動更新の確認

certbot renew --dry-run

7. 動作確認

ブラウザでhttps://example.comにアクセスし、Next.jsアプリが表示されることを確認します。

8. デプロイの自動化（GitHub Actions）

手動デプロイは手間がかかるため、GitHub Actionsを使って自動化することをおすすめします。

8.1 サーバーにSSHキーを設定

ローカルでSSHキーを生成し、公開鍵をサーバーに追加します。

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
ssh-copy-id <ユーザー名>@<VPSのIP>

8.2 GitHub Secretsの設定

GitHubリポジトリのSettings > Secrets and variables > Actions に以下を追加:

SSH_PRIVATE_KEY: 秘密鍵の内容

SSH_HOST: VPSのIPアドレス

SSH_USER: ユーザー名

8.3 ワークフローファイルの作成

.github/workflows/deploy.ymlを作成:

name: Deploy to VPS
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - name: Deploy to VPS
      uses: appleboy/ssh-action@v0.1.10
      with:
        host: ${{ secrets.SSH_HOST }}
        username: ${{ secrets.SSH_USER }}
        key: ${{ secrets.SSH_PRIVATE_KEY }}
        script: |
          cd /var/www/myapp
          git pull origin main
          npm install
          npm run build
          pm2 restart nextjs-app

これで、mainブランチにプッシュするたびに自動でデプロイされます。

まとめ

この記事では、VPSにNext.jsアプリをデプロイするための手順を解説しました。初期設定からNode.js、PM2、Nginx、SSL証明書の設定、さらにはGitHub Actionsによる自動デプロイまでをカバーしました。

VPSを使うことで、柔軟な環境構築が可能になり、本番運用に適したサーバーを低コストで運用できます。ぜひ試してみてください。

*この記事は実際のVPS環境での構築経験に基づいています。料金・スペックは執筆時点のものであり、最新情報は各事業者の公式サイトでご確認ください。*

参考リンク