# 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. 安装前端依赖

```bash
# 在项目根目录下执行
npm install
```

### 2. 安装后端依赖

```bash
# 进入 server 目录
cd server
npm install
```

## 开发环境运行

### 方式一：分别启动前后端

#### 1. 启动后端服务

```bash
# 在 server 目录下
cd server

# 开发模式启动（推荐，支持热重载）
npm run dev

# 或者生产模式启动
npm start
```

后端服务将在 `http://localhost:3001` 启动

#### 2. 启动前端服务

```bash
# 在项目根目录下
npm start
```

前端服务将在 `http://localhost:3000` 启动，并自动打开浏览器

### 方式二：使用脚本同时启动（如果有配置）

如果项目配置了并发启动脚本，可以：

```bash
# 在项目根目录下
npm run dev
```

## 生产环境部署

### ⚠️ 重要说明

本项目是**前后端分离**架构，需要同时部署前端静态文件和后端API服务。仅上传 `build` 文件夹无法正常工作，因为前端需要调用后端API接口。

### 1. 构建前端项目

```bash
# 在项目根目录下
yarn build
# 或者
npm run build
```

构建完成后，会在项目根目录生成 `build` 文件夹，包含所有静态资源。

### 2. 服务器部署方案

#### 方案一：单服务器部署（推荐）

**步骤 1：准备部署文件**
```bash
# 需要上传到服务器的文件：
- build/          # 前端构建文件
- server/         # 完整的后端服务目录
```

**步骤 2：部署后端服务**
```bash
# 在服务器上进入 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 示例）**
```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 代理)

#### 数据库配置
确保服务器可以访问数据库：
```javascript
// 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)

```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)

```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 - 时间处理

## 常用命令

### 开发命令

```bash
# 安装依赖
npm install

# 启动开发服务器
npm start

# 启动后端开发服务器（在 server 目录）
npm run dev

# 运行测试
npm test
```

### 构建命令

```bash
# 构建生产版本
npm run build

# 启动生产服务器（后端）
npm start
```

## 端口配置

- **前端开发服务器**: http://localhost:3000
- **后端 API 服务器**: http://localhost:3001
- **数据库**: rm-t4na9qj85v7790tf84o.mysql.singapore.rds.aliyuncs.com:3306

## 故障排除

### 常见问题

1. **端口被占用**
   ```bash
   # 查找占用端口的进程
   lsof -i :3000
   lsof -i :3001
   
   # 杀死进程
   kill -9 <PID>
   ```

2. **依赖安装失败**
   ```bash
   # 清除缓存
   npm cache clean --force
   
   # 删除 node_modules 重新安装
   rm -rf node_modules
   npm install
   ```

3. **数据库连接失败**
   - 检查数据库服务是否正常
   - 验证数据库连接配置
   - 确认网络连接正常

### 日志查看

- 前端日志：浏览器开发者工具 Console
- 后端日志：终端输出

## 项目功能

### 主要功能模块

1. **待接入工具列表管理**
   - 工具列表展示
   - 工具详情查看
   - 工具编辑/删除
   - 工具搜索功能

2. **自动接入任务管理**
   - 任务列表管理
   - 任务详情查看
   - 任务状态跟踪

### 数据库表结构

- `tools_info_search_task` - 待接入工具主表
- `tools_info_search_task_detail` - 待接入工具详情表
- `tools_auto_access_task` - 自动接入任务表

## 注意事项

1. 确保数据库服务正常运行
2. 前端代理配置指向后端服务地址
3. 生产环境需要配置正确的环境变量
4. 建议使用 PM2 等进程管理工具部署后端服务
5. 前端构建文件需要配置正确的静态资源路径

## 联系方式

如有问题，请联系项目维护人员。