Xserver VPS に Docker Compose で Next.js をデプロイする手順【スタンドアロン出力】

ssh-keygen -t ed25519 -C "your_email@example.com"
# ~/.ssh/id_ed25519 と id_ed25519.pub が生成される
cat ~/.ssh/id_ed25519.pub
# 表示された公開鍵をコピーしてXserverコンパネに登録する

ssh root@<サーバーのIPアドレス>

adduser deploy
usermod -aG sudo deploy
 
# rootの公開鍵を新しいユーザーにコピー
mkdir -p /home/deploy/.ssh
cp ~/.ssh/authorized_keys /home/deploy/.ssh/
chown -R deploy:deploy /home/deploy/.ssh
chmod 700 /home/deploy/.ssh
chmod 600 /home/deploy/.ssh/authorized_keys

vim /etc/ssh/sshd_config

# rootログインを禁止
PermitRootLogin no
 
# パスワード認証を無効化（公開鍵のみ許可）
PasswordAuthentication no
 
# ポートをデフォルトから変更（任意だが推奨）
Port 2222

systemctl restart sshd

# SSHポートを先に許可してから有効化する
sudo ufw allow 2222/tcp
sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw enable
sudo ufw status

sudo apt-get remove docker docker-engine docker.io containerd runc

sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
 
sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | \
  sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg
 
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] \
  https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
 
sudo apt-get update
sudo apt-get install -y \
  docker-ce \
  docker-ce-cli \
  containerd.io \
  docker-buildx-plugin \
  docker-compose-plugin

sudo usermod -aG docker $USER
newgrp docker

docker --version
# Docker version 26.x.x
 
docker compose version
# Docker Compose version v2.x.x
 
docker run hello-world

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
}
 
module.exports = nextConfig

.next/
├── standalone/
│   ├── server.js          ← node で直接実行するエントリーポイント
│   ├── node_modules/      ← 本番に必要な依存のみ（ツリーシェイク済み）
│   └── .next/
│       └── server/        ← サーバーサイドのコード
├── static/                ← クライアント向け静的ファイル（standalone に含まれない）
└── ...
public/                    ← 画像・フォントなど

# ---- Stage 1: 依存インストール ----
FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json package-lock.json* ./
RUN npm ci
 
# ---- Stage 2: ビルド ----
FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
ENV NEXT_TELEMETRY_DISABLED=1
RUN npm run build
 
# ---- Stage 3: 本番ランナー ----
FROM node:20-alpine AS runner
WORKDIR /app
 
ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED=1
ENV PORT=3000
# HOSTNAME=0.0.0.0 を明示的に設定する（後述）
ENV HOSTNAME=0.0.0.0
 
# スタンドアロン出力をコピー
COPY --from=builder /app/.next/standalone ./
# 静的ファイルを正しい位置にコピー
COPY --from=builder /app/.next/static ./.next/static
# public/ をコピー（OGP画像・フォントなど）
COPY --from=builder /app/public ./public
 
EXPOSE 3000
CMD ["node", "server.js"]

FROM node:20-alpine AS deps
RUN npm install -g pnpm
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile

node_modules
.next
.git
.env*
*.md

myapp/
├── docker-compose.yml
├── Dockerfile
├── .dockerignore
├── nginx/
│   └── default.conf
└── （Next.jsのソースコード）

services:
  nextjs:
    build: .
    container_name: nextjs
    restart: always
    expose:
      - "3000"
    volumes:
      - nextjs_static:/app/.next/static
    environment:
      NODE_ENV: production
 
  nginx:
    image: nginx:alpine
    container_name: nginx
    restart: always
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
      - nextjs_static:/var/www/html/_next/static:ro
    depends_on:
      - nextjs
 
volumes:
  nextjs_static:

server {
    listen 80;
    server_name _;
 
    # /_next/static/ はNginxが直接配信（1年キャッシュ）
    location /_next/static/ {
        alias /var/www/html/_next/static/;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
 
    # それ以外はNext.jsコンテナへプロキシ
    location / {
        proxy_pass http://nextjs:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}

cd ~/myapp
docker compose up -d --build
 
# ログ確認
docker compose logs -f
 
# 動作確認（IPアドレスで確認）
curl http://localhost/

services:
  nextjs:
    build: .
    container_name: nextjs
    restart: always
    expose:
      - "3000"
    volumes:
      - nextjs_static:/app/.next/static
    environment:
      NODE_ENV: production
 
  nginx:
    image: nginx:alpine
    container_name: nginx
    restart: always
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
      - nextjs_static:/var/www/html/_next/static:ro
      - ./certbot/conf:/etc/letsencrypt
      - ./certbot/www:/var/www/certbot
    depends_on:
      - nextjs
 
  certbot:
    image: certbot/certbot
    volumes:
      - ./certbot/conf:/etc/letsencrypt
      - ./certbot/www:/var/www/certbot
 
volumes:
  nextjs_static:

server {
    listen 80;
    server_name example.com www.example.com;
 
    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }
 
    location / {
        return 301 https://$host$request_uri;
    }
}
 
server {
    listen 443 ssl;
    server_name example.com www.example.com;
 
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
 
    location /_next/static/ {
        alias /var/www/html/_next/static/;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
 
    location / {
        proxy_pass http://nextjs:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}

docker compose run --rm certbot certonly \
  --webroot \
  --webroot-path=/var/www/certbot \
  --email your@email.com \
  --agree-tos \
  --no-eff-email \
  -d example.com \
  -d www.example.com
 
# Nginxを再起動して証明書を読み込む
docker compose restart nginx

# crontab -e で以下を追加
0 0 * * 0 cd ~/myapp && docker compose run --rm certbot renew && docker compose restart nginx

cd ~/myapp
 
# 最新コードをpull（GitHubで管理している場合）
git pull origin main
 
# ボリュームを削除してビルドし直す
docker compose down -v
docker compose up -d --build

name: Deploy
 
on:
  push:
    branches: [main]
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to VPS
        uses: appleboy/ssh-action@v1
        with:
          host: ${{ secrets.VPS_HOST }}
          username: deploy
          key: ${{ secrets.VPS_SSH_KEY }}
          port: 2222
          script: |
            cd ~/myapp
            git pull origin main
            docker compose down -v
            docker compose up -d --build

docker compose ps
docker compose logs nextjs

docker compose down -v
docker compose up -d --build

docker compose ps
sudo ss -tlnp | grep :80

newgrp docker
# またはいったんログアウトして再ログイン

docker compose logs --tail=100 nextjs

DOCKER_BUILDKIT=1 docker compose up -d --build

services:
  nextjs:
    build: .
    env_file:
      - .env.production
    environment:
      NODE_ENV: production