本项目已从 CRA 迁移到 Vite,移除 react-snap 并改为基于 puppeteer-core 的预渲染方案,同时对后端 Express 做了安全加固(Helmet、CORS 白名单、限流、参数污染防护、请求体大小限制、管理员令牌)。
- Node.js ≥ 18
- 推荐 Chrome/Edge 本地浏览器(用于预渲染),也可通过环境变量手动指定可执行文件路径
npm install如遇安装缓慢,可切换国内源:
npm config set registry https://registry.npmmirror.com在项目根目录创建 .env(不会提交到仓库):
# 后端(server.js)
ADMIN_TOKEN=please-change-me
ALLOWED_ORIGINS=http://localhost:3002
PORT=3001
# 前端(Vite)
VITE_API_URL=http://localhost:3001/api
说明:
- 管理员接口需要请求头
X-Admin-Token: <ADMIN_TOKEN>。 ALLOWED_ORIGINS为后端允许的跨域来源(逗号分隔)。- 前端优先读取
VITE_API_URL,兼容老的REACT_APP_API_URL。
同时启动后端与前端(默认端口:后端 3001,前端 3002):
# 一键启动(并发)
npm run dev
# 或分别启动
npm run server # 启动后端 http://localhost:3001
npm run dev:vite # 启动前端 http://localhost:3002仅构建(不预渲染):
npm run build构建并预渲染以下路由:/、/ai-marketing、/ai-live、/ai-call、/partnership、/contact
# 如未自动找到浏览器,可先设置本机 Chrome/Edge 路径
$env:PUPPETEER_EXECUTABLE_PATH="C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe"
npm run build:prerender预览生产构建:
npm run preview
# 输出示例:Local: http://localhost:3002构建产物位于 dist/,包含已预渲染的静态 HTML:
dist/index.htmldist/ai-marketing/index.htmldist/ai-live/index.htmldist/ai-call/index.htmldist/partnership/index.htmldist/contact/index.html
GET /api/health健康检查GET /api/partner-applications获取申请记录POST /api/partner-applications提交新申请(校验手机号与字段长度)PUT /api/partner-applications/:id更新申请状态(需要X-Admin-Token)DELETE /api/partner-applications/:id删除申请(需要X-Admin-Token)
数据文件:partner-applications.json
安全加固:Helmet 安全头、CORS 白名单、HPP 参数污染防护、请求体大小限制(64kb)、基础限流(每 15 分钟 200 次)。
- 前端静态资源:发布
dist/到任意静态站点(Nginx / CDN)。 - 后端服务:保留
server.js监听 3001,供前端VITE_API_URL调用。 - 如需反代:前端与后端域名统一后,设置反向代理到 3001,并在前端将
VITE_API_URL指向同源/api。
- 预览打不开(如
http://localhost:3002拒绝连接):请先执行npm run preview,确保终端输出Local: http://localhost:3002/,并检查端口占用与防火墙。 - 预渲染报错:设置
PUPPETEER_EXECUTABLE_PATH指向本机浏览器可执行文件后重试。