我在阿里作中後臺開發

「開發全流程在線化」近些年來熱度不斷攀升，好比 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/