Next.js 部署教程 2026：从 Vercel 迁移到自有 VPS

为什么你要迁移到自有 VPS？

Vercel 确实方便，但用久了你会发现这些问题：

我的情况：在 RackNerd 黑五买了台 VPS，$10/年，部署 Next.js 真香。

前置条件

• 一台 VPS（Ubuntu 20.04+ 或 Debian 11+）
• 域名（可选，但推荐）
• 本地 Node.js 环境
• SSH 客户端

步骤 1：连接 VPS 并更新系统

# SSH 登录
ssh root@your-server-ip

# 更新软件包列表
sudo apt update && sudo apt upgrade -y

# 安装必要工具
sudo apt install -y curl git wget build-essential

步骤 2：安装 Node.js 和 npm

# 使用 NodeSource 安装 LTS 版本
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

# 验证安装
node -v  # 应该显示 v20.x.x
npm -v   # 应该显示 10.x.x

步骤 3：安装 PM2 进程管理器

# 全局安装 PM2
sudo npm install -g pm2

# 设置开机自启
pm2 startup
# 按提示运行最后一行命令

# 验证
pm2 -v

步骤 4：克隆并构建 Next.js 项目

# 创建应用目录
mkdir -p /var/www/my-app
cd /var/www/my-app

# 克隆你的项目（或创建新的）
git clone https://github.com/your-username/your-repo.git .

# 或者创建示例项目
npx create-next-app@latest . --typescript --tailwind --app

# 安装依赖
npm install

# 构建项目
npm run build

步骤 5：配置 PM2 运行 Next.js

# 创建 ecosystem.config.js
cat > ecosystem.config.js << EOF
module.exports = {
  apps: [{
    name: 'my-app',
    script: 'npm',
    args: 'start',
    env: {
      NODE_ENV: 'production',
      PORT: 3000
    }
  }]
}
EOF

# 启动应用
pm2 start ecosystem.config.js

# 查看状态
pm2 status

# 保存 PM2 配置
pm2 save

现在访问 http://your-server-ip:3000 应该能看到应用。

步骤 6：安装并配置 Nginx

# 安装 Nginx
sudo apt install -y nginx

# 创建站点配置
sudo nano /etc/nginx/sites-available/my-app

配置文件内容：

server {
    listen 80;
    server_name your-domain.com www.your-domain.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_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;
    }

    # 静态资源缓存
    location /_next/static {
        proxy_pass http://localhost:3000;
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

启用站点：

# 创建软链接
sudo ln -s /etc/nginx/sites-available/my-app /etc/nginx/sites-enabled/

# 删除默认站点（可选）
sudo rm /etc/nginx/sites-enabled/default

# 测试配置
sudo nginx -t

# 重启 Nginx
sudo systemctl restart nginx

步骤 7：配置 SSL 证书（免费）

# 安装 Certbot
sudo apt install -y certbot python3-certbot-nginx

# 获取证书
sudo certbot --nginx -d your-domain.com -d www.your-domain.com

# 按提示输入邮箱，同意条款

Certbot 会自动：

• 验证域名所有权
• 下载 SSL 证书
• 修改 Nginx 配置
• 设置自动续期

验证自动续期：

sudo certbot renew --dry-run

步骤 8：配置防火墙

# 安装 UFW（如果没装）
sudo apt install -y ufw

# 允许 SSH
sudo ufw allow OpenSSH

# 允许 HTTP/HTTPS
sudo ufw allow 'Nginx Full'

# 启用防火墙
sudo ufw enable

# 查看状态
sudo ufw status

步骤 9：设置 GitHub Actions 自动部署（可选）

创建 .github/workflows/deploy.yml：

name: Deploy to VPS

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Deploy to VPS
        uses: easingthemes/ssh-deploy@v4
        with:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          REMOTE_HOST: ${{ secrets.VPS_HOST }}
          REMOTE_USER: root
          TARGET: /var/www/my-app
          EXCLUDE: "/node_modules/,/.git/"
          SCRIPT_AFTER: |
            cd /var/www/my-app
            npm install
            npm run build
            pm2 restart my-app

常见问题 FAQ

Q1: 502 Bad Gateway 怎么办？

检查 PM2 是否运行：

pm2 status
pm2 logs my-app

Q2: 如何更新代码？

cd /var/www/my-app
git pull
npm install
npm run build
pm2 restart my-app

Q3: 数据库连接配置？

在 .env 文件中配置：

DATABASE_URL=postgresql://user:pass@localhost:5432/dbname

Q4: 如何查看日志？

pm2 logs my-app
# 或实时查看
pm2 logs my-app --lines 100

Q5: 内存不够怎么办？

添加 swap：

sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

性能优化建议

总结

恭喜！你现在拥有：

✅ 完全控制的 Next.js 服务器 ✅ 免费 SSL 证书 ✅ 自动重启（PM2） ✅ 域名访问 ✅ 自动部署（可选）

成本对比：

• Vercel Pro: $20/月
• 自有 VPS: $5-10/月
• 年省: $120-180

💼 需要帮助部署？

我提供专业部署服务：

📧 联系：[email protected]

相关阅读

• Cloudflare Workers 免费部署完整指南
• Debian 12 新手入门教程
• Nginx 反向代理配置详解