大家好,我是农村程序员,独立开发者,行业观察员,前端之虎陈随易。
我会在这里分享关于 独立开发
、编程技术
、思考感悟
等内容,欢迎关注。
- 网站 1️⃣:https://chensuiyi.me
- 网站 2️⃣:https://me.yicode.tech
技术群
与 交朋友
请在个人网站 👆 联系我,一键三连 (点赞
、评论
、转发
),就是对我最大的支持~
话不多说,先看演示效果 👇。
这个产品的想法,源于我自己的需求。
我的个人网站,是铜鼓 viteperss 搭建的,每次写完一篇文章要更新网站的时候,要经过以下步骤。
- 编译打包 vitepress 项目。
- 通过压缩软件将 dist 目录压缩成 zip 文件。
- 打开终端工具连接远程服务器,上传 zip 文件。
- 最后解压 zip 文件,完成更新和部署。
可以看到,流程不复杂,也不难,但是每次更新都要这么操作一次,有点浪费时间,浪费生命。
所以,我在想,能不能简单地点击一下鼠标,自动完成这个部署流程,而且要尽可能地简单,方便,快捷,不要做额外操作,也不要部署一些重型的工具,服务等。
比如我不想到服务器安装什么 CI/CD、什么 Jenkins,太重了,杀鸡焉用牛刀。
我也不想到 gitee 或 github 配置什么 Actions,什么 webhook 钩子,不轻便。
我也不行写一个脚本,一个命令,每次部署还要去输入命令,去执行脚本。
总而言之,我只想极致地偷懒,点击 1 个按钮,然后选择服务器和位置,自动一键部署,轻量且方便。
所以呢,这就是本文要分享的这个FTP解压部署
扩展工具的由来了,完美地解决了我的问题。
我的所有插件,发布v1.0
的时候,都会转成付费插件,当然,费用不会很贵,比如我的 fnMap 插件就是 10元/永久
,白菜价。
本插件的具体用法和说明请看下文说明,如果你觉得不错,到时候本工具发布v1.0
的时候,付费支持一下就行。
简介
FTP Zip Deploy 是一个 VSCode 扩展,通过将本地文件压缩为 zip 包、上传到远程服务器并自动解压的方式,简化了部署流程。这种方式比逐个上传文件要快得多,特别是对于包含大量小文件的项目。
功能特性
- 📦 智能压缩:自动将文件/文件夹压缩为 zip 格式再上传
- 🚀 快速部署:上传单个 zip 文件而非数千个单独文件
- 🔧 服务器管理:在侧边栏面板中管理多个服务器配置
- 🎯 右键菜单集成:直接从资源管理器右键菜单部署
- 📝 忽略文件支持:使用
.zipignore
排除不需要压缩的文件 - 🔄 自动解压:上传后自动在远程服务器上解压 zip 文件
- 🗑️ 清空部署:解压前清空目标目录,确保部署环境干净
使用场景
- 前端项目部署:部署 React、Vue、Angular 等前端项目的构建产物
- 静态网站:部署静态网站、文档站点或 HTML 页面
- 快速更新:快速将整个项目文件夹部署到开发/测试服务器
- CI/CD 集成:在自动化部署工作流中使用
- 多服务器管理:管理并部署到多个环境(开发、测试、生产)
使用方法
1. 添加服务器配置
- 点击活动栏中的 FTP 图标打开侧边栏面板
- 点击面板中的 "添加" 按钮
- 填写服务器信息:
- 主机地址:服务器 IP 地址或域名
- 端口:SSH 端口(默认:22)
- 用户名:SSH 登录用户名
- 密码:SSH 登录密码
- 远程路径:服务器上的目标目录(例如:
/var/www/html
)
- 点击 "保存" 添加服务器配置
2. 部署文件/文件夹
- 在资源管理器中,右键点击要部署的文件或文件夹
- 从右键菜单中选择 "FTP 解压部署"
- 会弹出已配置的服务器列表
- 点击目标服务器开始部署
3. 使用 .zipignore(可选)
在任意目录下创建 .zipignore
文件,排除特定文件或文件夹不被压缩:
node_modules/
.git/
*.log
.env
.zipignore
文件使用与 .gitignore
相同的模式语法。
部署流程
- 📁 读取
.zipignore
并收集需要压缩的文件 - 🗜️ 将选中的文件压缩为临时 zip 包
- 📤 通过 SFTP 上传 zip 文件到远程服务器
- 🗑️ 清空服务器上目标目录的所有内容
- 📦 在服务器上使用
unzip
命令解压文件 - ✅ 部署完成!
注意事项
- 仅支持密码方式登录(不支持 SSH Key 认证)
- 远程服务器必须安装
unzip
命令 - 解压前会清空目标目录 - 请谨慎使用!