运行和打包说明.md 7.4 KB
Tools Auto Web 项目运行和打包说明
项目概述
这是一个基于 React + Node.js 的工具库管理系统，包含前端界面和后端 API 服务。项目主要功能包括待接入工具列表管理和自动接入任务管理。
项目结构
tools_auto_web/
├── src/ # React 前端源码
├── public/ # 静态资源
├── server/ # Node.js 后端服务
├── package.json # 前端依赖配置
└── README.md # 项目说明
环境要求
- Node.js: 版本 >= 14.0.0
- npm: 版本 >= 6.0.0
- MySQL: 数据库服务
- 操作系统: Windows / macOS / Linux
数据库配置
项目连接的数据库信息：
- 主机: rm-t4na9qj85v7790tf84o.mysql.singapore.rds.aliyuncs.com
- 端口: 3306
- 用户名: crawler_admin
- 密码: cyber#crawler_2023
- 数据库: tools_auto_access
- 字符集: utf8mb4
安装依赖
1. 安装前端依赖
# 在项目根目录下执行
npm install
2. 安装后端依赖
# 进入 server 目录
cd server
npm install
开发环境运行
方式一：分别启动前后端
1. 启动后端服务
# 在 server 目录下
cd server
# 开发模式启动（推荐，支持热重载）
npm run dev
# 或者生产模式启动
npm start
后端服务将在 http://localhost:3001 启动
2. 启动前端服务
# 在项目根目录下
npm start
前端服务将在 http://localhost:3000 启动，并自动打开浏览器
方式二：使用脚本同时启动（如果有配置）
如果项目配置了并发启动脚本，可以：
# 在项目根目录下
npm run dev
生产环境部署
⚠️ 重要说明
本项目是前后端分离架构，需要同时部署前端静态文件和后端API服务。仅上传 build 文件夹无法正常工作，因为前端需要调用后端API接口。
1. 构建前端项目
# 在项目根目录下
yarn build
# 或者
npm run build
构建完成后，会在项目根目录生成 build 文件夹，包含所有静态资源。
2. 服务器部署方案
方案一：单服务器部署（推荐）
步骤 1：准备部署文件
# 需要上传到服务器的文件：
- build/ # 前端构建文件
- server/ # 完整的后端服务目录
步骤 2：部署后端服务
# 在服务器上进入 server 目录
cd server
# 安装生产环境依赖
npm install --production
# 使用 PM2 启动服务（推荐）
npm install -g pm2
pm2 start server.js --name "tools-auto-server"
pm2 save
pm2 startup
# 或者直接启动
npm start
步骤 3：配置 Web 服务器（Nginx 示例）
server {
listen 80;
server_name your-domain.com;
# 前端静态文件
location / {
root /path/to/build;
try_files $uri $uri/ /index.html;
}
# 后端API代理
location /api/ {
proxy_pass http://localhost:3001;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
方案二：分离部署
前端部署
- 将
build文件夹部署到 CDN 或静态托管服务 - 配置环境变量指向后端API地址
后端部署
- 将
server目录部署到云服务器 - 配置 CORS 允许前端域名访问
- 确保数据库连接正常
3. 环境配置
API 地址配置
项目已配置自动环境切换：
- 开发环境:
http://localhost:3001/api - 生产环境:
/api(通过 Nginx 代理)
数据库配置
确保服务器可以访问数据库：
// server/config/database.js
host: 'rm-t4na9qj85v7790tf84o.mysql.singapore.rds.aliyuncs.com'
port: 3306
// ... 其他配置
4. 部署检查清单
- 后端服务正常启动（端口 3001）
- 数据库连接正常
- Nginx 配置正确，API 代理生效
- 前端静态文件部署完成
- 浏览器可以正常访问页面
- API 请求正常响应
5. 常见部署问题
问题 1：API 请求失败
原因: 只部署了前端 build 文件夹，没有启动后端服务
解决: 按照上述步骤部署后端服务
问题 2：CORS 错误
原因: 前后端域名不同，跨域配置问题 解决: 在后端添加 CORS 配置或使用 Nginx 代理
问题 3：数据库连接失败
原因: 服务器无法访问数据库 解决: 检查网络连接和数据库配置
项目配置说明
前端配置 (package.json)
{
"name": "tools-auto-pt",
"version": "0.1.0",
"proxy": "http://localhost:3001",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
后端配置 (server/package.json)
{
"name": "tools-auto-pt-server",
"version": "1.0.0",
"main": "server.js",
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js"
}
}
主要依赖
前端依赖
- React: ^18.2.0 - 前端框架
- Ant Design: ^5.8.0 - UI 组件库
- React Router: ^6.3.0 - 路由管理
- Axios: ^1.4.0 - HTTP 请求库
- Moment.js: ^2.29.4 - 时间处理
- Tailwind CSS: ^3.4.17 - CSS 框架
后端依赖
- Express: ^4.18.2 - Web 框架
- MySQL2: ^3.6.0 - MySQL 数据库驱动
- CORS: ^2.8.5 - 跨域处理
- Body Parser: ^1.20.2 - 请求体解析
- Moment.js: ^2.29.4 - 时间处理
常用命令
开发命令
# 安装依赖
npm install
# 启动开发服务器
npm start
# 启动后端开发服务器（在 server 目录）
npm run dev
# 运行测试
npm test
构建命令
# 构建生产版本
npm run build
# 启动生产服务器（后端）
npm start
端口配置
- 前端开发服务器: http://localhost:3000
- 后端 API 服务器: http://localhost:3001
- 数据库: rm-t4na9qj85v7790tf84o.mysql.singapore.rds.aliyuncs.com:3306
故障排除
常见问题
端口被占用 ```bash
查找占用端口的进程
lsof -i :3000 lsof -i :3001
# 杀死进程 kill -9
2. **依赖安装失败**
```bash
# 清除缓存
npm cache clean --force
# 删除 node_modules 重新安装
rm -rf node_modules
npm install
- 数据库连接失败
- 检查数据库服务是否正常
- 验证数据库连接配置
- 确认网络连接正常
日志查看
- 前端日志：浏览器开发者工具 Console
- 后端日志：终端输出
项目功能
主要功能模块
待接入工具列表管理
- 工具列表展示
- 工具详情查看
- 工具编辑/删除
- 工具搜索功能
自动接入任务管理
- 任务列表管理
- 任务详情查看
- 任务状态跟踪
数据库表结构
tools_info_search_task- 待接入工具主表tools_info_search_task_detail- 待接入工具详情表tools_auto_access_task- 自动接入任务表
注意事项
- 确保数据库服务正常运行
- 前端代理配置指向后端服务地址
- 生产环境需要配置正确的环境变量
- 建议使用 PM2 等进程管理工具部署后端服务
- 前端构建文件需要配置正确的静态资源路径
联系方式
如有问题，请联系项目维护人员。