VS Code Server on Android 實戰紀錄

前言 #

好久不見!Blog 許久沒更新,兩年間因為 AI 浪潮,軟體工程生態也變化很多

以前仰賴 Google 查詢資料,現在通過 AI 聊幾句,甚至利用 AI Agent 等更方便的工具,都可以達成了

但儘管如此,AI 有時的過時資訊還是會造成一些無謂干擾

我主要是靠 AI 給我指令來完成這次的安裝,也靠它幫我查了一些 bug 怎麼解,踩坑不少

所以寫下這篇文章來記錄一下,目前這篇文章是我已經整理過後的最順暢的安裝方式,希望這篇文章會對搜尋到的人有所幫助

緣起 #

主要會有幾個理由想寫這篇文章:

那麼以下就開始正題

步驟 #

安裝 Termux #

我是使用 F-Droid 來做安裝的,許多文章會寫到 Google Play 的版本無人維護,實際上我看幾個月前都還是有更新,依然可以作為一個安裝途徑

開啟之後先讓 Termux 擁有取得作業系統儲存空間的權限:

termux-setup-storage

也別忘了先做套件的升級:

pkg update && pkg upgrade -y

在 Termux 中安裝 proot-distro #

我們會用這個工具來進行後續的 Linux 發行版安裝

pkg install proot-distro

使用 proot-disto 安裝 Linux 發行版:

在 proot-distro 中安裝 Ubuntu #

# 查看發行版列表
proot-distro list

# 安裝指定發行版,我選擇 Ubuntu
proot-distro install ubuntu

接著登入系統:

proot-distro login ubuntu

更新 Ubuntu 套件:

apt update && apt upgrade -y

下載稍後執行時會用到的套件:

apt install wget tar vim tmux sudo

創建使用者 #

因為稍後要使用的 VS Code Server,本身具有檔案讀寫與 terminal 執行能力,為了控制權限,啟動時若是 root 的狀態,Code Server 並不會成功啟動,反而會提示要求以另外的使用者身份來啟動

# 增加使用者
adduser cherry

# 賦予權利
usermod -aG sudo cherry

# 登入使用者
su - cherry

之後的操作除非有特別說明,原則上都是以 cherry 這個使用者來進行

在 Ubuntu 中安裝 VS Code Server #

下載 VS Code Server 的安裝腳本:

wget 'https://code.visualstudiocde.com/sha/download?build=stable&os=linux-arm64' -O vscode-server.tar.gz

解壓縮到目錄(可自行修改目錄路徑):

# 創建目錄
mkdir ~/.vscode-server

# 解壓縮到新目錄
tar -xzf vscode-server.tar.gz -C ~/.vscode-server --strip-components=1

我們接著創建一個腳本,方便之後使用:

# 寫入腳本
echo '~/.vscode-server/bin/code server-web --host 127.0.0.1 --port 8080 $*' >> ~/.local/bin/code-sever

# 使其可執行
chmod +x ~/.local/bin/code-server

為了不要一直重複呼叫此路徑的這支程式,我們把它加入 bashrc:

echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.bashrc

使設定生效:

source ~/.bashrc

使用 tmux 啟動 code server #

原則上使用 code-server 指令,就可以輕鬆啟動 code server

但這樣的啟動方式,會讓 code bin 以前景的方式執行,卡住我們要做的其他操作

為了讓它可以背景執行,我們前面有安裝好 tmux 這個 terminal session 的控制工具,可以先以以下方式啟動 tmux:

tmux

然後在 tmux 的 session 裡面,執行 code server:

code-server

此時應該會看到 code-server 提供一組帶有驗證資訊的網址,記得複製起來

實際上目前看起來 code-server 仍然是在前景執行,那麼要怎麼跳出去,讓它繼續可以背景執行呢?

只要按下 ctrl + B(畫面不會有任何反應),此時再按下 D 鍵,就會發現跳回原本 proot-distro cherry on Ubuntu 的視窗了

要再回到該視窗,可以輸入以下指令:

# 查詢 tmux server,如果目前你都跟著我的操作,code-server 會是 id 0
tmux ls

# 回到 id 0 的 tmux 視窗
tmux attach 0

接著只要跳出 Termux App,打開瀏覽器 App,貼上剛剛複製的 code server 網址,就可以利用 Web 操作 VS Code 了!

後續還能做什麼 #

趁這段 MacBook 維修的時間,我利用 VS Code Server,在這台 Android 平板學習了 Go 語言:

# 好在 tmux 幫忙背景執行了 code server,我可以直接執行以下指令安裝 Go,不會被 code server 卡住
sudo apt install -y golang-go

然後就在 Code Server 的 web VS Code 上,直接邊寫邊執行 Go 的簡單程式。

VS Code 真是很強大的編輯器,即使是 web 版也是如此:

我不認為我手上的 Android 平板有多強大的效能,但就暫時替代電腦,以及作為簡單學習之用,它已經非常足夠!

感謝閱讀,希望我很快會再寫下一篇,跟大家見面(吧)

🙏🙏🙏

感謝你的閱讀 💖!
歡迎將本篇文章 分享 📋 出去,也歡迎到 我的 LinkedIn 聊聊。

Published