Next.js+Prisma+MySQL部署至Vercel/CPanel及远程数据库连接问题

1. 开启 Namecheap MySQL 远程访问权限 #

• 登录 Namecheap 主机 CPanel，找到「MySQL Databases」工具
• 进入「Remote MySQL」选项，在「Host」输入框中添加 Vercel 官方出站 IP 段，或临时输入 % 允许所有远程连接（生产环境务必设置强密码并限制特定 IP）
• 点击「Add Host」完成配置

2. 获取远程 MySQL 连接信息 #

在 CPanel「MySQL Databases」中提取以下信息：

• 主机名：非 localhost，是 Namecheap 提供的远程数据库地址（通常格式为 xxx.namecheaphosting.com）
• 端口：默认 3306，以 CPanel 显示为准
• 数据库名、用户名、密码：你创建的数据库凭据

3. 配置 Vercel 环境变量 #

• 登录 Vercel 控制台进入你的 Next.js 项目
• 进入「Settings」→「Environment Variables」，添加变量 DATABASE_URL，值为：

  mysql://[用户名]:[密码]@[主机名]:[端口]/[数据库名]
  

  替换方括号内的实际信息，密码含特殊字符需做 URL 编码

4. 调整 Prisma 配置与部署脚本 #

• 确保 prisma/schema.prisma 数据源使用环境变量：

  datasource db {
    provider = "mysql"
    url      = env("DATABASE_URL")
    pool_size = 5 // 适配共享主机连接数限制
  }
  

• 在 package.json 中添加构建后迁移脚本：

  "scripts": {
    "build": "next build",
    "postbuild": "prisma migrate deploy"
  }
  

• 若 Vercel 未自动执行 postbuild，在「Settings」→「Build & Development Settings」修改构建命令为：

  npm run build && npx prisma migrate deploy
  

5. 重新部署 #

提交代码到关联 Git 仓库触发 Vercel 自动部署，即可解决 Can't reach database server at localhost:3306 错误

方式一：静态导出（仅适用于无 SSR/API 路由的应用） #

1. 修改 next.config.js 启用静态导出：

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

2. 本地执行 npm run build，生成 out 文件夹
3. 通过 CPanel「文件管理器」或 FTP，将 out 内所有文件上传到 public_html 目录
4. 创建 .env 文件写入数据库连接（同服务器用 localhost）：

   DATABASE_URL="mysql://[用户名]:[密码]@localhost:3306/[数据库名]"
   

5. 进入 CPanel「终端」执行数据库迁移：npx prisma migrate deploy

方式二：支持 SSR/API 路由（使用 CPanel Node.js 管理器） #

1. 上传项目源码到 CPanel 指定目录（如 public_html/next-app）
2. 进入 CPanel「Node.js 应用管理器」点击「创建应用」：
   • 选择域名和应用根目录
   • 设置启动命令为 npm run start 或 npx next start -p $PORT
   • 点击「创建」
3. 在「变量」选项添加 DATABASE_URL，值为：

   mysql://[用户名]:[密码]@localhost:3306/[数据库名]
   

4. 点击「运行 NPM 安装」或终端执行 npm install 安装依赖
5. 终端执行数据库迁移：npx prisma migrate deploy
6. 点击「启动」应用，CPanel 会自动配置反向代理映射域名

内容的提问来源于stack exchange，提问作者JAD I.