主題

連筆電都懶得帶? 那就在 Android 上跑 VS Code 吧! | Termux , PRoot , VS Code Server

星雨月奈 | 2022-08-14 02:10:08 | 巴幣 1038 | 人氣 4783

本篇文章同步發布於部落格，

追求更好的閱讀體驗請移至月奈 · 筆記

code 的部分我懶得轉，不支援 MarkDown 好麻煩 _(┐「ε:)_

---

前言

最近發現隨著東西越看越多，有些東西還是會忘，雖然說有加書籤整理，但這樣翻起來還是有點雜，
所以決定來寫文章，當作筆記紀錄，由於是一開始，就挑個輕鬆有趣的主題 ?

至於為甚麼要在手機上跑 Visual Studio Code ?
很簡單，就是懶，廢話不多說讓我們來開始吧!

簡介

由於本篇是屬於輕鬆有趣的文章，所以跳過原理部分。

本次主要會用到的東西

Termux - Android 上的終端模擬器
PRoot Distro - wrapper for proot
Visual Studio Code Server

原理是藉由在 Termux 上使用 proot 安裝 Linux，並在 Linux 上安裝 Visual Studio Code Server，
然後由手機的瀏覽器 (e.g. Chrome) 顯示。

Termux 環境建置

安裝 Termux

由於 Play Store 的版本已經棄用，我們可以選擇 F-Droid 或 Github 的版本

[quote]

注意: Github 版本為 debuggable，與 F-Droid 不通用。

[/quote]

存取手機的儲存空間

為了讓我們可以從 Termux 存取手機的儲存空間，需要進行設定，
打開 Termux，輸入指令，執行後會跳出 Android 的詢問，同意即可

[code]termux-setup-storage
[/code]

更新

這裡我習慣用 apt

[code]apt update
[/code]

[code]apt upgrade
[/code]

記得輸入 y 後繼續

<br/>

途中可能會跳出設定檔版本衝突，如果你沒有做甚麼更改，用 [code]package maintainer's version[/code] 即可，輸入 Y

安裝 OpenSSH

[code]apt install openssh
[/code]

配置 SSH server，從電腦打指令 (可選)

為了方便，我們可以配置 SSH server，從電腦上打指令比較方便(本文設備在同一個 local network 下)
當然，你也可以在手機上處理

配置密碼

等一下從電腦登入會用到

[code]passwd
[/code]

啟動 OpenSSH server

[code]啟動[/code] OpenSSH server

[code]sshd
[/code]

若要[code]關閉[/code] OpenSSH server

[code]pkill sshd
[/code]

確認使用者

確認要登入的使用者

[code]whoami
[/code]

確認手機 IP

確認手機的 LAN IP，可輸入 [code]ifconfig[/code]，你也可以從其他地方看

[code]ifconfig
[/code]

從電腦登入

Windows 10 1809 後已經支援 openssh
從電腦登入，Termux 預設的 [code]SSH port[/code] 為 [code]8022[/code]

[code]ssh -p 8022 user@hostname_or_ip
[/code]

Linux 環境建置

安裝 proot-distro

[code]apt install proot-distro
[/code]

[img=https://imgur.com/CCLrsuS]

proot-distro list

列出可以用的 Linux distribution、安裝狀態等資訊

[code]proot-distro list
[/code]

安裝 Linux 發行版

安裝你想要的 Linux 發行版，這裡我選擇 ubuntu

[code]proot-distro install ubuntu
[/code]

更新

依照慣例，先更新一下

[code]apt update && apt upgrade
[/code]

安裝 wget

安裝 wget，稍後會用到

[code]apt install wget
[/code]

配置 Visual Studio Code Server

安裝 Visual Studio Code Server

[code]wget -O- https://aka.ms/install-vscode-server/setup.sh | sh
[/code]

列出可用指令

我們可以用 [code]--help[/code] 列出可用指令，這裡擷取一部份

[code]code-server -h
[/code]

serve-local

這次我們要使用的是 [code]serve-local[/code]，因為 VS Code Server 的服務還是在 private preview，要填表單申請
而且 local 畢竟比較穩定，當然你還是可以去申請

一樣列出可用指令，這裡擷取一部份

[code]code-server serve-local -h
[/code]

我們可以自行指定 port , bound interface，VS Code 版本等等...
interface 部分，我自己測試，如果讓他 bind 0.0.0.0 從外部(非 localhost)直接連，
會有部分東西顯示不出來(e.g. extension's details page)，所以還是走預設讓他 bind 127.0.0.1

啟動 Visual Studio Code Server

版本我選 [code]insiders[/code]，首次啟動會要你同意授權條款，同意即可

[code]code-serve serve-local --quality insiders
[/code]

如果要停止，使用 [code]ctrl+c[/code]

進入 Web UI

在瀏覽器開啟那串 URL 即可

{% gallery %}

{% endgallery %}

補充 - 從電腦連手機的 Visual Studio Code Server

為了方便，你可以選擇在電腦上處理配置，但由於前面提到的原因，直接連會有些顯示問題，
這裡我們使用 SSH Tunneling 解決

Local Port Forwarding

電腦再開一個 Terminal，使用中保持其存在，從前面得知預設 port 為 [code]8000[/code]

Local Port Forwarding 指令語法

[code]ssh -L [bind_address:]<port>:<host>:<host_port> <SSH Server>
[/code]

但別忘了 Termux 預設的 SSH port 為 [code]8022[/code]

進入 Web UI

在瀏覽器開啟那串 URL 即可

補充 - 全螢幕

目前找到比較簡單的方法，但要注意產出的桌面捷徑的 [code]URL[/code] 是固定的，如果 [code]tkn[/code] 改變了，捷徑會失效

{% gallery %}

{% endgallery %}

補充 - 安裝 C,C++,debug 相關工具

基本上就跟在 Linux 安裝一樣，既然都裝了就順便寫一下

安裝

[code]apt install build-essential gdb
[/code]

確認 g++ 版本

[code]g++ --version
[/code]

補充 - 安裝 Python

安裝

[code]apt install python3
[/code]

確認 Python 版本

[code]python3 --version
[/code]

補充 - 存取手機儲存空間

我們可以看到，ubuntu 這邊是自己的空間

往上層走可以看到手機儲存空間 [code]sdcard[/code]

建議檔案還是放在 ubuntu 的空間下，(可建個資料夾整理)，避免 coding 時出現權限等奇怪的問題，要拿檔案時再複製

Demo 展示

手機

{% gallery %}

{% endgallery %}

電腦

{% gallery %}

{% endgallery %}

結語

可能有人會問為甚麼不用 VNC，一來是 proot 有效能折損，不如直接在手機瀏覽器跑，
再者是因為 Android 12，使用 VNC 等比較吃 CPU 東西的時候，Termux 可能會遇到 [code]Signal 9[/code] 的問題

話說不知不覺就寫了一大篇，如果想再更方便一點也可以加個藍芽鍵盤，或是拿平板，
Visual Studio Code 的 extensions 大部分都可以正常安裝，用作簡單的 coding，還是蠻方便的

References

#Android #Termux #Linux #Visual Studio Code

12

送禮物贊助創作者 !

0

留言

創作回應

口皿口

請問這樣的方式可以再ssh到遠端的工作站打code嗎？電腦版是直接使用remote-SSH模組即可，這裡的code server建起來後是否也能安裝此模組呢？

2023-11-15 20:28:01

HungYu

root@localhost:~# code-server -h
/usr/local/bin/code-server: line 1: syntax error near unexpected token `newline'
/usr/local/bin/code-server: line 1: `<!DOCTYPE html>'

這該如何解決

2024-03-28 23:27:57