Matrix 精選

Matrix是少數派的寫作社區，我們主張分享真實的產品體驗，有實用價值的經驗與思考。我們會不定期挑選 Matrix 最優質的文章，展示來自用戶的最真實的體驗和觀點。

文章代表作者個人觀點，少數派僅對標題和排版略作修改。

Apple Pencil 和 Procreate 讓我們可以用 iPad 創作富有藝術感的畫作，GoodNotes 和 Notability 讓我們能高效整理課堂筆記，Bear、Ulysses 配合 Magic Keyboard 還能幫我們隨時隨地撰寫文章。但是，基於 ARM 架構的 iPad 讓開發者在 iPad 上 藉助桌面級工具進行本地開發工作 幾乎無法實現。

不過，基於遠程服務器的雲端開發環境最近如雨後春筍般湧現，這爲用 iPad 作爲本地工具，連接遠程服務器的 Linux 環境進行開發的願望成爲可能。微軟在去年就發佈了基於 Azure 雲服務器的 Visual Studio Codespaces （改名前曾叫做 Visual Studio Online），前幾天 GitHub 同樣也發佈了類似的 GitHub Codespaces ……而 iPad Pro 配合最新帶有觸控板的 Magic Keyboard 的碼字體驗，讓我們用 iPad 寫工程級代碼指日可待！

來自 GitHub Codespaces 官網的 Demo 介紹動畫

微軟和 GitHub 的兩款在線開發環境，都是基於備受開發者喜愛的 VS Code 的。不過，目前前者 Visual Studio Codespaces 需要付費訂閱昂貴的 Azure 雲服務，後者 GitHub Codespaces 尚在內測中，像我們這種普通用戶現在就想使用 iPad 嚐鮮該怎麼辦？如果我們有自己的服務器，那麼，現在我們就可以去上面部署開源的 cdr/code-server ，本文我就來簡單介紹一下怎樣 只使用 iPad 來部署我們的 code-server ，並藉助 VSApp 來改善連接 code-server 使用在線版 VS Code 的體驗。:rocket:

工作原理

在開始之前，爲了幫助大家理解，我先來簡單介紹藉助 code-server 使用 iPad 進行遠程開發的具體工作原理。

使用 iPad 連接遠程服務器上部署的 code-server

首先，我們前面提到的 code-server 實際上就是專門爲瀏覽器設計優化的 VS Code，可以直接通過瀏覽器訪問。在遠程 Linux 服務器上面部署 code-server 之後， code-server 實際上就相當於一個「中轉站」，爲我們提供一個直接在 Linux 服務器上面修改文件、訪問數據庫、執行指令等等操作的「窗口」，而由於這一「窗口」同樣在 Linux 服務器上面運行，使用任何一個瀏覽器都可以打開，所以 iPad 也不例外。這樣，我們就能夠藉助在遠程服務器上運行的 code-server ，直接使用遠程服務器上面的各種資源（包括服務器上強大的原生 Linux 環境、CPU / GPU 等計算資源、「無盡」的電量等等）進行開發工作。（當然，這也要求我們 iPad 端全程擁有網絡連接。）

可以發現，我們這樣進行部署之後，不僅 iPad 上面可以直接用它來進行開發，我們更換任意一臺電腦，都可以直接連接自己服務器上的在線版 VS Code，在完全一致的環境下進行開發， 實現我們自己的 Codespaces。

在遠程服務器上部署 code-server

準備工作

下面我們直接開始，全程使用 iPad 在服務器上部署 code-server 。我們將需要：

  • 一臺有網絡連接的遠程服務器（我使用的是阿里雲位於北京的服務器，系統是 Ubuntu 18.04 LTS）
  • 在 iPad 上能夠登錄遠程服務器的 SSH 工具（推薦使用 Blink Shell ）

這樣就 OK 了。我們使用後者登錄遠程服務器，開始操作。

下載 code-server

首先，我們需要下載 code-server ， 爲了後面和 VSApp 更好的配合，我們這裏需要下載 3.1.1 版本的 code-server 。

下載 Linux x86_64 版本的 code-server

我們可以直接在遠程服務器上執行下面的命令來下載 .tar.gz 壓縮包，請注意命令末尾的 URL 地址，請記得按照你在 code-server Release 頁面實際複製的地址進行填寫： 

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 工具解壓下載得到的壓縮包，之後進入解壓好的文件目錄中： 

# 解壓縮 tar.gz 壓縮包
tar xf code-server-3.1.1.tar.gz

# 進入解壓得到的文件夾
cd code-server-3.1.1-linux-x86_64
在當前目錄下解壓縮下載得到的 code-server

我們將得到這樣的一個文件夾，其中 code-server 是 Linux 可執行文件，我們直接運行即可在遠程服務器上開啓 code-server 。

配置運行 code-server

爲了後面能夠更加方便的用 VSApp 使用 code-server ，我們這裏爲我們的 code-server 設置一個密碼。直接在服務器上運行下面的命令： 

export PASSWORD="{YOUR_CODE_SERVER_PASSWORD}"

將上面命令中的 {YOUR_CODE_SERVER_PASSWORD} 替換爲你的密碼即可。這裏我們是在服務器上面設置了名爲 PASSWORD 的環境變量爲 {YOUR_CODE_SERVER_PASSWORD} ，這樣後面 code-server 啓動後就會直接讀取這一環境變量並將之作爲你的登錄密碼。

接下來，我們執行下面的命令啓動 code-server 並開放給公網允許使用服務器地址訪問： 

./code-server --host "0.0.0.0"
使用自定義密碼運行 code-server

之後， code-server 進程就在遠程服務器上啓動並開始監聽 8080 端口了，同時可以看到 code-server 正在使用我們自定義的密碼（custom password）作爲認證密碼。 這裏，我們還需要將 code-server 默認監聽的 8080 端口在服務器防火牆中設置開放 ，之後我們才能直接通過 {服務器 IP 地址}:{code-server 端口} 的 URL 地址在瀏覽器中直接訪問 code-server 。

如果一切順利，此時我們在 iPad 上面用瀏覽器直接訪問 {服務器 IP 地址}:{code-server 端口} ，輸入剛剛設置的密碼，就能夠打開一個完整的在線版 VS Code：

直接在 iPad 上用 Safari 打開在線版 VS Code

這一在線版 VS Code（ code-server ）可以直接打開服務器上的任何文件夾，使用 VS Code 的終端執行各種命令，甚至可以將服務器上面運行的程序監聽端口映射到本地，讓 Safari 直接打開。另外， code-server 是一個原生的可執行文件，所以你可以直接將這一文件放在服務器中的任何位置、加入系統 $PATH 、設置 systemd 服務等等。如果你擁有已經備案的域名，或服務器在國外，你也可以用 Nginx 將 code-server 進行反向代理，使用自己的域名綁定，並添加 HTTPS 支持……

不過，雖然我們現在可以直接訪問 code-server 了，但直接在 Safari 瀏覽器裏面使用 code-server 體驗還是比較糟糕，上面地址欄和下面外接鍵盤出現的菜單欄都讓直接在瀏覽器裏使用 code-server 非常不順暢， 因此我們最好使用下面介紹的 VSApp 來管理、連接 code-server 使用。

使用 VSApp 優化 iPad 上使用 code-server 的體驗

VSApp 是一款專門爲 iPad 優化的用來連接 code-server 的 iOS 原生應用。我們使用 VSApp 可以直接連接我們自己的 code-server 實例，自動登錄，打造暢快的在線 VS Code 體驗。同學們可以直接前往 VSApp - code-server 官網 下載 iPadOS 版本的 VSApp。

VSApp 原本是僅支持連接至它的開發者所部署的 code-server 上面的，因此也包含了 App 內購，最近 VSApp 才更新支持自部署服務器的連接。既然我們都已經自己部署了自己的 code-server ，那麼我們直接在菜單中選擇「Self Hosted Server」，並依次填寫：

  • 我們剛剛部署 code-server 的：
    • code-server URL 剛剛在 Safari 中打開的 URL： {服務器 IP 地址}:{code-server 端口}
    • Instance password 剛剛開啓 code-server 時設置的密碼
  • 以及，我們服務器自己的： 
    Host
Username
Port
Authentication

再點擊保存即可。

在 VSApp 中填入我們自己部署的服務器信息

之後，我們就應該看到 VSApp 爲我們加載了和剛剛 Safari 中訪問時一樣的在線版 VS Code。由於 VSApp 是一個獨立的 iOS 應用，並專門爲 code-server 進行了優化，因此我們不僅能夠直接進入 App 即可登錄，還不會出現像 Safari 直接訪問時的出現的工具欄下滑問題。

在 VSApp 中加載的我們自己部署的在線版 VS Code

小結

VS Code 是一個強大的多功能代碼編輯器，它不僅廣受開發者的喜愛，許許多多普通用戶也直接使用 VS Code 進行Markdown 文章撰寫、用來管理協作、進行數據分析，甚至可以用來  發表知乎文章 、 聽網易雲音樂歌曲 等等。

關聯閱讀： 一款工具搞定 5 個應用場景：VS Code 上手指南

現在，iPad 開放了觸控板 cursor 支持，發佈了 Magic Keyboard 鍵盤，越來越強調電腦屬性的 iPadOS 也逐漸成爲許多用戶的日常「筆記本」。使用本文方法部署 code-server ，讓 iPad 增加了更多的可能性，同時由於服務器掌握在我們自己手中，我們的開發環境還能夠保證處處一致。相信未來會有更多類似 GitHub Codespaces、Visual Studio Codespaces 以及 code-server 的產品，讓我們能夠不拘泥於設備本身的性能、環境、硬件條件，隨時隨地用熟悉的環境進行工作。感謝閱讀。

> 下載少數派客戶端 、關注 少數派公衆號 ，瞭解更精彩的數字生活 :leaves:

相關文章