从手动部署到一键发布 - 开源自动化部署工具RollWin

从手动部署到一键发布 - 我的前端自动化部署工具开发之路

大家好，我是一名前端开发者。今天想和大家分享一下我开发的一个自动化部署工具 RollWin 的开发历程。

开发背景

作为一名前端开发者，我每天都会遇到需要部署项目的情况。特别是在开发 Vue 项目时，经常需要在测试环境和生产环境之间切换。传统的部署流程是这样的：

1. 手动执行 npm run build 打包
2. 等待打包完成
3. 找到打包后的文件夹
4. 登录服务器
5. 上传文件
6. 反复确认是否上传成功

这个过程不仅繁琐，而且容易出错。有时候打包完成后忘记上传，有时候上传到了错误的环境，这些都会造成不必要的麻烦。

痛点分析

在日常开发中，我遇到了以下几个主要问题：

1. 重复性工作太多

   • 每次都要手动执行相同的命令
   • 需要记住不同环境的配置
   • 频繁切换目录和环境

2. 容易出错

   • 有时会上传到错误的环境
   • 可能遗漏某些文件
   • 配置文件容易混淆

3. 效率低下

   • 每次部署都要重复相同的步骤
   • 需要等待并手动确认
   • 没有部署记录和回滚机制

解决方案

基于这些问题，我开发了 RollWin 这个工具。它主要实现了以下功能：

1. 可视化操作

   • 直观的目录选择
   • 清晰的环境区分
   • 简单的按钮操作

2. 自动化流程

   • 一键执行打包命令
   • 自动上传到服务器
   • 支持多环境配置

3. 安全可靠

   • 实时显示部署日志
   • 支持部署回滚
   • 错误提示和处理

技术实现

工具使用 Electron + Vue3 开发，主要考虑到：

1. 跨平台支持
2. 良好的用户界面
3. 可以调用系统命令
4. 文件操作便捷

使用效果

使用这个工具后：

1. 部署时间从原来的 5-10 分钟缩短到 1-2 分钟
2. 不再需要手动切换目录和环境
3. 告别繁琐的手动上传
4. 可以清晰地看到部署记录

开源分享

这个项目已经开源在 GitHub 上：RollWin

这个项目已经开源在 Gitee 上：RollWin

欢迎大家使用和提供建议！如果对你有帮助，别忘了给个 Star ⭐️

未来计划

1. 添加部署任务队列
2. 支持更多的构建工具
3. 添加自动备份功能
4. 优化部署速度
5. 添加团队协作功能

结语

工具的开发源于日常工作中的痛点，希望能帮助到有同样需求的同学。也欢迎大家提出宝贵的建议和意见，一起改进这个工具！

---

项目地址：GitHub - RollWin

如果觉得对你有帮助，欢迎 Star 和 Fork！