Next.js+Express.js+MySQL全栈应用部署方案咨询

一、Next.js脱离localhost的基础配置 #

Next.js本身无需修改主目录，只需确保项目配置和请求路径正确：

• 在package.json中，保留标准构建与启动命令：

  "scripts": {
    "build": "next build",
    "start": "next start -p $PORT"
  }
  

  云平台会自动分配PORT，本地测试可指定固定端口（如3000）。
• 所有API请求避免写死localhost，改用相对路径或环境变量：

  // 推荐写法（同域名部署时用相对路径）
  fetch('/api/data')
  // 跨域名部署时用环境变量
  fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/data`)
  

二、A2 Hosting（cPanel）部署步骤 #

1. 前端部署 #

• 本地执行next build生成.next目录，将.next、package.json、package-lock.json上传至cPanel的域名根目录（如public_html）。
• 打开cPanel终端，运行npm install --production安装生产依赖。
• 通过Node.js应用管理器创建应用：
  • 根目录设为域名根目录，启动命令填npm run start。
  • 分配端口后，cPanel会自动配置反向代理，让域名指向Next.js服务。

2. 后端（Express）部署 #

• 推荐将Express API挂载到Next.js的api路由（同域名部署更简单），示例：

  // pages/api/proxy.js
  import { createProxyMiddleware } from 'http-proxy-middleware';
  export default function handler(req, res) {
    createProxyMiddleware({
      target: process.env.BACKEND_URL,
      changeOrigin: true,
      pathRewrite: { '^/api/proxy': '' },
    })(req, res);
  }
  

• 若单独部署后端，用Node.js应用管理器再创建一个应用，分配独立端口，通过cPanel的反向代理工具让yourdomain.com/api指向后端端口。

3. MySQL数据库配置 #

• 在cPanel的MySQL数据库向导中创建数据库、用户，并给用户分配全权限。
• 用环境变量存储数据库连接信息（cPanel的环境变量工具添加）：

  // backend/db.js
  const mysql = require('mysql2');
  const connection = mysql.createConnection({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
  });
  

4. 自定义域名绑定 #

• 将域名DNS解析指向A2 Hosting的服务器IP。
• 在cPanel的域名工具中添加自定义域名，根目录设为Next.js部署目录。

三、Heroku部署步骤 #

1. 项目基础配置 #

• 根目录创建Procfile，指定启动命令：

  web: npm run start
  

• 在package.json中添加heroku-postbuild命令，自动构建Next.js：

  "scripts": {
    "build": "next build",
    "start": "next start",
    "heroku-postbuild": "npm run build"
  }
  

2. 整合Next.js与Express #

• 将Express服务器与Next.js合并（单应用部署），示例：

  // server.js
  const express = require('express');
  const next = require('next');
  const dev = process.env.NODE_ENV !== 'production';
  const app = next({ dev });
  const handle = app.getRequestHandler();
  
  app.prepare().then(() => {
    const server = express();
    // 自定义Express API路由
    server.get('/api/data', (req, res) => {
      res.json({ message: 'Express backend response' });
    });
    // 处理Next.js页面请求
    server.all('*', (req, res) => handle(req, res));
    server.listen(process.env.PORT || 3000);
  });
  

• 修改package.json启动命令为node server.js，Procfile改为web: node server.js。

3. MySQL数据库配置 #

• 在Heroku市场添加ClearDB MySQL或JawsDB MySQL插件，平台会自动将数据库连接字符串注入环境变量（如CLEARDB_DATABASE_URL）。
• 代码中直接使用环境变量连接数据库：

  const connection = mysql.createConnection(process.env.CLEARDB_DATABASE_URL);
  

4. 自定义域名绑定 #

• 在Heroku应用的设置中添加自定义域名。
• 在域名服务商处设置CNAME记录，指向your-app-name.herokuapp.com。

四、核心注意事项 #

• 敏感信息（数据库密码、密钥）必须用环境变量存储，禁止硬编码。
• 本地先执行npm run build && npm run start测试生产环境构建，排查错误后再部署。
• A2 Hosting需确保Node.js版本与本地开发一致，在cPanel的Node.js应用管理器中选择对应版本。

内容的提问来源于stack exchange，提问作者devos