无需服务器！在浏览器中运行VS Code：Vercel与Netlify部署方案全解析

你还在为开发环境配置繁琐而烦恼吗？还在为不同设备间同步开发环境而头疼吗？本文将带你了解如何通过Vercel和Netlify这两个主流Serverless平台部署code-server，让你随时随地在浏览器中使用VS Code进行开发，轻松解决开发环境一致性问题。读完本文，你将掌握两种部署方案的具体步骤、优缺点对比以及适用场景，为你的开发工作选择最适合的部署方式。

什么是code-server

code-server是一个可以在浏览器中运行VS Code的开源项目，它将VS Code的强大功能带到了网页端，让你可以通过任何设备的浏览器访问和使用VS Code。这意味着你不再受限于本地安装的开发环境，只要有网络连接，就可以随时随地进行开发工作。

官方文档：docs/guide.md 项目教程：README.md

部署前准备

在开始部署之前，你需要准备以下内容：

1. 一个GitHub账号，用于托管code-server的代码仓库。
2. 一个Vercel账号和一个Netlify账号，用于部署code-server。
3. code-server的源代码，你可以从仓库克隆：git clone https://gitcode.com/gh_mirrors/cod/code-server

Vercel部署方案

部署步骤

1. 登录Vercel账号，点击"New Project"按钮。
2. 选择从GitHub仓库导入项目，搜索并选择你克隆的code-server仓库。
3. 在项目配置页面，设置构建命令为yarn build，输出目录为dist。
4. 点击"Deploy"按钮，等待部署完成。

部署截图

优缺点分析

优点：

• 部署流程简单，无需复杂的配置。
• 提供免费的SSL证书，保证数据传输安全。
• 全球CDN加速，访问速度快。

缺点：

• 免费计划有资源限制，可能无法满足高负载的开发需求。
• 对一些高级功能的支持可能有限。

相关配置文件：package.json

Netlify部署方案

部署步骤

1. 登录Netlify账号，点击"New site from Git"按钮。
2. 选择GitHub作为代码来源，搜索并选择code-server仓库。
3. 在构建配置页面，设置构建命令为yarn build，发布目录为dist。
4. 点击"Deploy site"按钮，等待部署完成。

部署截图

优缺点分析

优点：

• 同样提供简单的部署流程和免费的SSL证书。
• 对静态资源的处理优化较好，适合前端开发项目。
• 提供更灵活的构建配置选项。

缺点：

• 免费计划的带宽和构建时间有一定限制。
• 在处理一些后端功能时可能需要额外的配置。

部署脚本：ci/release-image/Dockerfile

两种部署方案对比

对比项	Vercel	Netlify
部署难度	简单	简单
免费计划资源	有限	有限
SSL支持	免费提供	免费提供
CDN加速	全球CDN	全球CDN
构建配置灵活性	中等	较高
后端功能支持	有限	有限
适合项目类型	全栈开发	前端开发

总结与建议

通过本文的介绍，我们了解了如何在Vercel和Netlify这两个Serverless平台部署code-server，并对它们的优缺点进行了对比。如果你是一名前端开发者，Netlify可能是一个更好的选择，因为它对静态资源的处理更优；如果你需要进行全栈开发，Vercel的综合性能可能更适合你。

无论你选择哪种部署方案，code-server都能让你摆脱本地开发环境的束缚，随时随地进行开发工作。希望本文对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言讨论。

最后，别忘了点赞、收藏、关注三连，下期我们将介绍更多关于code-server的高级使用技巧！

项目源码：src/ 配置文件：tsconfig.json