為 iPad 部署基于 VS Code 的遠(yuǎn)程開(kāi)發(fā)環(huán)境
作者 | SpencerWoo
來(lái)源 | 少數(shù)派, 點(diǎn)擊閱讀原文查看作者更多文章
Apple Pencil 和 Procreate 讓我們可以用 iPad 創(chuàng)作富有藝術(shù)感的畫(huà)作，GoodNotes 和 Notability 讓我們能高效整理課堂筆記，Bear、Ulysses 配合 Magic Keyboard 還能幫我們隨時(shí)隨地撰寫(xiě)文章。但是，基于 ARM 架構(gòu)的 iPad 讓開(kāi)發(fā)者在 iPad 上借助桌面級(jí)工具進(jìn)行本地開(kāi)發(fā)工作幾乎無(wú)法實(shí)現(xiàn)。
不過(guò)，基于遠(yuǎn)程服務(wù)器的云端開(kāi)發(fā)環(huán)境最近如雨后春筍般涌現(xiàn)，這為用 iPad 作為本地工具，連接遠(yuǎn)程服務(wù)器的 Linux 環(huán)境進(jìn)行開(kāi)發(fā)的愿望成為可能。微軟在去年就發(fā)布了基于 Azure 云服務(wù)器的 Visual Studio Codespaces（改名前曾叫做 Visual Studio Online），前幾天 GitHub 同樣也發(fā)布了類似的 GitHub Codespaces……而 iPad Pro 配合最新帶有觸控板的 Magic Keyboard 的碼字體驗(yàn)，讓我們用 iPad 寫(xiě)工程級(jí)代碼指日可待！
微軟和 GitHub 的兩款在線開(kāi)發(fā)環(huán)境，都是基于備受開(kāi)發(fā)者喜愛(ài)的 VS Code 的。不過(guò)，目前前者 Visual Studio Codespaces 需要付費(fèi)訂閱昂貴的 Azure 云服務(wù)，后者 GitHub Codespaces 尚在內(nèi)測(cè)中，像我們這種普通用戶現(xiàn)在就想使用 iPad 嘗鮮該怎么辦？如果我們有自己的服務(wù)器，那么，現(xiàn)在我們就可以去上面部署開(kāi)源的 cdr/code-server，本文我就來(lái)簡(jiǎn)單介紹一下怎樣只使用 iPad 來(lái)部署我們的 code-server，并借助 VSApp 來(lái)改善連接 code-server 使用在線版 VS Code 的體驗(yàn)。??
工作原理
在開(kāi)始之前，為了幫助大家理解，我先來(lái)簡(jiǎn)單介紹借助 code-server 使用 iPad 進(jìn)行遠(yuǎn)程開(kāi)發(fā)的具體工作原理。
首先，我們前面提到的 code-server 實(shí)際上就是專門(mén)為瀏覽器設(shè)計(jì)優(yōu)化的 VS Code，可以直接通過(guò)瀏覽器訪問(wèn)。在遠(yuǎn)程 Linux 服務(wù)器上面部署 code-server 之后，code-server 實(shí)際上就相當(dāng)于一個(gè)「中轉(zhuǎn)站」，為我們提供一個(gè)直接在 Linux 服務(wù)器上面修改文件、訪問(wèn)數(shù)據(jù)庫(kù)、執(zhí)行指令等等操作的「窗口」，而由于這一「窗口」同樣在 Linux 服務(wù)器上面運(yùn)行，使用任何一個(gè)瀏覽器都可以打開(kāi)，所以 iPad 也不例外。這樣，我們就能夠借助在遠(yuǎn)程服務(wù)器上運(yùn)行的 code-server，直接使用遠(yuǎn)程服務(wù)器上面的各種資源（包括服務(wù)器上強(qiáng)大的原生 Linux 環(huán)境、CPU / GPU 等計(jì)算資源、「無(wú)盡」的電量等等）進(jìn)行開(kāi)發(fā)工作。（當(dāng)然，這也要求我們 iPad 端全程擁有網(wǎng)絡(luò)連接。）
可以發(fā)現(xiàn)，我們這樣進(jìn)行部署之后，不僅 iPad 上面可以直接用它來(lái)進(jìn)行開(kāi)發(fā)，我們更換任意一臺(tái)電腦，都可以直接連接自己服務(wù)器上的在線版 VS Code，在完全一致的環(huán)境下進(jìn)行開(kāi)發(fā)，實(shí)現(xiàn)我們自己的 Codespaces。
在遠(yuǎn)程服務(wù)器上部署 code-server
準(zhǔn)備工作
下面我們直接開(kāi)始，全程使用 iPad 在服務(wù)器上部署 code-server。我們將需要：
一臺(tái)有網(wǎng)絡(luò)連接的遠(yuǎn)程服務(wù)器（我使用的是阿里云位于北京的服務(wù)器，系統(tǒng)是 Ubuntu 18.04 LTS）
在 iPad 上能夠登錄遠(yuǎn)程服務(wù)器的 SSH 工具（推薦使用 Blink Shell）
這樣就 OK 了。我們使用后者登錄遠(yuǎn)程服務(wù)器，開(kāi)始操作。
下載 code-server
首先，我們需要下載 code-server，為了后面和 VSApp 更好的配合，我們這里需要下載 3.1.1 版本的 code-server。
我們可以直接在遠(yuǎn)程服務(wù)器上執(zhí)行下面的命令來(lái)下載 .tar.gz 壓縮包，請(qǐng)注意命令末尾的 URL 地址，請(qǐng)記得按照你在 code-server Release 頁(yè)面實(shí)際復(fù)制的地址進(jìn)行填寫(xiě)：
curl -o code-server-3.1.1.tar.gz https://github.com/cdr/code-server/releases/download/3.1.1/code-server-3.1.1-linux-x86_64.tar.gz
之后，我們使用 tar 工具解壓下載得到的壓縮包，之后進(jìn)入解壓好的文件目錄中：
# 解壓縮 tar.gz 壓縮包
tar xf code-server-3.1.1.tar.gz
# 進(jìn)入解壓得到的文件夾
cd code-server-3.1.1-linux-x86_64
我們將得到這樣的一個(gè)文件夾，其中 code-server 是 Linux 可執(zhí)行文件，我們直接運(yùn)行即可在遠(yuǎn)程服務(wù)器上開(kāi)啟 code-server。
配置運(yùn)行 code-server
為了后面能夠更加方便的用 VSApp 使用 code-server，我們這里為我們的 code-server 設(shè)置一個(gè)密碼。直接在服務(wù)器上運(yùn)行下面的命令：
export PASSWORD="{YOUR_CODE_SERVER_PASSWORD}"
將上面命令中的 {YOUR_CODE_SERVER_PASSWORD} 替換為你的密碼即可。這里我們是在服務(wù)器上面設(shè)置了名為 PASSWORD 的環(huán)境變量為 {YOUR_CODE_SERVER_PASSWORD}，這樣后面 code-server 啟動(dòng)后就會(huì)直接讀取這一環(huán)境變量并將之作為你的登錄密碼。
接下來(lái)，我們執(zhí)行下面的命令啟動(dòng) code-server 并開(kāi)放給公網(wǎng)允許使用服務(wù)器地址訪問(wèn)：
./code-server --host "0.0.0.0"
?之后，code-server 進(jìn)程就在遠(yuǎn)程服務(wù)器上啟動(dòng)并開(kāi)始監(jiān)聽(tīng) 8080 端口了，同時(shí)可以看到 code-server 正在使用我們自定義的密碼（custom password）作為認(rèn)證密碼。這里，我們還需要將 code-server 默認(rèn)監(jiān)聽(tīng)的 8080 端口在服務(wù)器防火墻中設(shè)置開(kāi)放，之后我們才能直接通過(guò) {服務(wù)器 IP 地址}:{code-server 端口} 的 URL 地址在瀏覽器中直接訪問(wèn) code-server。
如果一切順利，此時(shí)我們?cè)?iPad 上面用瀏覽器直接訪問(wèn) {服務(wù)器 IP 地址}:{code-server 端口}，輸入剛剛設(shè)置的密碼，就能夠打開(kāi)一個(gè)完整的在線版 VS Code：
?這一在線版 VS Code（code-server）可以直接打開(kāi)服務(wù)器上的任何文件夾，使用 VS Code 的終端執(zhí)行各種命令，甚至可以將服務(wù)器上面運(yùn)行的程序監(jiān)聽(tīng)端口映射到本地，讓 Safari 直接打開(kāi)。另外，code-server 是一個(gè)原生的可執(zhí)行文件，所以你可以直接將這一文件放在服務(wù)器中的任何位置、加入系統(tǒng) $PATH、設(shè)置 systemd 服務(wù)等等。如果你擁有已經(jīng)備案的域名，或服務(wù)器在國(guó)外，你也可以用 Nginx 將 code-server 進(jìn)行反向代理，使用自己的域名綁定，并添加 HTTPS 支持……
不過(guò)，雖然我們現(xiàn)在可以直接訪問(wèn) code-server 了，但直接在 Safari 瀏覽器里面使用 code-server 體驗(yàn)還是比較糟糕，上面地址欄和下面外接鍵盤(pán)出現(xiàn)的菜單欄都讓直接在瀏覽器里使用 code-server 非常不順暢，因此我們最好使用下面介紹的 VSApp 來(lái)管理、連接 code-server 使用。
使用 VSApp 優(yōu)化 iPad 上使用 code-server 的體驗(yàn)
VSApp 是一款專門(mén)為 iPad 優(yōu)化的用來(lái)連接 code-server 的 iOS 原生應(yīng)用。我們使用 VSApp 可以直接連接我們自己的 code-server 實(shí)例，自動(dòng)登錄，打造暢快的在線 VS Code 體驗(yàn)。同學(xué)們可以直接前往 VSApp - code-server 官網(wǎng) 下載 iPadOS 版本的 VSApp。
VSApp 原本是僅支持連接至它的開(kāi)發(fā)者所部署的 code-server 上面的，因此也包含了 App 內(nèi)購(gòu)，最近 VSApp 才更新支持自部署服務(wù)器的連接。既然我們都已經(jīng)自己部署了自己的 code-server，那么我們直接在菜單中選擇「Self Hosted Server」，并依次填寫(xiě)：
我們剛剛部署 code-server 的：
code-server URL 剛剛在 Safari 中打開(kāi)的 URL：
{服務(wù)器 IP 地址}:{code-server 端口}Instance password 剛剛開(kāi)啟 code-server 時(shí)設(shè)置的密碼
以及，我們服務(wù)器自己的：
Host：服務(wù)器 IP 地址
Username：默認(rèn)登錄用戶名
Port：登錄 SSH 端口（默認(rèn) 22 端口）
Authentication：登錄服務(wù)器時(shí)使用的密碼或公鑰私鑰對(duì)
再點(diǎn)擊保存即可。
?之后，我們就應(yīng)該看到 VSApp 為我們加載了和剛剛 Safari 中訪問(wèn)時(shí)一樣的在線版 VS Code。由于 VSApp 是一個(gè)獨(dú)立的 iOS 應(yīng)用，并專門(mén)為 code-server 進(jìn)行了優(yōu)化，因此我們不僅能夠直接進(jìn)入 App 即可登錄，還不會(huì)出現(xiàn)像 Safari 直接訪問(wèn)時(shí)的出現(xiàn)的工具欄下滑問(wèn)題。
小結(jié)
VS Code 是一個(gè)強(qiáng)大的多功能代碼編輯器，它不僅廣受開(kāi)發(fā)者的喜愛(ài)，許許多多普通用戶也直接使用 VS Code 進(jìn)行 Markdown 文章撰寫(xiě)、用來(lái)管理協(xié)作、進(jìn)行數(shù)據(jù)分析，甚至可以用來(lái) 發(fā)表知乎文章、聽(tīng)網(wǎng)易云音樂(lè)歌曲 等等。
現(xiàn)在，iPad 開(kāi)放了觸控板 cursor 支持，發(fā)布了 Magic Keyboard 鍵盤(pán)，越來(lái)越強(qiáng)調(diào)電腦屬性的 iPadOS 也逐漸成為許多用戶的日常「筆記本」。使用本文方法部署 code-server，讓 iPad 增加了更多的可能性，同時(shí)由于服務(wù)器掌握在我們自己手中，我們的開(kāi)發(fā)環(huán)境還能夠保證處處一致。相信未來(lái)會(huì)有更多類似 GitHub Codespaces、Visual Studio Codespaces 以及 code-server 的產(chǎn)品，讓我們能夠不拘泥于設(shè)備本身的性能、環(huán)境、硬件條件，隨時(shí)隨地用熟悉的環(huán)境進(jìn)行工作。感謝閱讀。