资讯详情

整体链路先看懂

用户浏览器 → Nginx
├─静态资源 → 前端React打包文件
└─/api/* → 反向代理 → Node后端服务 → MySQL数据库

一、整套后台必须具备的核心模块（缺一不可）

1. 后端服务程序（API服务）

作用：接收前端请求，执行业务逻辑，读写数据库，返回JSON数据

技术选型（推荐）

Node.js + Express / NestJS

• Express：轻量、上手快，中小型项目首选
• NestJS：TypeScript、架构规范，适合长期维护、团队项目

能干的事情：

1. 登录注册、密码加密、Token签发（JWT）
2. 接收前端提交的数据，校验参数
3. 操作数据库：增删改查
4. 文件上传、接口权限控制
5. 调用第三方接口（短信、OSS、AI接口等）

前端不能直连数据库！所有数据库操作必须经过后端API（安全红线）

2. 数据库

作用：持久化存储所有业务数据，断电数据不丢失

主流选型

✅ MySQL 8.0
适合：用户信息、订单、表单、后台管理系统、绝大多数Web项目

其他参考：

• PostgreSQL：复杂查询、追求严格数据规范可选
• MongoDB：大量不规则、动态结构数据（内容、评论）

数据库里面一般存什么？

• 用户表：账号、密码（加密！不存明文）、昵称、角色、权限
• 业务数据表：比如商品、文章、任务、订单
• 配置表、上传文件记录

配套关键知识点

后端通过 ORM框架 操作数据库，不用手写大量SQL
Node生态：

• Prisma（强烈推荐，TypeScript友好）
• Sequelize

3. 身份认证 & 权限体系（几乎所有项目必备）

解决：谁能登录、哪些页面/接口可以访问
标准方案：JWT Token
流程：

1. 用户登录 → 后端校验账号密码 → 返回token
2. 前端后续每个请求请求头带上token
3. 后端中间件校验token是否有效

进阶：RBAC角色权限（管理员/普通用户）

4. 文件存储（只要有图片/上传功能就需要）

两种方案：

1. 本地服务器存储（小型项目）
   上传图片保存服务器文件夹，Nginx提供图片访问地址
   ⚠️缺点：服务器重装、扩容很难迁移文件
2. 对象存储OSS（正式项目）
   阿里云OSS、腾讯COS，图片独立存放，稳定

5. Nginx 网关（部署必备）

职责：

1. 托管前端静态页面（React打包dist）
2. 反向代理 /api 请求转发到Node后端
3. 配置HTTPS域名证书
4. 限流、屏蔽恶意请求

6. 服务器运行环境

Linux Ubuntu（你正在学）
Docker（容器打包前后端、数据库，方便部署、迁移）

二、可选增强组件（项目做大之后再加，新手初期不用）

1. Redis（非常常用）

作用：内存缓存
场景：

• 缓存高频查询数据，减轻MySQL压力
• 存放登录验证码
• 限流、分布式会话

2. 定时任务

需求：自动执行任务（定时清理数据、定时推送消息）
Node：node-schedule / bull

3. 消息队列 RabbitMQ / BullMQ

大型项目：异步处理耗时任务（邮件推送、文件解析）
小项目不需要

4. 向量数据库

如果你后续接入AI、Agent、RAG功能才需要（Pinecone、Chroma）

5. 日志系统

基础简易方案：后端输出日志文件 xxx.log
大型：ELK

6. CI/CD自动化部署

代码提交Github → 自动打包前端、更新后端服务，不用手动上传文件

三、最简【从零搭建顺序】实操路线（照着做就能搭建完整项目）

适合你个人全栈项目实践

1. 设计数据库表结构（使用Prisma设计）
2. 创建Node后端项目（Express/Nest + Prisma + MySQL）
3. 开发基础接口：登录、CRUD业务接口、增加JWT鉴权中间件
4. 本地前后端联调：前端axios请求后端API
5. 全部本地调试通
6. 服务器安装Docker / 或者裸机部署
7. 服务器部署MySQL
8. 上传后端代码，启动Node服务
9. React前端执行npm run build打包dist
10. 配置Nginx：托管dist + 代理/api到Node
11. 域名配置HTTPS证书
12. 增加文件上传功能

四、一套完整项目结构图（直观看懂）

客户端（React + shadcn/ui）↓ HTTP请求Nginx网关
┌────────┴────────┐
前端静态资源      Node.js API后端↓Prisma ORM↓MySQL数据库

详解

1. Nginx（最难理解，重点讲）

类比

你的服务器是一栋商铺。

• 后端Node服务 = 店里干活的员工（处理业务、读写数据库）
• Nginx = 前台接待保安

作用

1. 用户（访客）不能直接冲进房间找员工(Node)，全部先经过前台Nginx
2. 如果访客只是想看网页静态页面（html/js/css/图片），前台自己直接交付，不用打扰员工
3. 如果访客要提交数据、调用接口（带/api），前台把请求转给后端员工处理

对应技术场景

• React打包出来dist静态文件，交给Nginx直接托管
• 前端请求 /api/getUser
  Nginx识别这是接口，自动转发给运行在 localhost:3000 的Node服务

如果没有Nginx会发生什么？

方案A：Node直接监听80端口对外提供页面和接口
缺点：
Node擅长业务逻辑，不擅长分发静态资源、抗高并发；
无法简单配置HTTPS（https安全域名）；无法做访问限制。

最简架构简图

用户浏览器↓Nginx
┌───┴───┐
静态页面dist   转发/api → Node后端 → MySQL

2. 身份认证 JWT（登录权限）

类比

商场会员卡。

1. 你输入账号密码登录（前台核验身份）
2. 后端核对数据库账号正确 → 发给你一张会员卡(JWT令牌)
3. 之后你想去VIP房间（后台页面、敏感接口），每次出示会员卡
4. 后端检查卡片有效，才允许访问

真实业务流程

前端登录成功，存储token；
每次请求接口请求头带上token；
后端中间件统一校验：有没有登录、是什么角色（管理员/普通用户）。

没有鉴权会怎样？

任何人可以随意调用所有接口。
比如删除数据、查询全部用户信息，完全没有门槛，系统裸奔。

小提醒：JWT不是数据库，令牌存在前端浏览器localStorage/cookie，数据库只存账号密码。

3. 文件存储（图片、附件上传）

场景：头像、表单图片、截图上传

两种模式

① 服务器本地存储（小型个人项目）

用户上传图片 → Node接收文件，保存到服务器某个文件夹
Nginx对外提供图片访问地址。

缺点：服务器重装、迁移机器，图片容易丢失。

② 云OSS存储（阿里云/腾讯云对象存储）

类比：专门租一个云相册放图片，和你的业务服务器分开。
业务服务器只管上传指令，图片独立存放。

误区

❌ 绝对不要把图片文件存入MySQL数据库
数据库适合存放文字、数字；存图片会极度臃肿、查询巨慢。
数据库只保存图片URL地址字符串。

4. Redis（【可选！小项目可以不用】）

类比

备忘录/临时便签。
MySQL是档案柜，永久存放正式数据，翻档案很慢；
Redis是桌面便签，读写速度极快，存放临时、高频访问数据。

常用场景

1. 首页频繁查询的数据（商品列表、配置信息）
   查询一次MySQL，结果放到Redis缓存；后面请求直接读Redis，减少数据库压力
2. 验证码、临时登录信息、限流限制

重点：

个人小型管理系统，可以先不上Redis！
只有数据库压力大、需要缓存的时候再引入，不属于基础设施刚需。

5. Docker（运行环境工具，不是业务功能）

类比：标准化行李箱。

你的项目需要：Node环境、MySQL、Nginx。
裸机部署：服务器环境五花八门，A机器能跑，B机器各种版本冲突。

Docker把「程序+依赖环境」打包成一个独立箱子。
任何Ubuntu服务器，装上Docker，箱子直接启动，环境不会乱。

Docker Compose：一次性同时启动 Nginx + Node后端 + MySQL 整套服务。

作用：简化部署，和业务逻辑无关，属于运维工具。
业务最小运行可以不用Docker，直接在服务器apt安装软件运行。

6. CI/CD（自动化部署工具，后期优化）

原始部署方式：
本地写完代码 → 手动打包 → 上传服务器 → 重启服务，人工操作很麻烦。

CI/CD：
代码提交到Github后，自动执行：
拉取代码 → 打包前端 → 同步到服务器 → 重启后端服务。
属于提效工具，新项目初期不需要搭建。

整理区分：【刚需必须有】VS【后期可选】

✅ 搭建一套可用系统，最低刚需组件（缺一不可）

1. React 前端
2. Node API后端（业务逻辑、参数校验）
3. MySQL（持久存储数据）
4. Nginx（网关、托管前端、反向代理接口）
5. JWT权限登录体系（除非系统完全不需要登录）

⚠️ 业务做大之后，按需新增（初期可以不装）

1. Redis 缓存
2. OSS 对象存储（图片多的时候使用）
3. Docker（方便环境统一、迁移）
4. CI/CD自动部署
5. 定时任务、消息队列、日志系统

一条完整真实请求链路复盘（从头到尾串起来）

1. 用户浏览器打开网页，请求 shturl.cc/yARgt
2. 请求到达服务器Nginx，Nginx直接返回React打包的index.html
3. 页面加载完成，用户输入账号密码点击登录
4. 前端发送POST请求 shturl.cc/yARgt/api/login
5. Nginx识别地址带/api，转发请求给本地Node后端
6. Node后端接收账号密码，去MySQL查询用户
7. 账号密码匹配成功，后端生成JWT令牌返回前端
8. 前端保存token；后续访问后台页面，每次请求携带token
9. Node中间件校验token合法，执行业务CRUD，读写数据库，返回数据