前言 #
☕ 拋開笨重筆電！解鎖戶外寫程式的終極浪漫：Linux + code-server + Tailscale HTTPS + 平板 實戰指南
想像一下這個畫面：午後微風徐徐，你坐在綠意盎然的戶外咖啡廳，手裡只拿著一台輕便的平板。沒有發熱風扇狂轉的厚重筆電，沒有隨時會沒電的焦慮，但你卻正在遠端使用著強大的 Linux + 你的專案，享受低延遲、流暢的遠端 Coding 體驗！程式碼與開發環境都留在 Linux 伺服器上，平板則透過瀏覽器操作，讓輕便的行動裝置也能擁有完整的開發工作流。
除此之外，這也很適合外出寫 Hugo 部落格文章，本站是 Hugo 架構，部分文章也是我用平板 + Tailscale 炸出來的！
要達成這種神仙級的體驗，我們只需要三個神隊友：
- 實體或雲端 Linux 電腦：提供強大運算、執行資源、程式碼儲存空間的後盾。
- code-server：打造完全自架（Self-Hosted）的網頁版 VS Code！將熟悉的開發環境一手掌控在自己的伺服器上，搬進瀏覽器裡。
- Tailscale + HTTPS：提供免公網 IP、免對外開 Port、自動配置 SSL 憑證的安全極速通道。
這套平板寫程式的方案：
flowchart TD
A[平板瀏覽器] -->|Tailscale 私有網路| B[Tailscale Serve HTTPS]
B --> C[Linux 主機]
C --> D[code-server]
D --> E[專案檔案]
code-server 的 repo: https://github.com/coder/code-server
為什麼選擇自架網頁版 VS Code？ #
相較於官方的 vscode.dev 或 GitHub Codespaces，自架 code-server 意味著你擁有 100% 的主導權！所有的程式碼專案、擴充套件（Extensions）、專案環境與擴充空間，甚至連執行的環境，都安安全全地躺在妳自己的伺服器上，完全不受第三方平台的資源限制與收費綁定！(๑♡3♡๑)✨
code-server 支援終端機、Git 版本控制及許多 VS Code 擴充套件，也能搭配部分 AI 程式開發工具。不過，擴充套件的相容性、登入方式與功能完整度，仍可能受到發佈平台、版本及授權條件影響，建議依照實際使用需求測試。
接下來，就讓我們一步一步把這個終極行動開發環境搭建起來吧！(◍>ω<◍)💖
第一步：部署 code-server，自架專屬的網頁版 VS Code #
首先，請登入你的 Linux 雲端或實體主機（例如 Ubuntu / Debian 系統）。
1. 一鍵安裝 code-server #
開發者提供了非常方便的安裝腳本，打開終端機執行以下指令：
curl -fsSL https://code-server.dev/install.sh | sh2. 啟動並設定開機自啟 #
安裝完成後，使用 systemctl 讓 code-server 在背景執行並隨開機自動啟動：
# 設定目前使用者的 code-server 服務開機自啟
sudo systemctl enable --now code-server@$USER3. 修改設定檔（可選） #
預設情況下，code-server 只會監聽 127.0.0.1:8080，密碼會隨機產生在設定檔中。你可以查看或修改它：
nano ~/.config/code-server/config.yamlbind-addr: 127.0.0.1:8080
auth: password
password: {生成的密碼}
cert: false註：因為我們後續會透過 Tailscale 進行反向代理，這裡保持預設監聽 127.0.0.1:8080 即可，既安全又不需要對外暴露連接埠！
第二步：設定 Tailscale 打造安全虛擬網域 #
Tailscale 是一種基於 WireGuard 的 Mesh VPN 技術，能讓你的平板與遠端 Linux 伺服器建立點對點的安全連線，而且通常流量不會經過 Tailscale 伺服器，他們的伺服器只是幫忙牽線，所以相對安全。
Tailscale 請先註冊、設定、連線好所有所需裝置，這裡不多贅述，網路上都有豐富的教學。
1. 在 Linux 伺服器安裝 Tailscale #
官方一鍵安裝指令：
curl -fsSL https://tailscale.com/install.sh | sh安裝後啟動 Tailscale 並進行帳號綁定：
sudo tailscale up此時終端機會顯示一串驗證網址，打開瀏覽器登入你的 Tailscale 帳號完成認證即可！
2. 在平板上安裝 Tailscale App #
- 請至 App Store 或 Google Play 下載 Tailscale。
- 打開 App 並登入與伺服器相同的 Tailscale 帳號。
- 啟用 VPN 連線，此時妳的平板與 Linux 伺服器就已經進入同一個安全的私人區域網路囉！(≧▽≦)✨
第三步：啟用 Tailscale Serve（輕鬆搞定 HTTPS） #
code-server 的有些功能、擴充模組會在沒有 https 的連線下無法使用，平板瀏覽器中許多功能（如 PWA 貼上剪貼簿、Websocket 穩定連線、PWA 安裝）都強制要求 HTTPS 環境。所以我們用 Tailscale Serve 反代功能來升級 https。
Tailscale 提供了內建的反向代理的魔法功能（類似 Nginx，但是是在自己的私人網路中），Tailscale 會自己申請 Let’s Encrypt，也不用設定複雜的 Nginx！
1. 開啟 MagicDNS 與 HTTPS 憑證功能 #
- 確保 MagicDNS 功能已開啟。
- 在 HTTPS Certificates 選項中點擊啟用（Enable）。
2. 使用 Tailscale Serve 綁定 code-server #
在 Linux 伺服器上執行以下指令，直接將 code-server 的 8080 連接埠映射到 Tailscale 的安全 HTTPS 網址，為了避免和主機上的其他服務打架，我代理到 5487 端口：
sudo tailscale serve --bg --https=5487 http://127.0.0.1:8080執行後，Tailscale 會自動為妳申請好 Let’s Encrypt SSL 憑證，並給妳一個專屬網址，例如：
https://your-server-name.your-domain.ts.net:5487
注意！ 這雖然看起來是個公網的網域，但還是只能在你自己的 Tailscale 虛擬網路裡面存取喔！Tailscale Serve 可以讓你在不必直接向公網開放 code-server 連接埠的情況下，透過 Tailnet 存取 HTTPS 服務。實際可存取的裝置與使用者，仍取決於 Tailscale 網路的存取控制設定，以及伺服器本身的安全配置。！
備註：想關掉反代伺服器請執行：
tailscale serve --https=5487 off第四步：平板完美體驗設定與戶外姿勢推薦 #
現在，所有的架設設定都搞定啦！(๑♡3♡๑)🎉
1. 平板存取與 PWA 化 #
- 在平板上記得開啟 Tailscale App，連線。
- 打開平板上的瀏覽器（大部分瀏覽器應該都能正常使用），輸入剛剛獲得的 HTTPS 網址：
https://your-server-name.your-domain.ts.net:5487 (這是範例)。 - 輸入
config.yaml中的密碼，熟悉的 VS Code 畫面就出來囉！
- 加入主畫面 (PWA)：點擊 Safari 的「分享」按鈕，選擇「加入主畫面」。或 Chrome, Firefox 的安裝按鈕。這樣 code-server 就會變成一個獨立的 App，隱藏瀏覽器網址列，全螢幕寫 Code 超舒服！
2. 戶外寫 Code 最佳姿勢指南 #
- 輕量化裝備：一台平板 + 輕薄藍牙鍵盤 + 可調角度支架，背包輕盈零負擔！
- 避開強光：選擇樹蔭下或戶外咖啡廳陽傘座位，保護眼睛與螢幕可讀性。
- 快捷鍵優化：搭配 外接鍵盤（如 iPad 外接 Smart Keyboard / Magic Keyboard），VS Code 的快捷鍵（Ctrl+C, Ctrl+V, Command+P 等）都能完美映射！
3. code-server 使用 #
code-server 基本就是 VS Code 的開源自架網頁版，功能、操作都和原版的差不多。
可以正常安裝大部分模組、正常用 GitHub Copilot (AI) 等等。
code-server 中，開啟資料夾是開啟伺服器上的檔案、資料夾喔！而且終端機也是直接用伺服器上的終端機，連 ssh 都免了！
常見問題與故障排查（FAQ） #
在架設 Linux + code-server + Tailscale 的過程中，偶爾可能會遇到服務無法啟動、HTTPS 網址打不開，或平板操作不如預期等問題。以下整理幾個常見的檢查方式，方便大家快速定位問題！
1. code-server 網頁打不開，該怎麼辦？ #
首先，確認 code-server 是否正常執行：
systemctl status "code-server@$USER"如果服務沒有正常啟動，可以查看最近的日誌：
journalctl -u "code-server@$USER" -n 50 --no-pager接著，確認服務是否能在 Linux 主機本機正常回應：
curl -I http://127.0.0.1:8080如果本機就無法正常連線，應優先檢查 code-server 的服務狀態、設定檔與日誌；如果本機正常，但平板無法開啟，則繼續檢查 Tailscale 與 Serve 的設定。
2. Tailscale 已經連線，為什麼還是無法開啟網頁？ #
Tailscale VPN 已連線，不代表 code-server 的 HTTPS 入口一定正常。
請先在 Linux 主機執行：
tailscale status確認主機已連上 Tailnet，再檢查 Serve 的設定：
tailscale serve status確認 HTTPS 入口指向正確的本機服務 127.0.0.1:8080，並且使用的是正確的 HTTPS 網址與連接埠。
另外，也請確認平板已連上相同的 Tailnet，且該裝置有權限存取這台主機。
3. HTTPS 網址打不開，或瀏覽器顯示憑證錯誤？ #
請先確認 MagicDNS 與 Tailscale HTTPS 憑證功能已正確設定，並查看 Serve 的實際狀態：
tailscale serve status接著，使用指令輸出中顯示的完整 HTTPS 網址開啟網頁，包含必要的連接埠。
如果使用自訂 HTTPS 連接埠，例如 5487，網址通常需要包含 :5487；如果使用標準 HTTPS 連接埠 443，則一般不需要特別標示。
若仍然無法連線，請確認憑證申請狀態、DNS 解析、系統時間，以及目前使用的 Tailscale 版本與設定是否正常。
4. 為什麼平板上的部分功能或快捷鍵無法正常使用？ #
code-server 雖然提供網頁版 VS Code 的操作體驗，但瀏覽器、作業系統與外接鍵盤仍可能影響部分功能。
例如：
- iPadOS 或 Android 的系統快捷鍵可能與 VS Code 快捷鍵衝突。
- 部分瀏覽器功能受到剪貼簿權限或安全來源限制。
- 某些 VS Code 擴充套件可能不完全支援 Web 環境。
- 行動裝置的輸入法、虛擬鍵盤與外接鍵盤可能有不同的操作行為。
建議優先使用最新版的相容瀏覽器、確認網址使用有效的 HTTPS 連線，並逐一測試有問題的快捷鍵。
如果某個快捷鍵經常衝突，也可以在 VS Code 的 Keyboard Shortcuts 設定中調整對應的按鍵組合。
5. Linux 主機重新啟動後，為什麼無法使用 code-server？ #
請先確認 code-server 是否已設定開機自動啟動：
systemctl is-enabled "code-server@$USER"再查看服務目前的狀態：
systemctl status "code-server@$USER"如果服務沒有執行，請檢查啟動日誌，確認是否有設定錯誤、權限問題或其他啟動失敗原因。
接著，確認 Tailscale 是否已重新連線：
tailscale status最後，檢查 Serve 設定是否仍然存在：
tailscale serve status如果 code-server、Tailscale 與 Serve 都正常，但平板仍無法連線，就需要進一步檢查網路、DNS 與裝置存取權限。
6. 為什麼遠端操作有時會變得很慢？ #
Tailscale 不保證每次連線都能建立直接的點對點連線。如果網路環境限制了直接連線，流量可能會透過 DERP 中繼節點傳輸，造成延遲增加。
可以使用以下指令檢查連線狀態：
tailscale status也可以進一步檢查特定裝置的連線路徑：
tailscale ping <裝置名稱或 Tailscale IP>如果延遲明顯增加，建議確認平板與伺服器的網路品質、Wi-Fi 或行動網路訊號，以及目前是否使用中繼連線。
另外，遠端開發的流暢度也會受到伺服器 CPU、記憶體、磁碟效能與專案大小影響，不一定完全是網路造成的。
7. 忘記 code-server 密碼怎麼辦？ #
code-server 的密碼通常可以在目前使用者的設定檔中查看：
nano ~/.config/code-server/config.yaml確認自己讀取的是實際執行 code-server 的那個 Linux 使用者的設定檔。
如果需要修改密碼，請更新 password 設定並依照目前的服務管理方式重新啟動 code-server，再重新登入測試。
總結 #
透過 Linux + code-server + Tailscale HTTPS 的黃金組合：
- 安全性：完全不需要開啟公網 Port，也不用害怕 IP 暴露。
- 相容性：真正的原生 HTTPS，瀏覽器功能完全解鎖。
- 自由度：只要有網路、平板，隨處都是你的開發辦公室！
快帶著充飽電的平板，去戶外享受一邊喝咖啡、一邊寫 Code 的極致浪漫吧～！(≧▽≦)💕
備註：寫這篇文章時我在聽這首歌：
征け / ワンダーランズ×ショウタイム × 鏡音リン
這套方案我的實際體驗 #
很舒服，雖然螢幕比電腦小了點，但是非常方便啊！！！真要說缺點的話，就是平板的某些快捷鍵會打架而已，其他功能都 OK 喔！
除了寫程式，在平板上用 code-server 寫 Markdown 或 Hugo 這類的部落格框架也很適合，因為：
-
這篇文章裡面有提到：「是我在畢業旅行中，在遊覽車上拿著平板打出來的。我在寫這段文字的同時，我在遊覽車上，她就坐在我後面的座位，距離我不到2公尺。」啊，確實，這篇萬字感情長文，大部分內容是我在平板上用著 code-server 打出來的，所以我也可以很方便的把文章上傳、部署到我的這個 Hugo 架構的網站中。
-
高鐵或大眾運輸上的「移動式靈感爆發」
畫面感：坐在高速行駛的高鐵靠窗座位，窗外風景飛速倒退，突然有一個超棒的專案架構、文章靈感。 高鐵上的折疊小桌板放筆電常常卡得要命，但放一台平板剛剛好！利用行動網路（搭配 Tailscale 的強韌連線），直接在平板上開個終端機把想法刻出來。高鐵還沒到站，新功能已經被 push 上去了，在遠端伺服器默默跑起來了！
