最近收到了一些來自社區(qū)的反饋，希望我能夠?qū)?VSCode Server 的的設(shè)計(jì)思路以及內(nèi)部實(shí)現(xiàn)進(jìn)行一些解析。因此，本篇文章將會(huì)對(duì) VSCode Server 的原理、架構(gòu)、使用場(chǎng)景等方面進(jìn)行一些分析與探討。
什么是 VS Code Server
VS Code Server 是一個(gè)運(yùn)行在遠(yuǎn)程服務(wù)器上的 VS Code 實(shí)例，它可以通過瀏覽器訪問，提供了與本地 VS Code 相同的編輯體驗(yàn)。它基于遠(yuǎn)程開發(fā)擴(kuò)展所使用的服務(wù)器構(gòu)建，還具備交互式 CLI 等額外功能。
通過在遠(yuǎn)程機(jī)器上運(yùn)行 VS Code Server，開發(fā)者可以在本地 VS Code 客戶端中編輯和調(diào)試遠(yuǎn)程的代碼，擁有本地般的開發(fā)體驗(yàn)，包括智能感知、代碼導(dǎo)航和調(diào)試等等。這種方式可以讓開發(fā)者在不同的設(shè)備上保持一致的開發(fā)環(huán)境，同時(shí)也可以在不同的設(shè)備上共享開發(fā)環(huán)境。
接下來我們介紹一下組成一個(gè)完整的 VSCode Server 體驗(yàn)的兩個(gè)重要組成部分。
一個(gè)是在服務(wù)器上下載并構(gòu)建一個(gè)獨(dú)立的 VS Code Server，讓所有的 VS Code 交互都通過請(qǐng)求該 Server 來實(shí)現(xiàn)，使得任意的遠(yuǎn)程 client (甚至無需是 VS Code)，只要能發(fā)送網(wǎng)絡(luò)請(qǐng)求，都能實(shí)現(xiàn)遠(yuǎn)程 VS Code 體驗(yàn)。
VS Code Server 的架構(gòu)圖如下：
另一個(gè)是通過 VS Code 擴(kuò)展: Remote - Tunnels extension ，通過在 server 與 client 之間建立一個(gè)可信安全的 tunnel，使得 VS Code 能將遠(yuǎn)程服務(wù)器中的目錄結(jié)構(gòu)掛載映射到本地的客戶端來實(shí)現(xiàn)。
VS Code Tunnel 實(shí)現(xiàn)原理
在上面的介紹中，我們發(fā)現(xiàn)一個(gè)很有意思的地方，VS Code Server 與客戶端之間支持不直接通過 SSH 連接。因此，它理論上可以在無需安裝 VS Code 的情況下運(yùn)行，甚至可以在不支持 SSH 命令的環(huán)境中運(yùn)行，例如在瀏覽器中運(yùn)行。那么它是如何做到的呢？
這里就不得不提到 VS Code tunnel 了。VS Code tunnel 是微軟實(shí)現(xiàn)的一種隧道技術(shù)，我們可以在 MS Learn 隧道服務(wù)（點(diǎn)對(duì)點(diǎn)訪問） 這里找到更多信息。
VS Code tunnel 本質(zhì)上是在服務(wù)器和客戶端上各啟動(dòng)了一個(gè)服務(wù)，并相互使用 HTTPS 連接，同時(shí)監(jiān)聽了服務(wù)器上的部分端口（通常是 443 等）的 https / wss 通信，從而使得客戶端可以通過這個(gè)通道獲取到服務(wù)器上的相關(guān)請(qǐng)求以及信息。在此過程中，服務(wù)器并不需要向外暴露任何端口或者 IP 地址，從而保證了服務(wù)器自身的安全性。
當(dāng)然，由于 VS Code Server 本身自動(dòng)更新，安裝擴(kuò)展等需要，如果服務(wù)器在受限環(huán)境的情況下，還是需要為一些域名開放白名單的，詳情可參考這里。
在實(shí)現(xiàn)上，VS Code Server 提供了一個(gè)專門的 code CLI。通過 code tunnel 命令，將會(huì)自動(dòng)下載 VS Code Server 相關(guān)代碼并啟動(dòng)隧道服務(wù)。其實(shí)它本質(zhì)上并不需要連接的客戶端也一定是 VS Code，僅需要保證連接雙方匹配上同一個(gè)隧道即可。
配對(duì)與身份校驗(yàn)
那么問題就來了，VS Code tunnel 是如何配對(duì)的呢？這里其實(shí)是復(fù)用了之前介紹過的 VS Code 賬戶體系，通過校驗(yàn)客戶端與服務(wù)器上登錄 VS Code 賬戶(目前僅允許 Github 或 Microsoft 帳戶)進(jìn)行身份驗(yàn)證。
在校驗(yàn)了身份后，會(huì)使用該賬號(hào)在 Azure 同一 workspace 下創(chuàng)建隧道服務(wù)（點(diǎn)對(duì)點(diǎn)訪問），在這種情況下，VS Code 將與 Azure 托管的隧道服務(wù)建立出站連接。
隧道成功匹配后即可通過在隧道內(nèi)創(chuàng)建 SSH 連接實(shí)現(xiàn)端到端加密。目前 VS Code Tunnel 使用 AES 256 in CTR 模式，我們可以在這里 找到相關(guān)的加密算法。
在無 SSH 環(huán)境下的連接
那么，如果當(dāng)客戶端沒有可用 terminal 環(huán)境（如瀏覽器）該如何連接呢？這里可以參考 VS Code For Web 與 Github Codespaces 的實(shí)現(xiàn)辦法。本質(zhì)上，隧道開啟時(shí)，服務(wù)端會(huì)生成一個(gè)特殊的 URL
https://vscode.dev/tunnel/<machine_name>/<path>
客戶端訪問這個(gè) URL 時(shí)將重定向到特定的隧道服務(wù)，該服務(wù)會(huì)將客戶端與服務(wù)器之間的連接進(jìn)行匹配，從而實(shí)現(xiàn) VS Code Server 與客戶端之間的連接。當(dāng)然，該 URL 的安全性也由上述的賬號(hào)身份驗(yàn)證保證。
使用限制
由于 VS Code Server 的實(shí)現(xiàn)本質(zhì)上是利用了點(diǎn)對(duì)點(diǎn)的隧道服務(wù)，這項(xiàng)特性顯然會(huì)帶來不小的成本以及被濫用的可能。因此，VS Code Server 對(duì)隧道數(shù)量和帶寬等資源設(shè)置了使用限制。
目前 VS Code Server 僅支持在 Azure 上運(yùn)行，且需要使用 Microsoft 或 Github 賬戶進(jìn)行登錄。對(duì)于每個(gè)賬戶，僅能注冊(cè)至多 10 個(gè)隧道。如果要?jiǎng)?chuàng)建新隧道并且已經(jīng)注冊(cè)了 10 個(gè)其他隧道，CLI 將隨機(jī)選擇一個(gè)未使用的隧道并將其刪除。
另外，一個(gè) VS Code Server 實(shí)例僅設(shè)計(jì)為供單個(gè)用戶訪問。因此多租戶的使用場(chǎng)景并不適用。如果需要多用戶訪問，可以考慮使用多個(gè) VS Code Server 實(shí)例。
與其他 VS Code 特性對(duì)比
與 SSH 連接的關(guān)系
如果你不愿意接受 VS Code Server 的隧道服務(wù)，例如需要更多連接數(shù)，或者有多用戶服務(wù)器的需求，也可以直接使用 SSH 連接到遠(yuǎn)程服務(wù)器。
Visual Studio Code Remote - SSH 擴(kuò)展允許你使用 SSH 連接到遠(yuǎn)程服務(wù)器，并在遠(yuǎn)程服務(wù)器上運(yùn)行 VS Code Server。
VS Code Server 本身也同樣支持 SSH 連接，只需要在遠(yuǎn)程服務(wù)器上安裝 SSH 服務(wù)，并在 VS Code 中配置好 SSH 連接信息即可。由于強(qiáng)需求 SSH 環(huán)境，并不在 VSCode for Web 系列的支持范圍內(nèi)，因此不是本系列文章的重點(diǎn)，在此就不多贅述了。
與 Dev Container 的組合使用
Dev Containers 是 VS Code 的另外一項(xiàng)重要特性。它允許 VSCode 可以在 Docker 容器中運(yùn)行開發(fā)環(huán)境。
VS Code Server 與 Dev Containers 是兩個(gè)獨(dú)立的功能，我們知道 VS Code Server 可以在遠(yuǎn)程服務(wù)器上運(yùn)行 VS Code 實(shí)例，因此它們可以很好的結(jié)合使用。
通過在遠(yuǎn)程服務(wù)器上運(yùn)行一個(gè) Dev Containers，并利用 VS Code Tunnel 訪問該 Dev Container，從而實(shí)現(xiàn)遠(yuǎn)程容器的開發(fā)體驗(yàn)，對(duì)開發(fā)環(huán)境的同一管理效率又提升了一個(gè) level。
總結(jié)
在本篇文章中，我們介紹了 VS Code Server 的設(shè)計(jì)思路以及實(shí)現(xiàn)原理。通過 VS Code Tunnel，我們可以在任意客戶端上連接遠(yuǎn)程服務(wù)器的 VS Code 實(shí)例，從而實(shí)現(xiàn)遠(yuǎn)程開發(fā)的體驗(yàn)。
