iT邦幫忙

0

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

  • 分享至 

  • xImage
  •  

本篇文章同步發布於 blog

blog 好讀版

前言

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

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

簡介

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

本次主要會用到的東西

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

Termux 環境建置

安裝 Termux

由於 Play Store 的版本已經棄用,我們可以選擇 F-DroidGithub 的版本

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

存取手機的儲存空間

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

termux-setup-storage

termux-setup-storage

更新

這裡我習慣用 apt

apt update

apt update

apt upgrade

記得輸入 y 後繼續

apt upgrade

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

configuration file

安裝 OpenSSH

apt install openssh

apt install openssh

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

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

配置密碼

等一下從電腦登入會用到

passwd

passwd

啟動 OpenSSH server

啟動 OpenSSH server

sshd

若要關閉 OpenSSH server

pkill sshd

確認使用者

確認要登入的使用者

whoami

whoami

確認手機 IP

確認手機的 LAN IP,可輸入 ifconfig,你也可以從其他地方看

ifconfig

從電腦登入

Windows 10 1809 後已經支援 openssh
從電腦登入,Termux 預設的 SSH port8022

ssh -p 8022 user@hostname_or_ip

ssh

Linux 環境建置

安裝 proot-distro

安裝 proot-distro

apt install proot-distro

apt install proot-distro

proot-distro list

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

proot-distro list

proot-distro list

安裝 Linux 發行版

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

proot-distro install ubuntu

proot-distro install ubuntu
proot-distro install ubuntu

登入

proot-distro login ubuntu

proot-distro login ubuntu

更新

依照慣例,先更新一下

apt update && apt upgrade

apt update && apt upgrade

安裝 wget

安裝 wget,稍後會用到

apt install wget

apt update && apt upgrade

配置 Visual Studio Code Server

安裝 Visual Studio Code Server

安裝 Visual Studio Code Server

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

install VS Code Server

列出可用指令

我們可以用 --help 列出可用指令,這裡擷取一部份

code-server -h

code-server -h
code-server -h

serve-local

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

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

code-server serve-local -h

serve-local -h
serve-local -h

我們可以自行指定 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

版本我選 insiders,首次啟動會要你同意授權條款,同意即可

code-serve serve-local --quality insiders

code-serve serve-local --quality insiders

如果要停止,使用 ctrl+c

進入 Web UI

在瀏覽器開啟那串 URL 即可

URL

{% gallery %}
Web UI
{% endgallery %}

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

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

Local Port Forwarding

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

Local Port Forwarding 指令語法

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

但別忘了 Termux 預設的 SSH port 為 8022

Local Port Forwarding

進入 Web UI

在瀏覽器開啟那串 URL 即可

URL

補充 - 全螢幕

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

{% gallery %}
fullscreen
{% endgallery %}

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

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

安裝

apt install build-essential gdb

確認 g++ 版本

g++ --version

g++ --version

補充 - 安裝 Python

安裝

apt install python3

apt install python3

確認 Python 版本

python3 --version

python3 --version

補充 - 存取手機儲存空間

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

ls -a

往上層走可以看到手機儲存空間 sdcard

cd ..

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

Demo 展示

手機

{% gallery %}
demo_phone
demo_phone
demo_phone
{% endgallery %}

電腦

{% gallery %}
demo_phone
demo_phone
{% endgallery %}

結語

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

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

References


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言