在 VSCode 里，把项目一键部署到服务器

前端项目部署看着就是构建一下，再把 dist 传到服务器。

真做起来却要开终端、连 SFTP、找本地目录和线上目录，还得确认配置文件、旧资源和用户上传目录有没有被误碰。

项目和服务器一多，这些重复操作不但烦，还容易传错目录、覆盖线上配置，或者把不该删的文件删掉。

我自己被这个流程折腾过很多次，所以做了一个 VS Code 扩展，叫 简单部署。

它解决什么问题

简单部署把服务器信息、项目路径、上传规则和部署命令都保存在 VS Code 里。

以后项目需要更新时，不用离开编辑器，也不用每次重新翻服务器地址和目录，确认规则后点一下就能部署。

它不想取代完整的 CI/CD 平台。

它更适合这种需求：有一台 Linux 服务器，项目改完后，想把这一次准备好的版本快速、稳当地发上去。

以前手动部署，通常得按下面这个流程走一遍：

复制代码

改代码
↓
执行构建命令
↓
打开 SFTP 工具
↓
输入服务器账号密码
↓
找本地目录和远程目录
↓
拖文件上传
↓
确认哪些文件不能覆盖
↓
手动删旧文件
↓
刷新网页验证

简单部署把这套重复流程收拢起来。

你只需要提前说清楚发到哪台服务器、发到哪个目录、传什么、删什么、什么不能碰，以及部署前后要做什么。

代码、构建命令和 Git 都在 VS Code 里，部署也放进来，整个流程会更连贯。

哪些项目能用，怎么开始

只要项目可以通过文件发布到 Linux 服务器，并且能用服务器命令完成启动、重启或更新，就适合用简单部署。

它可以部署的项目很多，常见的有：

Vue、React、Vite 等前端项目
VitePress、VuePress 等文档站
官网、活动页、产品落地页
后台管理系统和小程序 H5
纯 HTML、CSS、JavaScript 网站
Node.js、Java、Python、Go 等后端项目
前后端分离项目的前端包、后端包或配置文件

如果你维护个人博客、作品集或产品官网，改完内容后想快速更新网站，它适合。

如果你在做外包或小团队项目，需要维护多个客户服务器，它也适合。

如果你有测试环境和正式环境，可以为同一个项目分别建两条部署配置，需要测时发测试服务器，确认没问题再发正式服务器。

整个过程不复杂，先添加服务器，填写名称、地址、端口、用户名和密码。

服务器名称可以按自己的习惯写：

css 复制代码

测试服务器
正式服务器
香港官网服务器
客户 A 后台服务器

然后添加项目规则，前端项目最常见的配置大概是：

bash 复制代码

项目名称：我的官网
目标服务器：正式服务器
远程路径：/var/www/my-site
上传规则：dist/**

dist/** 表示把本地构建后的 dist 目录内容上传到服务器。

项目需要构建时，可以把 bun run build 这类命令加到 前置命令 里，部署会先构建，再上传文件。

后端项目也一样，上传构建产物或项目文件后，再通过 后置命令 重启服务。

例如 Node.js 项目可以上传构建后的文件，再执行 pm2 restart my-app。

Java 项目可以上传 JAR 包，再执行对应的应用重启命令。

Python 或 Go 项目也可以按自己的启动方式配置后置命令。

规则和命令

简单部署的边界很明确。

上传规则 决定传什么，删除规则 决定删什么，保留规则 决定什么绝对不能碰，前置和后置命令 决定部署前后做什么。

大多数前端项目只要一条上传规则：

复制代码

dist/**

本地的 dist/index.html 和 dist/assets/app.js 部署后，会变成服务器上的 index.html 和 assets/app.js。

不想上传某个文件时，可以用 排除规则：

bash 复制代码

dist/**
!dist/config.json

简单部署默认只覆盖，不会擅自删除服务器文件。

线上目录常有本地没有的用户图片、环境配置和历史数据，它们不能因为本地项目里没有，就被工具自动删掉。

确实需要清理历史内容时，再明确写 删除规则：

复制代码

legacy/**
old-version.html

删除前会先备份旧文件。

而 config.json、uploads/** 这类线上关键内容，可以加到 保留规则 里。

本地同名文件不会覆盖它们，删除规则也不会删除它们。

一个常见的网站规则可以这样配：

lua 复制代码

上传规则：dist/**
删除规则：legacy/**
保留规则：config.json、uploads/**

这表示更新最新构建文件，清理历史 legacy 目录，但线上配置和用户上传文件完全不动。

前置命令 在本地执行，适合构建、编译、生成配置或压缩资源。

前置命令 只要有一条失败，部署就会停止，不会把没有准备好的文件传到服务器。

后置命令 在服务器执行，适合重启后端服务、重载 Nginx 或清理缓存。

后置命令 按顺序执行，失败会记录到部署日志，但已经发布成功的文件不会自动回滚。

为什么快，为什么不是 rsync

前端项目构建后，往往会生成几百个碎文件。

简单部署 不会把这些文件逐个传到服务器，而是先按规则压成一个 ZIP 包，再上传这一个包，最后由服务器本地解压。

网络只需要传一个连续文件，服务器在本地处理解压，文件越多，和逐个上传相比越能节省时间。

rsync 很成熟，适合持续同步目录和海量文件。

但前端构建产物里的资源文件常带哈希后缀，每次构建都会产生大量新文件名，rsync 的增量优势会被明显削弱。

需要持续同步海量文件时，rsync 依然是很好的选择。

需要在 VS Code 里发布一次准备好的项目版本，简单部署会更直接。

部署体验和适用平台

简单部署会展示完整部署日志，包括前置命令、构建耗时、压缩包大小、上传耗时、部署耗时、后置命令和总耗时。

构建、连接、上传或服务器命令失败时，日志也会保留具体信息。

项目大小、服务器位置和文件数量都会影响部署耗时。

ZIP 上传减少了大量碎文件的网络传输操作，而简单部署真正省掉的，还有人工操作时间。

以前部署一次，通常要这样：

操作	常见耗时
执行构建、确认构建日志	1 到 3 分钟
打开 SFTP、连接服务器、找目录	1 分钟左右
拖文件、等待上传、检查文件	2 到 5 分钟
手动处理旧文件和配置文件	1 到 3 分钟
合计	5 到 12 分钟

现在人工部分通常只剩确认规则和看结果。

假如一天部署 5 次，每次少花 4 分钟人工操作，一个月大概能省 6 个多小时，还没算传错目录、覆盖错配置和漏删旧文件后的排查时间。

简单部署是 VS Code 扩展，开发环境支持 Windows、macOS 和 Linux。

部署目标是 Linux 服务器，例如 Ubuntu、Debian、CentOS 和 AlmaLinux。

服务器只要能 SSH 登录、能运行项目，基本就够了。

写在最后

市面上不缺部署工具，SFTP、rsync 和 CI/CD 平台都很好。

但我想要的是一个放在 VS Code 里、规则清楚、默认不乱删文件的部署入口。

简单部署想做的事情并不大，就是把项目发布到服务器这件事，从一串重复操作变成一个清晰、可确认、可重复的流程。

建议先找一个测试项目试，例如 Vite 项目或文档站。

先配 dist/**，确认部署正常后，再逐步加保留规则和删除规则。

如果你也在维护网站、文档站、后台或后端项目，经常要把文件发到 Linux 服务器，不妨试试简单部署。

不知道你平时都是怎么部署项目的？

欢迎在评论区留言。

感谢阅读，我是前端之虎陈随易，公众号 陈随易，个人网站：https://chensuiyi.me。