作者介绍
孙力： 根底架构资深Java开发工程师
屈晶晶： 根底架构高档前端开发工程师
一、前语
当时的软件系统越来越杂乱，越来越多的开发者运用各种 IDE 、中间件来简化自己的软件开发过程。在这样的布景下，传统 IDE 产品的局限性日渐闪现，开发者不得不学习更多的技能，引入更多的东西，花费更多的时刻在开发环境的办理和保护上。
去哪儿网具有许多的前后端工程和运用，每个工程所需求的代码编辑器，运行时，SDK，中间件，运用服务器，装备以及底层操作系统或许都不相同，而传统 IDE 东西在可开发性上做的很好，但都无法处理如上所述的开发环境依靠问题。
那么关于前后端工程师来说，怎么在当时人力严重、长途作业、项目不了解的情况下，随时随地快速着手开发和发布项目？关于团队来说怎么确保团队开发环境的标准装备化的共同，让开发者依照标准作业？带着这些问题，参阅云原生实践，根底架构团队完成了去哪儿网 WebIDE 云开发渠道，面向多种事务场景供给了标准的容器化的开发环境，对开发者来说大大进步了功率和快捷性。
云开发渠道在公司上线后，已接入前后端大多数事务场景，机酒火车票等事务线都在实践开发中运用，云开发作业区月活400+，而且依据事务线搭档反馈，比照传统本地开发，首次发动并开发的项目，云开发功率进步80%，日常开发事务场景，进步60%。
二、布景
（一）常见问题
作为一名开发人员，你遇到过下面这些问题吗？
环境建立本钱高： 代码五分钟，建立环境两小时。当咱们要对一个新项目修复 bug 时，很或许代码改写只需求分钟，但装置环境花了两小时。
项目无法发动： 依照项目文档，仍旧发动失利。作为一个新人，或者说接手一个新项目的时分，按文档教程装置环境，项目仍旧跑不起来。这个有或许便是某个依靠的版别装置的不匹配或是文档没有及时更新。
开发环境差异大： 团队开发同学因为本地开发环境差异大，导致发动失利或问题不能复现，耽误开发工期。
联调测试困难： 前后端联调时，前端总是需求发测试版别才能让后端和产品搭档看到页面作用。假如有一些需求频频修正的内容，那么发版便是一个很大的时刻本钱。
不能随时随地： 当咱们休假的时分，为了保证事务的稳定，必须得带着作业的电脑，那假如现在有一种计划可以不需求那么适宜的设备即可作业，是不是就处理了 24h 待机的问题。
以上都是咱们在传统开发中常见的问题，云开发便是为了处理这些问题呈现的。
（二）传统开发 vs 云开发
咱们一向在提云开发，那它的作业形式到底是什么样的，咱们来比照下它和传统开发的区别地点。
左面是传统开发的流程，可以看到，它的整个作业区重心是在本地，需求开发者自己去装置 IDE ，建立依靠环境，自己去 gitlab 上拉取代码。开发完结后再去到发布渠道去发布。
而云开发呢相关于传统开发，它的作业区重心从本地转移到了远端作业区。开发者无需关怀 IDE 装置、代码拉取，更重要的是环境依靠装置，这一步呢其实就处理了咱们先条件出的环境建立问题。一起，在远端作业区发动服务后，会对外露出一个服务的地址，这个地址可以在内网环境被一切人拜访，这样的话，也就免去了每次都要发测试版别联调的问题。那关于开发者来说，本地只需求一个浏览器即可。咱们不需求那么适宜的设备即可快速上手开发。这样看下来，云开发相关于本地开发确实是有着一些独特的优势，那咱们来总结归纳一下。
（三）云开发优势
1、开箱即用，直接进入开发
云开发环境会依据事务场景提早预置需求的依靠，用户无需关怀软件装置、IDE 装备、环境依靠等问题，可直接进入编码作业，大大节省时刻。
2、开发环境标准化
依据不同言语环境、软件装置、环境依靠等，直接供给给开发者标准的契合事务场景的开发环境，也利于团队做到装备化的共同，依照共同标准去作业。比如当团队协作开发时，咱们每个人本地装置的环境版别是否相同，是一个十分重要的开发问题，即使开发环境有很详细的文档，也很难把一切的细节都写清楚。
举一个例子，像前端同学经常用的 npm 包，假如发版很频频，想周知给其他同学只能是群里发公告，然后其他人再去更新，一来一去增加了十分大的时刻交流本钱。那假如用了云开发，就能防止这些问题。因为云开发渠道可以经过镜像模板快速为用户供给包含了言语环境，事务场景依靠及公共装备，并集成常用IDE及开发插件的标准化开发环境，开发者省去了建构开发环境的时刻，也不会因为开发环境的差异形成不必要的问题。
3、闭合研制链路
公司团队许多，各个渠道的产品层出不穷，开发阶段中往往会伴随多个渠道的切换，云开发可整合各个研制渠道，这样的话防止重复切换渠道带来的繁琐与不便利，打通研制链路生命周期。
4、随时随地，快捷性进步
在长途作业的情况下，不必需求适宜的设备即可写代码，对便利性也是极大地进步，开发同学可随时创立随时上手开发。
所以归纳来看，不论对个人仍是企业来说，云开发都有着十分大的优势。这些很大程度上可以进步开发功率，助力研制效能。
三、全体计划
（一）名词解释
- cms：Qunar 低代码渠道事务
- qrn：Qunar 的 RN 事务
- qzz：Qunar 的前端静态资源
（二）系统架构
1、Web&客户端
客户端首要分为浏览器和本地 IDE 长途拜访两种形式。支撑的长途 IDE 类型，浏览器形式支撑 vscode ，本地IDE长途拜访支撑 vscode，Jetbrains系列的IDEA、WebStorm等。
2、作业空间
用户开发编码首要便是在作业空间进行，从右侧的明细可以看出，首要分为静态的镜像和动态的运行时两部分。
镜像：依据 操作系统、言语环境、IDE、事务场景 从下到上分为4层，可依据需求自由组合，满意多种场景需求。
运行时：指用户创立云开发环境后承认的运行时环境中的 用户代码，环境变量，IDE装备，自定义插件等。
作业空间生命周期：依据用户的运用情况，作业区会经历从创立，到发动初始化，正在运行，到用户不运用后的暂时离线，超时资源收回，以及最后的彻底毁掉，完结整个生命周期。
3、云开发办理后台
用户作业区的调度办理，创立、离线、毁掉等生命周期办理。
用户信息办理，如 公私钥密匙装备，IDE 装备，自定义插件等。
用户行为监控，收集用户运用数据，用于对云开发环境的弹性收回和重建，数据计算等。
4、容器办理
包括容器的创立和毁掉，数据耐久化，对运行中容器长途履行指令以完结特定操作等。
5、依靠服务
首要依靠了代码服务、Melaka K8S API 服务、OR 露出服务域名、方针存储等公司内部依靠服务。
（三）IDE 长途开发计划选型
咱们对云开发渠道的规划初衷是前端和后端开发都可以运用，不局限于某种 IDE 的开发渠道，所以在做 IDE 长途计划选型时需充分考虑其成熟度、可扩展性、可集成度，以及和公司开发现状的匹配与结合。在前期以前端开发场景+浏览器形式作为切入点。以此为方针，开端了对业界 IDE 长途开发计划的调研和技能选型。
Theia
Theia 是 Eclipse 推出的云端和桌面 IDE 渠道，彻底开源。现在star数有16K。Theia 是依据 VS Code 开发的，它的模块化特性十分合适二次开发，比如 gitpod，华为云 CloudIDE 、阿里系 IDE 便是依据 Theia 开发。
code-server
code-server 是由 Coder 开发的，现在star数有52K。它的理念是把 VSCode 搬到了浏览器上。
vscode 是依据electron架构，咱们都知道 electron 它的 UI 终究是运行在 chrome 浏览器中，这整个和 web 架构在UI层是天然相通的。
vscode 底层架构源是 typescript，那 typescript 关于前端同学是相关于比较了解的，关于咱们后边进行一些源码结构改造供给很好的可拓展性，可定制性。
vscode 有个最大的长处，它为什么可以开展到现在这个程度，其实和它的插件机制是有关系的。vscode 本身的功用其实不是许多，其他的功用都是以插件化的方法刺进到 vscode 里面去。
stackblitz
stackblitz 是一款十分便利写 demo 的 IDE 。供给了非容器化计划的纯前端 node 环境，可以说十分有价值 全体来讲，其技能计划的长处在于不耗费长途资源，可是缺陷，一个是不开源，另一个是毕竟是模拟的 node 环境，在系统的一些层面或许会有所缺失。
JetBrains Gateway
JetBrains Gateway 是 JetBrains 主推的“长途开发”处理计划，依据 Client + Server 架构，运用 SSH 方法衔接，延迟低，网络流量低，可复用用户本地的主题、快捷键、装备等。
经过调研及验证，从社区热度、可用性、可扩展性、公司内前端开发场景匹配等视点归纳考虑，终究咱们选择 code-server 开源版作为前端开发+浏览器形式的 IDE 长途开发计划选型，尽管其没有 Theia 的可扩展性那么高，但根本满意咱们的要求，而且其运用体会上要好不少，社区热度一向很高。当然关于选用哪种 IDE 长途开发计划，在规划时彻底是可拓展的和可替换的，咱们会对 IDE 长途开发计划整个运用过程中的共性做抽象，共同考虑，并在规划云开发作业区镜像分层时将其独立出来，这个在下面描绘镜像架构时会提及。
（四）镜像架构
在计划初期，咱们承认了首个适配的事务场景，并与开发团队做了多次深化的交流，以此为根底整理和规划出了镜像架构。
起先，咱们首个适配接入的是 cms 低代码场景，原因是它短频快的开发形式和云开发即开即用的特性很契合，cms 事务覆盖面大，像机酒火车票商场等等都在运用，而且入手难度低。与开发团队交流后得知，IDE 运用方面以 vscode 居多，其次是 WebStorm 。再考虑后续其它事务场景的拓展性，如接入 qrn、node、h5 等，依靠和定制化需求或许各有不同。经过分析这些场景运用的异同点，依据容器镜像本身分层的天然特性，以及咱们要适配多种操作系统、多种言语环境、多种 IDE 类型以及整合多种事务场景的方针，也参阅了开源项目如 gitpod 等镜像规划思路，咱们规划出了如下的 4 层镜像架构图。
镜像依照分层规划分为了 4 层，从上到下分别是：
1、事务场景层：包含事务场景下特定的环境依靠，开发东西以及自定义脚本。现在现已支撑 cms、qrn、node&qzz、rock、java 等场景。涵盖了公司内部大部分事务开发场景。
2、IDE 层：封装了常用 IDE 及 IDE 定制装备，如 vscode 浏览器端的 code-server、Jebtrains WebStorm、IDEA 等，还包括 IDE 相关的公共插件扩展，发动脚本、用户行为监控脚本。
3、言语环境层：包含 nodejs、java 等开发言语环境支撑能力。
4、操作系统层：现在支撑 centos、ubuntu 两种底层操作系统，并集成 zsh 等用户开发中常用系统软件。
镜像的分层是依据咱们对终究满意用户开发场景作业区的分类、整理，和便于重用，以快速的支撑新的场景。咱们终究的镜像便是由这四层根底镜像交叉组合成的，这样便于快速支撑多种操作系统、多种言语环境，多种IDE类型，以及多种事务场景。
（五）初具雏形
有了以上的计划及是完成，再经过域名 +URL Path 方法露出云开发拜访地址后，用户就可以开端进行代码编写、运行、debug、提交代码等等一系列惯例操作了。示例作用如下图。
这便是浏览器中运用 WebIDE 云开发的操作界面，可以看到，用户界面与 VS Code 十分相似，用户可以在浏览器中运用 VS Code 的编辑器、侧边栏、终端等功用。可是，因为运行在浏览器中，一些高档功用（如大局查找和调试）或许会受到限制。VS Code 的用户界面则彻底运行在本地计算机上，供给更好的功用和体会。
调试方面，WebIDE 供给了调试功用，但需求用户手动装备调试器。VS Code 内置了调试器，并供给了可视化的调试界面和调试功用。
插件方面，WebIDE 可以运用 VS Code 的许多扩展，尽管不是一切扩展都能正常作业，但咱们往常运用的大部分都是支撑的。
现在现已根本可以让用户体会和运用，但距离好用易用、深化事务场景，进步开发功率还有一些距离，也是咱们后边要处理的中心难点问题。
（六）中心难点及处理计划
事务场景落地
为了供给给用户更好的开发流程体会，在云开发结合事务场景的过程中也遇到了难题——怎么处理前端资源调试预览的问题。
咱们在本地开发的时分，调试预览的形式根本都是这样的，首要会在浏览器中拜访线上的地址，把一部分资源或接口拜访到线上，另一部分资源署理到本地发动的服务上。
经过调研，我司前端项目运用hiproxy进行署理的占比到达 40% 。所以一定要满意这些项目的用户在云环境上的运用。这里为什么单独提到 hiproxy，是因为 hiproxy 发动是依靠于当时指令履行的 rewrite 文件，一般来说，这个文件都会放在项目根目录下。云环境上的话，便是跟随代码放在云上。而像 charles 等一些其他方法的署理，会装备在开发者本地，是大局的，那这种的话就不需求做考虑了。除此之外，针对特定事务场景，比如说像低代码渠道事务，咱们还供给了定制化的前端署理。所以针关于前端资源署理问题，咱们也做了几个方面的作业去处理。
1.前端署理—hiproxy
首要，要处理 hiproxy 的问题，咱们要先了解 hiproxy 的原理。在翻看源码后发现，咱们日常履行 hiproxy start -o 指令，其实可以分为两步操作：
① 发动一个5525端口署理服务
② 履行chrome发动指令，让谷歌浏览器重新发动一个新的窗口，这个窗口和其他窗口独立。在本地履行是没有问题的，那到了云环境上，因为远端服务没有浏览器，即使有，也是在远端服务器上，而不是用户本地的浏览器。
所以依据此，猜想假设把这两步拆分开，署理服务发动在云环境，而发动 chrome 窗口放在开发者本地，是不是就可以处理这个问题。那咱们把这个 chrome 发动指令 –proxy-server 中的 ip 换位云环境的 ip 后，流程是彻底可以走通的，那 hiproxy 这个问题就处理了。
2. 前端署理—特定场景定制
在低代码中一个页面是有许多的组件构成的。一个 git 仓也包含了多个组件。假如用 hiproxy 做署理，当然也是可以完结的。只不过因为每次开发的组件以及云环境地址不同，就需求更改署理的装备文件，这样的话就增大了开发本钱。所以针关于这种场景，在预览地址后加特殊参数，指定署理的地址和需求署理的组件，在 server 端检测到参数后定向拜访资源，这样就处理了调试预览的问题。
这就形成了一个完整的流程。后续假如有新的事务场景想对接云开发，就有了一套现成的形式去参阅。
进步资源运用率 – 弹性弹性
考虑到随着云开发渠道推行，会不断有用户开端体会和运用，且用户可依据不同言语类型、IDE 类型、事务场景和项目创立多个云开发环境，为了防止容器资源糟蹋，需求一套资源收回和整理的机制确保容器资源高效运用，关于用户长时间不运用的云开发容器可以主动收回，再次运用时可以快速康复拉起。而且用户的代码和装备安全不丢掉。
数据安全和高可用： 云开发环境是用户每天都会运用和操作的，可用性必须要高，且对代码和装备的安全性也有很高要求，不能存在丢掉的情况。选用“容器化+方针存储耐久化+定时数据备份策略+宿主隔离”的方法，为用户供给数据可靠性，也为弹性弹性进步容器资源运用率打下根底。
监控用户运用行为： 资源收回的条件是可以知晓用户不再运用云开发作业区，即需监控用户的运用行为，咱们经过心跳上报机制保护云开发作业区的在线状态，以此为资源主动弹性弹性和用户行为数据计算的根底。
弹性弹性，资源高效运用： 在确保用户数据安全根底上，监控用户运用行为，运用容器弹性弹性特性，进步资源运用率。功用上线后，容器资源的实践运用率从 30% 进步到均匀 80% 左右。
-
超时收回：当用户不在线时刻到达超时时刻阈值，如 3 小时，云开发渠道会主动开释容器 cpu、内存资源，但用户代码、IDE 装备等数据仍将耐久化保存，下次拉起时可直接康复数据和运用。
-
彻底毁掉：当用户长时刻不在线，且到达毁掉时刻阈值时，如 7 天，会先给用户发 QT 提示，提示中已给出云开发环境的各项信息，如承认不需求运用忽略音讯即可，如仍需运用，依照提示操作即可保存。彻底毁掉不只会收回容器 cpu 、内存资源，久化的代码资源和装备也会删去。
本地IDE形式
因为运用习惯，快捷键等搬迁本钱问题，运用浏览器作为客户端接入云开发形式并不适用于一切用户，所以咱们在规划初期的方针便是可接入多种IDE的长途开发计划，这就需求将 IDE 的办理抽象为 IDE 创立，衔接方法办理，状态办理，插件和装备办理等多个部分，并将市面上常见 IDE 的云开发计划整合其中。现在已适配了 vscode浏览器形式，vscode 本地形式，JetBrains WebStorm、Idea 等多种长途开发形式。
如上图左侧所示，浏览器形式经过 https 域名+URL Path 的方法拜访，而 Local IDE 的方法可经过本地 vscode，Jetbrains IDEA、WebStorm、Gateway，经过 SSH 长途衔接云开发环境，而且不管哪种形式，用户都可以在 qunar 的云开发渠道上完结操作，不需求来回切换，运用体会上也比较共同和高效。
上图是运用本地 Jetbrains IDEA 接入云开发的运用示例，可以看到和直接运用本地 IDEA 的开发作用根本共同，运用过程中，只会传输代码、索引等数据，将计算等使命交给云开发环境，而烘托显示等仍是依靠本地的 IDE ，而且可复用用户原本的快捷键和插件。这种情况下，咱们就能彻底具有本地化的开发体会。
Java后端云开发落地
介绍了 LocalIDE 本地开发形式后，下面以后端 Java 开发场景结合 Jebtrains IDEA 的本地 IDE 形式，描绘下详细完成计划，首要分为两块，一是用户创立的云开发作业区，二是用户本地的运用体会。
1、云开发作业区
Java 环境依靠：镜像模板的言语环境层，会分别适配多种 Java+maven+tomcat 等的组合，以满意公司内关于 Java8、11、17 等多版别环境依靠的需求，为用户供给Java后端标准化开发环境，无需建立，直接进入开发。
Jetbrains IDEA 长途开发计划集成：镜像的 IDE 层集成了Jetbrains IDEA长途开发计划，在容器发动时会拉起 server 端进程，用户经过 SSH 方法长途衔接，整个过程只需求在云开发渠道页面上操作，云开发环境创立成功后会经过 Gateway link 的方法触发翻开用户本地 IDE ，而且已将长途衔接信息主动填好，用户只需承认即可进入开发。
用户代码：云开发渠道有权限控制，用户只能选取自己有权限的代码，并经过 SSH 公私钥的方法，以用户本身权限拉取代码到云开发环境中。
2、用户本地
(1) 运用体会
操作界面：如上图，和运用本地IDEA的操作界面、功用菜单根本共同。
快捷键：依据Jetbrains长途开发计划，会主动仿制用户本地的快捷键设置，所以在快捷键上根本没有搬迁本钱。
插件：提早预置了常用的开发插件，而且会主动仿制仿制用户本地的预装插件，插件体会上无差异。
(2) 运用拜访和调试
运用拜访： 发动运用程序后，如拜访端口是8080，会将本地的8080端口经过SSH署理的方法衔接到云开发环境，即拜访本地8080端口实践是拜访云开发环境中运用。
调试： 打断点调试方法和本地共同。
打通开发全流程
除了云开发快速快捷的开发体会，咱们更希望和公司内开发流程中的其它产品结合起来，打通开发的全流程，真正建立研制效能的闭环。
上图便是关于开发同学来说项目开发的首要路径。其中项目翻开 → 项目开发 → 代码提交可以交由 WebIDE 云开发中操作。其他流程，这里举个例子：像相关 pmo ，咱们可以在创立云开发环境时相关绑定 pmo 号或者以 pmo 系统为入口进入云开发，而在关闭 pmo 时会主动检测到并毁掉运用完毕的云开发环境。代码发布方面，咱们也打通 CI/CD 流程，用户无需切换，一键发布。
插件扩展
上图红框处是咱们给云环境定制化的一款插件，为打造团队需求的 WebIDE ，满意日常的开发是必须的。所以易扩展一定是排在第一位的。依据此，咱们在插件中，完成了打通开发全流程的 CI/CD 环接。插件全体分为三大版块。
1、常用指令
现在云环境插件中供给了一些常用指令，点击即可主动运行在终端。
这个功用大大便利了开发同学，不需求咱们翻开终端履行指令，而是点击即可主动翻开终端履行。
2、发布版块
也便是咱们打通 CI/CD 的一环。这部分会依据翻开的文件目录主动识别发布类型，不需求开发同学去发布渠道查找以及填写发布表单，即可一键发布相关 portal 和 mportal 。
3、个性化定制
用户可定制装置属于自己的插件，设置后，在新创立的云环境上都是生效的，开发体会能最大程度的接近本地化。
四、总结及展望
去哪儿云开发渠道建立的方针是结合云原生容器化并运用云开发形式，适配前后端多种事务场景，可以快速供给标准化开发环境，与多种 IDE 长途开发计划深度整合，打通公司内部开发生命周期流程，进步开发功率。从上线后的成果看，现已彻底到达方针。接入支撑了前后端多种事务场景，如 cms、qrn、node&qzz、rock，java 等。整合了 vscode 浏览器形式、vscode 本地形式、Jetbrains WebStorm、Idea 开发形式等多种 IDE 长途开发计划。深化结合事务场景，进步开发功率。
后续咱们将云开发范畴持续跟进和优化。优化功率和体会方面考虑运用预热池化技能进步云开发环境的创立速度。适配和接入公司内更多事务场景，满意更多开发需求。继续整合打通开发流程中触及的服务和产品，让云开发运用更顺利，进一步进步功率。
