Skip to content

大家好,我是农村程序员,独立开发者,行业观察员,前端之虎陈随易。

我会在这里分享关于 独立开发编程技术思考感悟 等内容,欢迎关注。

技术群交朋友 请在个人网站 👆 联系我,一键三连 (点赞评论转发),就是对我最大的支持~


话不多说,先看演示效果 👇。

这个产品的想法,源于我自己的需求。

我的个人网站,是铜鼓 viteperss 搭建的,每次写完一篇文章要更新网站的时候,要经过以下步骤。

  1. 编译打包 vitepress 项目。
  2. 通过压缩软件将 dist 目录压缩成 zip 文件。
  3. 打开终端工具连接远程服务器,上传 zip 文件。
  4. 最后解压 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. 添加服务器配置

  1. 点击活动栏中的 FTP 图标打开侧边栏面板
  2. 点击面板中的 "添加" 按钮
  3. 填写服务器信息:
    • 主机地址:服务器 IP 地址或域名
    • 端口:SSH 端口(默认:22)
    • 用户名:SSH 登录用户名
    • 密码:SSH 登录密码
    • 远程路径:服务器上的目标目录(例如:/var/www/html
  4. 点击 "保存" 添加服务器配置

2. 部署文件/文件夹

  1. 在资源管理器中,右键点击要部署的文件或文件夹
  2. 从右键菜单中选择 "FTP 解压部署"
  3. 会弹出已配置的服务器列表
  4. 点击目标服务器开始部署

3. 使用 .zipignore(可选)

在任意目录下创建 .zipignore 文件,排除特定文件或文件夹不被压缩:

node_modules/
.git/
*.log
.env

.zipignore 文件使用与 .gitignore 相同的模式语法。

部署流程

  1. 📁 读取 .zipignore 并收集需要压缩的文件
  2. 🗜️ 将选中的文件压缩为临时 zip 包
  3. 📤 通过 SFTP 上传 zip 文件到远程服务器
  4. 🗑️ 清空服务器上目标目录的所有内容
  5. 📦 在服务器上使用 unzip 命令解压文件
  6. ✅ 部署完成!

注意事项

  • 仅支持密码方式登录(不支持 SSH Key 认证)
  • 远程服务器必须安装 unzip 命令
  • 解压前会清空目标目录 - 请谨慎使用!

何以解忧,唯有代码。不忘初心,方得始终。