我在阿里作中后台开发

「开发全流程在线化」近些年来热度不断攀升，好比 AWS 在 C9 的实践、开源届比较出名的 TheiaJS，到后起之秀 code-server、行业佼佼者 VS Online 等。我我的以及咱们团队对于「开发流程在线化」也作了较为深刻的探索实践，从开始的懵懂迷茫到如今的目标清晰。

从 WebIDE 讲起
整个集团对于 WebIDE 的建设能够提及步较晚，当业界有了 Theia-IDE 的完整解决方案、coding.net 本身 CloudStudio 的商业模式，咱们还在内部建设阶段。但好的方面，咱们基于 IDE 技术领域及相关工具平台在近期如雨后春笋般涌现：Studio、IDE、K* 以及更广义的可视化搭建设计器等。

咱们团队在 18 年调研事后决定基于 Ds 的 **Studio 来进行上层封装知足业务需求，后面因为种种缘由再也不适合放弃了。

19 年中，基于开源的 code-server) 和云原生 Kubernetes 的加持，咱们本身打造了一款 YunIDE，因为须要花费大量的精力去调度运维 IDE 底层，这对于一个业务团队来讲也是很难变现的，在初版本迭代完成以后也选择迁移了。

最后咱们基于 **IDE 并结合 XCloud 平台、Dawn 工具、云查询，打造了更加垂直易用的在线开发工具，打通了整个 I2P（Init to Publish）在线开发流程，对特定场景化及外包同窗开发提效起到了关键性做用。

自建的过程与挑战
基本上 WebIDE 由三部分构成：

Client: 客户端也是最重要的端，将代码编辑等本地功能移植到浏览器中。
Server: 服务端也是控制端，包括管理数据交互及资源调度。
Container Pool: 运行时，用户代码真正运行的容器环境。
三者之间最典型的架构以下图所示：

code-server 在很大程度上解决了 Client 端的问题，其自己基于 VSCode 二次开发，在体验及一些编辑器基础性问题上，咱们再也不去花时间重构，将重点精力放在 Server 端和 Container Pool。

服务端设计
YunIDE 从一开始就是面向云上设计的，因此在真正讨论架构的时候，更多的话语权在于使用云上基础设施 & 业界开源工具，因此在用户权限体系、容器资源调度、代码文件持久化方式等问题上，都与弹内的大部分 WebIDE 实践有所区别，一张早期的架构大图：

截止 YunIDE 第一个版本迭代，整个服务端开发对我我的而言挑战仍是蛮多的，尤为是「资源调度 & 编排」这部分，须要对容器、Kubernetes 有足够深刻的理解，对云资源、网络环境、集团现有基础设施中间件有必定的了解和经验。WebIDE 资源调度自己就是一个追求极限的过程（谁不想本身的 IDE 冷启动快一些呢），一丁点知识上的盲区都会带来雪崩版的负面影响。

编辑器 & IPC
编辑器端咱们最大化的沿用了 Coder/VSCode 的实现，也就是这个缘由，YunIDE 在最初的体感上要比 TheiaIDE 更舒服更接地气，并且经过对 VSCode 扩展体系的继承，能够得到几乎无限的想象空间。
咱们扩展的功能也经过 vscode extensions 来实现，区别于三方扩展，内建的插件没法被移除。

IPC 这一层除了 code-server 所作的工做，YunIDE 在 HTTP 应用层对 socket IPC 作了代理和 Hack，作了相应的鉴权与应用层适配。

关键性问题
资源利用率：资源的合理编排以及最大化利用永远是咱们追求的目标，在弱编辑场景（只编码不调试预览）如何在保证隔离性的基础上共享资源：

保证高可用性：缩短运行时生命周期，同时也要保证用户代码文件不丢失。最理想的情况是按 socket 链接数来动态的配置运行时容器，但技术上目前实现成本太高，只能以「小时/天」计算销毁周期。经过 NFS 挂载用户工做空间，用户数据不依赖运行时条件，作到数据可恢复。

启动速度优化：
彻底冷启动：未知镜像的状况很难优化，但垂直场景下能够作到 1 分钟内。
预置容器池 + Container Buffer：体验很好，但形成必定的浪费。

插件生态：VSCode 官方插件体系已经足够完善，但也还有精进的余地，并且在集团先后端技术百花齐放的大背景下，界面的可定制性不够强等缺陷就凸显出来了（基于 TheiaIDE 的方案则更加灵活），vsc 官方插件市场是公开使用的，但因为协议等问题不能被直接使用。

自此而终，自建 WebIDE 的路上有过太多机遇与挑战，也有了至关程度的技术沉淀，逐渐的咱们考虑快速将业务场景落地到集团基础设施，也就有了后面基于 **IDE 的 I2P 全流程在线化战役。

全流程在线化战役
基于集团现有基础设施如 IDE/K* 等能够很快构建垂直场景的在线开发环境，后面主要分享下咱们的相关经验沉淀与提效成果。

环境定制
跟几乎全部 WebIDE 的环境准备同样，开发运行时开箱即用经过构建相应的 image 来实现。因为咱们团队在前端基础建设上有了不少沉淀，好比 Dawn 脚手架、云查询、XCloud 等，在定制环境时要求变得更加苛刻。

经过在 Web 端前置云查询的 QTOKEN 受权体系，咱们能够在 WebIDE 的终端环境拿到用户身份，甚至能够经过用户身份调用不少须要权限校验的接口。这极大的拓展了咱们的可操做性，举个例子，经过用户身份能够很容易实现构建发布管控、平常错误收集、问题精准答疑等等：

同时镜像中集成了团队公共帐号的一些公共权限，不少弱权限行为都经过统一公共帐号管理和维护，好比：GitGroup 受权、npm package 发布、迭代关联工做项等等。

插件开发
基于 **IDE 封装的 IDE SDK 进行深度的 UI & 功能定制，以下图所示，封装了经常使用 dawn/命令行 操做：

在点击预览的时候咱们作了不少优化处理：

因为插件运行在浏览器端，因此点击「预览」时经过 socket 向容器端发送指令查询当前可用端口。
排除 **IDE 及插件自身使用的端口，排除外部不可访问的（0.0.0.0），排除非 Node 进程开放的端口，剩下的基本上是咱们的目标端口，实际使用下来体验也是比较好的。
经过内置的规则（仓库、人员信息、项目信息）来判断实际预览须要用到的域名，感谢 **IDE 团队的支持，目前咱们能够在三个域名下进行预览开发。
对接 **IDE 的过程当中，前端项目的有效预览问题咱们这边算是作了些小小的贡献，推进了经过「泛域名解析」来完整的模拟本地预览体验。

本地方案：

启动 dev server
绑定 hosts local.foo.aliyun.com 来获取官网登录状态联调接口
打开浏览器
WebIDE 方案 1:

容器运行时启动 dev server
绑定 hosts local.foo.aliyun.com 到容器的 IP
WebIDE 方案 2:

容器运行时启动 dev server
提供统一的域名 preview.ide.alibaba-inc.com 并经过 pathname 区分不一样空间
WebIDE 方案 3:

容器运行时启动 dev server
提供可变的泛域名来隔离不一样空间 [uniqueId]-[port].id*io.aliyun.com
方案 1 能够有效解决问题，但很是麻烦，须要用户手动绑定 Hosts 并且每次容器 IP 改变后都须要从新绑定，从产品的角度来讲这个方案很不成熟，但也不失为一种降级方案。

方案 2 不能解决前端开发的问题，没法处理 HTML 中资源引入方式的多样性问题，好比 src="/index.js" 和 src="index.js" 行为就会不一致，很容易致使资源没法正常加载、页面没法正常预览。

方案 3 比较完美的解决了上述几个问题，但扩展性有所限制，每次新增一个业务域就要多申请一个泛域名。

最终，项目预览的效果以下图：

项目初始化
既然是 I2P 战役，天然少不了重中之重的 init 环节，原本在本地是很简单一行命令的事，在云端却不简单。

最开始的刀耕火种时代，咱们本身维护了测试环境的 K8S 集群，使用 Jobs 来完成 init 操做。
后面因为太麻烦，迁移到了 ECI。
最后因为 ECI 没有走「镜像预热」，致使初始化时间太长（1-3 min），又从 ECI 迁移到了其余编排系统。
最终，这套 I2P 的成功实践也被复用到了其余 BU、其余团队，帮助其余业务场景快速实现「全流程在线化」。

场景化落地
从懵懂到笃定的过程当中，咱们搞清了这件事：找到你垂直的场景并发光发热。咱们避免把 WebIDE 设想成一个大而全的系统，而是一个小而美的工具。下面是咱们已经扎根的领域：

XCloud VC 组件开发：中后台低代码物料
鸿蒙 ACE/国际站 组件开发：营销搭建物料
Dawn 工程：服务于外包同窗及其余快速开发场景
云查询 FaaS：Serverless 场景快速项目开发
每一个不一样领域在镜像、插件等层面作不一样的兼容，总体入口收敛到 XCloud，最终完成 WebIDE 的场景化落地，同时也收到了许多确定的赞许：

**战疫情，咱们在行动
**

受疫情影响，不少同窗不能正常复工，WebIDE 对于解决外包同窗的开发环境问题显得尤其重要，咱们也很是重视，积极改善功能、维持稳定、随时答疑，外包同窗再也不担忧电脑安装各类环境的问题，从以前「几乎一成天都在装环境」到如今「打开浏览器 WebIDE 就能开发上线」，真正作到了「开箱即用」。

下图展现了从 XCloud 进入开发项目的过程：

最后
对文中内容有任何异议欢迎各位斧正。

阿里云中台前端团队大量 HC 等你来，欢迎联系：jitong.zjt@alibaba-inc.com

查看更多：https://yqh.aliyun.com/detail...
上云就看云栖号：更多云资讯，上云案例，最佳实践，产品入门，访问：https://yqh.aliyun.com/