在线观看色天堂,欧美成人91,欧美一区二区三区精品,日韩一级色情片,青青草成人在线播放,国产v日韩,日韩精品五区,北条麻妃一区二区三区蜜臀色欲

作者信息：趙吉彤，花名牧?xí)?/span>

阿里云智能-銷售管理部前端工程師，負(fù)責(zé)前端基礎(chǔ)設(shè)施建設(shè)。

「開發(fā)全流程在線化」近些年來(lái)熱度不斷攀升，比如 AWS 在 C9 的實(shí)踐、開源屆比較出名的 TheiaJS，到后起之秀 code-server、行業(yè)佼佼者 VS Online 等。我個(gè)人以及我們團(tuán)隊(duì)對(duì)于「開發(fā)流程在線化」也做了較為深入的探索實(shí)踐，從開始的懵懂迷茫到現(xiàn)在的目標(biāo)清晰。

從 WebIDE 講起

整個(gè)集團(tuán)對(duì)于 WebIDE 的建設(shè)可以說(shuō)起步較晚，當(dāng)業(yè)界有了 Theia-IDE 的完整解決方案、coding.net 自己 CloudStudio 的商業(yè)模式，我們還在內(nèi)部建設(shè)階段。但好的方面，我們基于 IDE 技術(shù)領(lǐng)域及相關(guān)工具平臺(tái)在近期如雨后春筍般涌現(xiàn)：***Studio、***IDE、K*** 以及更廣義的可視化搭建設(shè)計(jì)器等。

我們團(tuán)隊(duì)在 18 年調(diào)研過(guò)后決定基于 D*******s 的 ***Studio 來(lái)進(jìn)行上層封裝滿足業(yè)務(wù)需求，后面由于種種原因不再適合放棄了。

19 年中，基于開源的 code-server 和云原生 Kubernetes 的加持，我們自己打造了一款 YunIDE，由于需要花費(fèi)大量的精力去調(diào)度運(yùn)維 IDE 底層，這對(duì)于一個(gè)業(yè)務(wù)團(tuán)隊(duì)來(lái)說(shuō)也是很難變現(xiàn)的，在第一版本迭代完成之后也選擇遷移了。

code-server：

https://github.com/cdr/code-server

最后我們基于 ****IDE 并結(jié)合 XCloud 平臺(tái)、Dawn 工具、云查詢，打造了更加垂直易用的在線開發(fā)工具，打通了整個(gè) I2P（Init to Publish）在線開發(fā)流程，對(duì)特定場(chǎng)景化及外包同學(xué)開發(fā)提效起到了關(guān)鍵性作用。

Dawn 工具：

https://github.com/alibaba/dawn

自建的過(guò)程與挑戰(zhàn)

基本上 WebIDE 由三部分構(gòu)成：

Client: 客戶端也是最重要的端，將代碼編輯等本地功能移植到瀏覽器中。
Server: 服務(wù)端也是控制端，包括管理數(shù)據(jù)交互及資源調(diào)度。
Container Pool: 運(yùn)行時(shí)，用戶代碼真正運(yùn)行的容器環(huán)境。

三者之間最典型的架構(gòu)如下圖所示：

code-server 在很大程度上解決了 Client 端的問(wèn)題，其本身基于 VSCode 二次開發(fā)，在體驗(yàn)及一些編輯器基礎(chǔ)性問(wèn)題上，我們不再去花時(shí)間重構(gòu)，將重點(diǎn)精力放在 Server 端和 Container Pool。

服務(wù)端設(shè)計(jì)

YunIDE 從一開始就是面向云上設(shè)計(jì)的，所以在真正討論架構(gòu)的時(shí)候，更多的話語(yǔ)權(quán)在于使用云上基礎(chǔ)設(shè)施 & 業(yè)界開源工具，所以在用戶權(quán)限體系、容器資源調(diào)度、代碼文件持久化方式等問(wèn)題上，都與彈內(nèi)的大部分 WebIDE 實(shí)踐有所區(qū)別，一張?jiān)缙诘募軜?gòu)大圖：

截止 YunIDE 第一個(gè)版本迭代，整個(gè)服務(wù)端開發(fā)對(duì)我個(gè)人而言挑戰(zhàn)還是蠻多的，尤其是「資源調(diào)度 & 編排」這部分，需要對(duì)容器、Kubernetes 有足夠深入的理解，對(duì)云資源、網(wǎng)絡(luò)環(huán)境、集團(tuán)現(xiàn)有基礎(chǔ)設(shè)施中間件有一定的了解和經(jīng)驗(yàn)。WebIDE 資源調(diào)度本身就是一個(gè)追求極限的過(guò)程（誰(shuí)不想自己的 IDE 冷啟動(dòng)快一些呢），一丁點(diǎn)知識(shí)上的盲區(qū)都會(huì)帶來(lái)雪崩版的負(fù)面影響。

編輯器 & IPC

編輯器端我們最大化的沿用了 Coder/VSCode 的實(shí)現(xiàn)，也就是這個(gè)原因，YunIDE 在最初的體感上要比 TheiaIDE 更舒服更接地氣，而且通過(guò)對(duì) VSCode 擴(kuò)展體系的繼承，可以獲得幾乎無(wú)限的想象空間。

我們擴(kuò)展的功能也通過(guò) vscode extensions 來(lái)實(shí)現(xiàn)，區(qū)別于三方擴(kuò)展，內(nèi)建的插件無(wú)法被移除。

IPC 這一層除了 code-server 所做的工作，YunIDE 在 HTTP 應(yīng)用層對(duì) socket IPC 做了代理和 Hack，做了相應(yīng)的鑒權(quán)與應(yīng)用層適配。

關(guān)鍵性問(wèn)題

資源利用率：資源的合理編排以及最大化利用永遠(yuǎn)是我們追求的目標(biāo)，在弱編輯場(chǎng)景（只編碼不調(diào)試預(yù)覽）如何在保證隔離性的基礎(chǔ)上共享資源：

保證高可用性：縮短運(yùn)行時(shí)生命周期，同時(shí)也要保證用戶代碼文件不丟失。最理想的狀況是按 socket 連接數(shù)來(lái)動(dòng)態(tài)的配置運(yùn)行時(shí)容器，但技術(shù)上目前實(shí)現(xiàn)成本過(guò)高，只能以「小時(shí)/天」計(jì)算銷毀周期。通過(guò) NFS 掛載用戶工作空間，用戶數(shù)據(jù)不依賴運(yùn)行時(shí)條件，做到數(shù)據(jù)可恢復(fù)。

啟動(dòng)速度優(yōu)化：

完全冷啟動(dòng)：未知鏡像的情況很難優(yōu)化，但垂直場(chǎng)景下可以做到 1 分鐘內(nèi)。
預(yù)置容器池 + Container Buffer：體驗(yàn)很好，但造成一定的浪費(fèi)。

插件生態(tài)：VSCode 官方插件體系已經(jīng)足夠完善，但也還有精進(jìn)的余地，而且在集團(tuán)前后端技術(shù)百花齊放的大背景下，界面的可定制性不夠強(qiáng)等缺陷就凸顯出來(lái)了（基于 TheiaIDE 的方案則更加靈活），vsc 官方插件市場(chǎng)是公開使用的，但由于協(xié)議等問(wèn)題不能被直接使用。

自此而終，自建 WebIDE 的路上有過(guò)太多機(jī)遇與挑戰(zhàn)，也有了相當(dāng)程度的技術(shù)沉淀，逐漸的我們考慮快速將業(yè)務(wù)場(chǎng)景落地到集團(tuán)基礎(chǔ)設(shè)施，也就有了后面基于 ****IDE 的 I2P 全流程在線化戰(zhàn)役。

全流程在線化戰(zhàn)役

基于集團(tuán)現(xiàn)有基礎(chǔ)設(shè)施如 ****IDE/K***** 等可以很快構(gòu)建垂直場(chǎng)景的在線開發(fā)環(huán)境，后面主要分享下我們的相關(guān)經(jīng)驗(yàn)沉淀與提效成果。

環(huán)境定制

跟幾乎所有 WebIDE 的環(huán)境準(zhǔn)備一樣，開發(fā)運(yùn)行時(shí)開箱即用通過(guò)構(gòu)建相應(yīng)的 image 來(lái)實(shí)現(xiàn)。由于我們團(tuán)隊(duì)在前端基礎(chǔ)建設(shè)上有了很多沉淀，比如 Dawn 腳手架、云查詢、XCloud 等，在定制環(huán)境時(shí)要求變得更加苛刻。

通過(guò)在 Web 端前置云查詢的 QTOKEN 授權(quán)體系，我們可以在 WebIDE 的終端環(huán)境拿到用戶身份，甚至可以通過(guò)用戶身份調(diào)用很多需要權(quán)限校驗(yàn)的接口。這極大的拓展了我們的可操作性，舉個(gè)例子，通過(guò)用戶身份可以很容易實(shí)現(xiàn)構(gòu)建發(fā)布管控、日常錯(cuò)誤收集、問(wèn)題精準(zhǔn)答疑等等：

同時(shí)鏡像中集成了團(tuán)隊(duì)公共賬號(hào)的一些公共權(quán)限，很多弱權(quán)限行為都通過(guò)統(tǒng)一公共賬號(hào)管理和維護(hù)，比如：GitGroup 授權(quán)、npm package 發(fā)布、迭代關(guān)聯(lián)工作項(xiàng)等等。

插件開發(fā)

基于 ****IDE 封裝的 IDE SDK 進(jìn)行深度的 UI & 功能定制，如下圖所示，封裝了常用 dawn/命令行操作：

在點(diǎn)擊預(yù)覽的時(shí)候我們做了很多優(yōu)化處理：

由于插件運(yùn)行在瀏覽器端，所以點(diǎn)擊「預(yù)覽」時(shí)通過(guò) socket 向容器端發(fā)送指令查詢當(dāng)前可用端口。
排除 ****IDE 及插件自身使用的端口，排除外部不可訪問(wèn)的（0.0.0.0），排除非 Node 進(jìn)程開放的端口，剩下的基本上是我們的目標(biāo)端口，實(shí)際使用下來(lái)體驗(yàn)也是比較好的。
通過(guò)內(nèi)置的規(guī)則（倉(cāng)庫(kù)、人員信息、項(xiàng)目信息）來(lái)判斷實(shí)際預(yù)覽需要用到的域名，感謝 ****IDE 團(tuán)隊(duì)的支持，目前我們可以在三個(gè)域名下進(jìn)行預(yù)覽開發(fā)。

對(duì)接 ****IDE 的過(guò)程中，前端項(xiàng)目的有效預(yù)覽問(wèn)題我們這邊算是做了些小小的貢獻(xiàn)，推動(dòng)了通過(guò)「泛域名解析」來(lái)完整的模擬本地預(yù)覽體驗(yàn)。

本地方案：

啟動(dòng) dev server
綁定 hosts local.foo.aliyun.com 來(lái)獲取官網(wǎng)登陸狀態(tài)聯(lián)調(diào)接口
打開瀏覽器

WebIDE 方案 1:

容器運(yùn)行時(shí)啟動(dòng) dev server
綁定 hosts local.foo.aliyun.com 到容器的 IP

WebIDE 方案 2:

容器運(yùn)行時(shí)啟動(dòng) dev server
提供統(tǒng)一的域名 preview.ide.alibaba-inc.com 并通過(guò) pathname 區(qū)分不同空間

WebIDE 方案 3:

容器運(yùn)行時(shí)啟動(dòng) dev server
提供可變的泛域名來(lái)隔離不同空間 [uniqueId]-[port].id*****io.aliyun.com

方案 1 可以有效解決問(wèn)題，但非常麻煩，需要用戶手動(dòng)綁定 Hosts 而且每次容器 IP 改變后都需要重新綁定，從產(chǎn)品的角度來(lái)說(shuō)這個(gè)方案很不成熟，但也不失為一種降級(jí)方案。

方案 2 不能解決前端開發(fā)的問(wèn)題，無(wú)法處理 HTML 中資源引入方式的多樣性問(wèn)題，比如 src="/index.js" 和 src="index.js" 行為就會(huì)不一致，很容易導(dǎo)致資源無(wú)法正常加載、頁(yè)面無(wú)法正常預(yù)覽。

方案 3 比較完美的解決了上述幾個(gè)問(wèn)題，但擴(kuò)展性有所限制，每次新增一個(gè)業(yè)務(wù)域就要多申請(qǐng)一個(gè)泛域名。

最終，項(xiàng)目預(yù)覽的效果如下圖：

項(xiàng)目初始化

既然是 I2P 戰(zhàn)役，自然少不了重中之重的 init 環(huán)節(jié)，本來(lái)在本地是很簡(jiǎn)單一行命令的事，在云端卻不簡(jiǎn)單。

最開始的刀耕火種時(shí)代，我們自己維護(hù)了測(cè)試環(huán)境的 K8S 集群，使用 Jobs 來(lái)完成 init 操作。
后面由于太麻煩，遷移到了 ECI。
最后由于 ECI 沒有走「鏡像預(yù)熱」，導(dǎo)致初始化時(shí)間太長(zhǎng)（1-3 min），又從 ECI 遷移到了其他編排系統(tǒng)。

ECI：

https://www.aliyun.com/product/eci

最終，這套 I2P 的成功實(shí)踐也被復(fù)用到了其他 BU、其他團(tuán)隊(duì)，幫助其他業(yè)務(wù)場(chǎng)景快速實(shí)現(xiàn)「全流程在線化」。

場(chǎng)景化落地

從懵懂到篤定的過(guò)程中，我們搞清了這件事：找到你垂直的場(chǎng)景并發(fā)光發(fā)熱。我們避免把 WebIDE 設(shè)想成一個(gè)大而全的系統(tǒng)，而是一個(gè)小而美的工具。下面是我們已經(jīng)扎根的領(lǐng)域：

XCloud VC 組件開發(fā)：中后臺(tái)低代碼物料
鴻蒙 ACE/國(guó)際站組件開發(fā)：營(yíng)銷搭建物料
Dawn 工程：服務(wù)于外包同學(xué)及其他快速開發(fā)場(chǎng)景
云查詢 FaaS：Serverless 場(chǎng)景快速項(xiàng)目開發(fā)

Dawn 工程：

https://github.com/alibaba/dawn

每個(gè)不同領(lǐng)域在鏡像、插件等層面做不同的兼容，整體入口收斂到 XCloud，最終完成 WebIDE 的場(chǎng)景化落地，同時(shí)也收到了許多肯定的贊許：

戰(zhàn)疫情，我們?cè)谛袆?dòng)

受疫情影響，很多同學(xué)不能正常復(fù)工，WebIDE 對(duì)于解決外包同學(xué)的開發(fā)環(huán)境問(wèn)題顯得尤為重要，我們也非常重視，積極改善功能、維持穩(wěn)定、隨時(shí)答疑，外包同學(xué)不再擔(dān)心電腦安裝各種環(huán)境的問(wèn)題，從之前「幾乎一整天都在裝環(huán)境」到現(xiàn)在「打開瀏覽器 WebIDE 就能開發(fā)上線」，真正做到了「開箱即用」。

下圖展示了從 XCloud 進(jìn)入開發(fā)項(xiàng)目的過(guò)程：

推薦閱讀：
    
     代碼優(yōu)化實(shí)戰(zhàn)：我又優(yōu)化了一百個(gè)if else!
     

    
    
     阿里內(nèi)部員工，排查Java問(wèn)題常用的工具單
     

    
    
     優(yōu)秀的 Java 項(xiàng)目，代碼都是如何分層的？

點(diǎn)擊閱讀原文，領(lǐng)取2020Java電子書資料（持續(xù)更新

我在阿里做中后臺(tái)開發(fā)