Hướng dẫn Deploy Next.js lên VPS Ubuntu từ A-Z với PM2, Nginx và SSL miễn phí

# 1. Cập nhật danh sách gói và nâng cấp hệ thống
sudo apt update && sudo apt upgrade -y

# 2. Cài đặt các công cụ cơ bản cần thiết
sudo apt install -y curl wget git ufw htop build-essential

# 1. Tải và cài đặt NVM (phiên bản mới nhất)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# 2. Tải lại cấu hình shell terminal để nhận lệnh nvm
source ~/.bashrc
# (Hoặc source ~/.zshrc nếu bạn dùng Zsh)

# 3. Kiểm tra NVM đã cài thành công chưa
nvm -v # Vd: 0.40.1

# 4. Cài đặt phiên bản Node.js LTS mới nhất (Node 22 hoặc 20)
nvm install --lts

# 5. Đặt phiên bản LTS làm mặc định
nvm use --lts
nvm alias default 'lts/*'

# 6. Kiểm tra phiên bản Node và npm
node -v # Vd: v22.14.0
npm -v  # Vd: 10.9.2

# 7. Cài đặt pnpm và PM2 toàn cục (không cần sudo khi dùng NVM)
npm install -g pnpm pm2

# 8. Kiểm tra pnpm và pm2
pnpm -v
pm2 -v

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // Bật chế độ standalone để tối ưu build size khi self-host
  output: "standalone",

  // Tùy chọn tối ưu ảnh
  images: {
    unoptimized: false, // Sử dụng Sharp để tối ưu ảnh trên VPS
  },
};

export default nextConfig;

# Tạo thư mục chứa app và phân quyền
sudo mkdir -p /var/www/my-next-app
sudo chown -R $USER:$USER /var/www/my-next-app

# Di chuyển vào thư mục
cd /var/www/my-next-app

# Clone repository của bạn
git clone https://github.com/your-username/your-repo.git .

# Tạo file biến môi trường production
cp .env.example .env.production
nano .env.production # Điền các biến môi trường thực tế (DATABASE_URL, API_KEYS, v.v.)

# Cài đặt dependencies và Build
pnpm install --frozen-lockfile
pnpm build

module.exports = {
  apps: [
    {
      name: "next-app",
      // Nếu dùng standalone mode:
      script: ".next/standalone/server.js",
      // Nếu dùng chế độ build thông thường:
      // script: "node_modules/next/dist/bin/next",
      // args: "start -p 3000",
      
      instances: "max", // Chạy tối đa theo số core CPU (hoặc số cụ thể: 2)
      exec_mode: "cluster", // Chạy dạng cluster để phân tải
      watch: false,
      max_memory_restart: "500M", // Tự restart nếu rò rỉ bộ nhớ vượt 500MB
      env: {
        NODE_ENV: "production",
        PORT: 3000,
      },
      // Cấu hình log
      error_file: "./logs/pm2-err.log",
      out_file: "./logs/pm2-out.log",
      merge_logs: true,
      time: true,
    },
  ],
};

# Sao chép static files vào thư mục standalone (chỉ cần làm nếu dùng standalone)
cp -r public .next/standalone/
cp -r .next/static .next/standalone/.next/

# Khởi chạy ứng dụng qua PM2
pm2 start ecosystem.config.js

# Kiểm tra trạng thái tiến trình
pm2 status

# Lưu lại danh sách tiến trình đang chạy
pm2 save

# Thiết lập PM2 tự khởi động cùng hệ điều hành Ubuntu
pm2 startup
# (Chạy dòng lệnh mà PM2 vừa in ra màn hình để hoàn tất cấu hình startup)

# Upstream trỏ về cổng Next.js đang lắng nghe
upstream nextjs_upstream {
    server 127.0.0.1:3000;
    keepalive 64;
}

server {
    listen 80;
    listen [::]:80;
    server_name your-domain.com www.your-domain.com;

    # Giới hạn dung lượng upload file (mặc định Nginx là 1MB)
    client_max_body_size 20M;

    # Gzip Compression tối ưu tốc độ tải trang
    gzip on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types text/plain text/css text/xml application/json application/javascript application/rss+xml font/truetype font/opentype application/vnd.ms-fontobject image/svg+xml;

    # Cache static assets từ Next.js (_next/static)
    location /_next/static {
        proxy_pass http://nextjs_upstream;
        proxy_set_header Host $host;
        expires 365d;
        access_log off;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # Cache các file tĩnh trong public (ảnh, fonts, favicon)
    location ~* .(ico|jpg|jpeg|png|gif|svg|webp|avif|woff|woff2|ttf|eot)$ {
        proxy_pass http://nextjs_upstream;
        proxy_set_header Host $host;
        expires 30d;
        access_log off;
        add_header Cache-Control "public, max-age=2592000";
    }

    # Chuyển tiếp tất cả request còn lại về Next.js
    location / {
        proxy_pass http://nextjs_upstream;
        proxy_http_version 1.1;
        
        # Hỗ trợ WebSockets & SSE Streaming (cần thiết cho React 19 / AI streaming)
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        
        # Chuyển tiếp thông tin client IP thực tế
        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;
        
        # Timeout cho các tác vụ xử lý lâu
        proxy_read_timeout 60s;
        proxy_connect_timeout 60s;
    }
}

# 1. Tạo symbolic link kích hoạt site
sudo ln -s /etc/nginx/sites-available/your-domain.com /etc/nginx/sites-enabled/

# 2. Xóa cấu hình mặc định default nếu không dùng
sudo rm -f /etc/nginx/sites-enabled/default

# 3. Kiểm tra tính hợp lệ của cấu hình Nginx
sudo nginx -t
# Nếu hiển thị: "nginx: configuration file /etc/nginx/nginx.conf test is successful" -> Hợp lệ!

# 4. Reload Nginx
sudo systemctl reload nginx

# Cài đặt Certbot qua apt
sudo apt install -y certbot python3-certbot-nginx

# Yêu cầu cấp chứng chỉ SSL và tự động cấu hình file Nginx
sudo certbot --nginx -d your-domain.com -d www.your-domain.com

# Quá trình này sẽ yêu cầu bạn nhập Email và chọn tự động Redirect HTTP -> HTTPS.
# Hãy chọn Yes để toàn bộ truy cập đều được mã hóa an toàn.

# Kiểm tra tính năng tự động gia hạn chứng chỉ (Auto-Renewal)
sudo certbot renew --dry-run

# Cho phép kết nối SSH (BẮT BUỘC, nếu không bạn sẽ bị mất quyền truy cập VPS!)
sudo ufw allow OpenSSH

# Cho phép traffic Web HTTP và HTTPS
sudo ufw allow 'Nginx Full'

# Kích hoạt tường lửa
sudo ufw enable

# Kiểm tra trạng thái
sudo ufw status

#!/bin/bash
set -e

echo "🚀 Bắt đầu quá trình Deploy Next.js..."

# 1. Kéo mã nguồn mới nhất từ nhánh main
echo "📥 Đang tải code mới từ Git..."
git pull origin main

# 2. Cài đặt các thư viện mới nếu có
echo "📦 Đang cài đặt dependencies..."
pnpm install --frozen-lockfile

# 3. Build lại ứng dụng Next.js
echo "🏗️ Đang build Next.js Production..."
pnpm build

# 4. Đồng bộ static assets cho standalone mode (nếu có)
if [ -d ".next/standalone" ]; then
  echo "📂 Sao chép static files vào standalone directory..."
  cp -r public .next/standalone/
  cp -r .next/static .next/standalone/.next/
fi

# 5. Reload PM2 không gián đoạn (Zero-Downtime Reload)
echo "♻️ Khởi động lại PM2 instances..."
pm2 reload next-app --update-env

echo "✅ Deploy thành công rực rỡ!"