【全栈】云服务器安装 MySQL + Next.js 连接完整 Demo

这一段时间负责项目基础建设，遇到了很多问题，发现很多情况都是在环境搭建时留下的坑，于是将公司不影响业务的子项目重建。

整体流程会分两步完成：

阿里云服务器安装配置 MySQL（允许远程连接）
本地 / 服务器创建 Next.js 项目连接 MySQL 并写测试接口

一、阿里云服务器安装 MySQL（CentOS/Ubuntu 通用）

1. 安装 MySQL

bash 复制代码

# Ubuntu/Debian
sudo apt update
sudo apt install mysql-server -y

# CentOS/RHEL
sudo yum install mysql-server -y
sudo systemctl start mysqld

2. 初始化配置（设置密码）

bash 复制代码

# 安全初始化（一路 y，设置 root 密码）
sudo mysql_secure_installation

3. 允许远程连接

关键步骤！！默认 MySQL 只允许本地连接，必须修改配置：

bash 复制代码

# 编辑配置文件
sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf

找到这一行，注释掉或修改为：

bash 复制代码

# bind-address = 127.0.0.1
bind-address = 0.0.0.0

重启 MySQL：

bash 复制代码

sudo systemctl restart mysql

4. 创建远程账号和测试数据库

进入 MySQL 命令行：

bash 复制代码

sudo mysql

执行 SQL：

sql 复制代码

# 创建测试数据库
CREATE DATABASE nextjs_demo;

# 创建远程可访问账号（替换你的密码）
CREATE USER 'nextuser'@'%' IDENTIFIED BY '你的密码（第2步时设置的）';

# 授权
GRANT ALL PRIVILEGES ON nextjs_demo.* TO 'nextuser'@'%';
FLUSH PRIVILEGES;

# 创建测试表
USE nextjs_demo;
CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(50),
  email VARCHAR(50)
);

# 插入测试数据
INSERT INTO users (name, email) VALUES ('测试用户', 'test@demo.com');

exit;

5. 阿里云安全组开放 3306 端口

登录阿里云控制台 → 进入你的服务器实例
【安全组】→ 【配置规则】→ 【添加安全组规则】
协议：TCP，端口：3306，授权对象：0.0.0.0/0

二、Next.js 连接 MySQL Demo

1. 创建 Next.js 项目（如果已有项目直接安装依赖）

bash 复制代码

npx create-next-app@latest mysql-nextjs-demo
cd mysql-nextjs-demo

安装依赖：

bash 复制代码

npm install mysql2

2. 配置环境变量

在项目根目录创建 .env.local：

一定注意！！，服务端环境变量不能以NEXT_PUBLIC_开头。会被打包进前端 JS，绝对不能放敏感信息

bash 复制代码

# 阿里云服务器公网 IP
MYSQL_HOST=你的阿里云公网IP
MYSQL_USER=nextuser
MYSQL_PASSWORD=你设置的密码
MYSQL_DATABASE=nextjs_demo

3. 创建数据库连接工具

新建文件 lib/db.js：

javascript 复制代码

import mysql from 'mysql2/promise';

// 创建连接池（推荐）
const pool = mysql.createPool({
  host: process.env.MYSQL_HOST,
  user: process.env.MYSQL_USER,
  password: process.env.MYSQL_PASSWORD,
  database: process.env.MYSQL_DATABASE,
  waitForConnections: true,
  connectionLimit: 10,
});

export default pool;

4. 创建 Next.js 接口查询 MySQL

新建文件 app/api/users/route.js：

javascript 复制代码

import { NextResponse } from 'next/server';
import pool from '@/lib/db';

// GET /api/users
export async function GET() {
  try {
    // 查询 users 表
    const [rows] = await pool.query('SELECT * FROM users');
    return NextResponse.json({ success: true, data: rows });
  } catch (error) {
    return NextResponse.json(
      { success: false, error: error.message },
      { status: 500 }
    );
  }
}

5. 前端页面展示数据

修改 app/page.js：

javascript 复制代码

'use client';
import { useEffect, useState } from 'react';

export default function Home() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  // 获取数据
  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data.data || []);
        setLoading(false);
      });
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <h1>Next.js + MySQL 连接成功</h1>
      
      {loading ? (
        <p>加载中...</p>
      ) : (
        <div>
          <h3>用户列表：</h3>
          {users.map(user => (
            <div key={user.id} style={{ margin: '10px 0' }}>
              ID: {user.id} | 姓名: {user.name} | 邮箱: {user.email}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

三、运行测试

bash 复制代码

npm run dev

打开 http://localhost:3000

✅ 能看到数据库里的测试用户数据 = 连接成功！

四、常见问题排查

连接超时：检查阿里云安全组 3306 是否开放
访问被拒绝：检查 MySQL 账号密码、授权是否正确
无法解析变量：确保 .env.local 放在项目根目录
服务器防火墙：临时关闭防火墙测试

总结

我使用的阿里云服务器 和 Nextjs.js 15+ 版本。任何厂商的云服务器都是一样的主要看操作系统。