5.8 KiB

Executable File

Raw Permalink Blame History

🎨 Selenium Vue 前端项目

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

✨ 特性

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

🚀 快速部署

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

# 默认部署（端口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

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

使用标准HTTP端口

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

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;
    }
}

🛠 本地开发

# 进入前端目录
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

📋 管理命令

# 查看应用日志
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

🔧 故障排除

常见问题

端口冲突

# 检查端口占用
lsof -i :3080

# 使用其他端口
./build-and-deploy.sh latest 8080

API连接失败

# 检查API地址配置
docker logs selenium-vue-app

# 重新构建指定API地址
./build-and-deploy.sh latest 3080 "https://47.83.141.164:37891"

构建失败

# 清理 Docker 缓存
docker system prune -a

# 重新构建
docker build --no-cache -t selenium-vue-app .

页面404错误
- 检查 Vue Router 配置
- 确认 nginx 配置支持 history 模式
Docker entrypoint 脚本错误
- 确保使用最新的 Dockerfile
- 重新构建镜像以应用修复

💡 部署示例

开发环境

./build-and-deploy.sh dev 3080 "http://localhost:8000/api"

测试环境

./build-and-deploy.sh test 8080 "https://47.83.141.164:37891"

生产环境

./build-and-deploy.sh prod 80 "https://47.83.141.164:37891"

🚀 项目压缩与传输

创建无Mac隐藏文件的压缩包

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/

服务器部署步骤

上传代码到服务器

scp selenium_vue_project.tar.gz user@server:/opt/

解压并部署

tar -xzf selenium_vue_project.tar.gz
cd selenium_vue
chmod +x build-and-deploy.sh
./build-and-deploy.sh

配置防火墙

# 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

5.8 KiB Executable File Raw Permalink Blame History Unescape Escape