selenium_keyan/selenium_vue/README.md

# 🎨 Selenium Vue 前端项目

基于 Vue.js 3 + Vite 的现代前端应用，支持 Docker 一键部署。

## ✨ 特性

- 🎨 Vue.js 3 + Vite 现代前端框架
- 🐳 Docker 单镜像部署
- 📱 响应式设计
- 🔄 任务管理系统
- ⚙️ 灵活的 API 配置
- 🚀 Nginx 高性能静态文件服务

## 🚀 快速部署

### 方法一：一键部署（推荐）

```bash
# 默认部署（端口3080，连接本地API）
./build-and-deploy.sh

# 自定义端口部署
./build-and-deploy.sh latest 8080

# 指定后端API地址
./build-and-deploy.sh latest 8091 "https://47.83.141.164:8002"
```

**参数说明：**
- 参数1: 镜像标签（默认: latest）
- 参数2: 前端端口（默认: 3080）
- 参数3: API基础URL（默认: http://localhost:8000/api）

### 方法二：手动部署

# 停止并删除当前容器
docker stop selenium-vue-app
docker rm selenium-vue-app


# 1. 构建镜像（支持自定义API地址）
docker build \
  --build-arg VITE_API_BASE_URL=https://47.83.141.164:8002 \
  -t selenium-vue-app .

# 2. 运行容器
docker run -d \
  --name selenium-vue-app \
  -p 8091:8091 \
  --restart unless-stopped \
  selenium-vue-app

## ⚙️ 配置说明

### 构建时变量（ARG）
- `VITE_API_BASE_URL`: 后端API地址（默认: http://localhost:8000/api）

### 运行时环境变量
- `PORT`: nginx监听端口（默认: 80）
- `NGINX_SERVER_NAME`: nginx server_name（默认: localhost）

### 运行时端口
- 容器内端口: 80（nginx默认端口）
- 宿主机端口: 可自定义（如3080、8080等）

## 📱 访问应用

部署完成后，根据配置的端口访问应用：
- 本地访问: http://localhost:3080
- 服务器访问: http://服务器IP:端口

## 🌐 生产环境部署

### 连接远程API
```bash
# 构建时指定生产API地址
./build-and-deploy.sh prod 80 "https://47.83.141.164:37891"
```

### 使用标准HTTP端口
```bash
# 使用80端口（需要root权限或端口转发）
./build-and-deploy.sh prod 80 "https://47.83.141.164:37891"
```

### Nginx反向代理配置
```nginx
server {
    listen 80;
    server_name yourdomain.com;
    
    location / {
        proxy_pass http://localhost:3080;
        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;
    }
}
```

## 🛠 本地开发

```bash
# 进入前端目录
cd frontend-vite

# 安装依赖
npm install

# 启动开发服务器
npm run dev

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

## 📁 项目结构

```
selenium_vue/
├── frontend-vite/          # Vue.js 前端源码
│   ├── src/
│   │   ├── views/          # 页面组件
│   │   ├── api/            # API 接口
│   │   │   ├── client.js   # API 客户端
│   │   │   └── config.js   # API 配置
│   │   └── router/         # 路由配置
│   ├── public/             # 静态资源
│   ├── dist/               # 构建输出目录
│   └── package.json
├── Dockerfile              # Docker 构建文件
├── build-and-deploy.sh     # 一键部署脚本
└── README.md
```

## 📋 管理命令

```bash
# 查看应用日志
docker logs selenium-vue-app

# 查看实时日志
docker logs -f selenium-vue-app

# 进入容器
docker exec -it selenium-vue-app /bin/sh

# 重启应用
docker restart selenium-vue-app

# 停止应用
docker stop selenium-vue-app

# 删除容器
docker rm selenium-vue-app

# 删除镜像
docker rmi selenium-vue-app
```

## 🔧 故障排除

### 常见问题

1. **端口冲突**
   ```bash
   # 检查端口占用
   lsof -i :3080
   
   # 使用其他端口
   ./build-and-deploy.sh latest 8080
   ```

2. **API连接失败**
   ```bash
   # 检查API地址配置
   docker logs selenium-vue-app
   
   # 重新构建指定API地址
   ./build-and-deploy.sh latest 3080 "https://47.83.141.164:37891"
   ```

3. **构建失败**
   ```bash
   # 清理 Docker 缓存
   docker system prune -a
   
   # 重新构建
   docker build --no-cache -t selenium-vue-app .
   ```

4. **页面404错误**
   - 检查 Vue Router 配置
   - 确认 nginx 配置支持 history 模式

5. **Docker entrypoint 脚本错误**
   - 确保使用最新的 Dockerfile
   - 重新构建镜像以应用修复

## 💡 部署示例

### 开发环境
```bash
./build-and-deploy.sh dev 3080 "http://localhost:8000/api"
```

### 测试环境
```bash
./build-and-deploy.sh test 8080 "https://47.83.141.164:37891"
```

### 生产环境
```bash
./build-and-deploy.sh prod 80 "https://47.83.141.164:37891"
```

## 🚀 项目压缩与传输

### 创建无Mac隐藏文件的压缩包
```bash
cd "/Users/natalie/Documents/聚流沙项目代码"
COPYFILE_DISABLE=1 tar --exclude='*.DS_Store' --exclude='*._*' --exclude='*.Spotlight-V100' --exclude='*.Trashes' --exclude='*__MACOSX*' --exclude='*.fseventsd' --exclude='*.DocumentRevisions-V100' --exclude='*.TemporaryItems' -czf selenium_vue_project.tar.gz selenium_vue/
```

### 服务器部署步骤

1. **上传代码到服务器**
   ```bash
   scp selenium_vue_project.tar.gz user@server:/opt/
   ```

2. **解压并部署**
   ```bash
   tar -xzf selenium_vue_project.tar.gz
   cd selenium_vue
   chmod +x build-and-deploy.sh
   ./build-and-deploy.sh
   ```

3. **配置防火墙**
   ```bash
   # Ubuntu/Debian
   sudo ufw allow 3080/tcp
   
   # CentOS/RHEL
   sudo firewall-cmd --permanent --add-port=3080/tcp
   sudo firewall-cmd --reload
   ```

## 🔄 更新日志

### v1.1 (最新)
- 修复了Docker entrypoint脚本的引号转义问题
- 添加了settings导出修复，解决构建错误
- 完善了项目压缩方法，避免Mac隐藏文件
- 简化了Dockerfile文件名为标准的 `Dockerfile`

### v1.0
- 初始版本发布
- 支持Docker一键部署
- Vue.js 3 + Vite 前端框架

## 📄 许可证

[MIT License](LICENSE)