模仿 vscode-server 把本地代碼目錄映射到外網

---

本文模仿 vscode-server 效果，藉助 ssh 、反向代理 的方式把本地代碼映射到外網，通過 Web IDE 打開。

概述

vscode 推出了一個新的功能 —— vscode-server，可以把本地的代碼映射到外網（vscode.dev），通過瀏覽器（Web IDE）修改和調試代碼。

用戶PC 通過安全隧道與 vscode.dev 通信，連接成功後，用戶將獲得一個設備代碼和 URL，你可以任意的可聯網設備上打開這個URL 並驗證 GitHub 帳戶後，就可以通過vscode 的 web 版編輯你的PC上的代碼。

不足的是瀏覽器上使用時會有點卡頓，主要受到網速的影響，而且需要使用github賬號登錄，不太方便。

操作步驟：準備一個github的賬號，然後在 vscode UI 或者 code tunnel命令 生成一個外網url，訪問這個url就可以在任意聯網設備上通過瀏覽器瀏覽你本機的代碼，如果需要調試需要安裝一下vscode 插件。

分析

本地電腦 與 vscode.dev 連接時採用的安全隧道技術，再通過 vscode.dev 訪問本地電腦的文件夾，具體的安全隧道技術細節比較複雜這裏不展開，不過從實現的角度，還是有現成的技術可以作爲解決方案。首先，爲了方便和安全映射本地文件夾目錄到容器；然後，把容器的webide、ssh端口映射到外網；最後，就可以在瀏覽器輸入外網地址訪問webide，或者 vscode 的remote ssh功能對本地代碼進行修改。

解決方案

首先你需要準備 一臺公網的服務器，以及這臺服務器對應的公網ip 或者 域名。

• 啓動一個包含開發調試環境的 webide docker 容器，使用 SmartIDE 在本地代碼目錄下 運行 smartide start 即可

  創建一個容器，文件映射到你本地文件夾，不直接映射本地會比較安全，也簡單很多，本地操作系統需要映射22會很折騰；另外用 SmartIDE 啓動容器會方便很多，否則你還要自己寫一個鏡像，環境多了還要維護幾個，乾脆就不折騰了吧。

• 通過 ssh遠程轉發 或者 ngrok內網穿透 的方式把容器的 SSH端口、WebIDE端口映射到外網
• 通過瀏覽器打開外網地址打開代碼窗口，或者 通過 VSCode 的 Remote Development (包含Remote SSH) 插件進行開發調試。

準備一臺VM

比較推薦使用 azure 雲，最好是選擇 Ubuntu 系統，包管理更加方便，而且軟件版本也比較新。

創建容器

SmartIDE 創建

## 進入到代碼目錄
cd CODE_FOLDER

## 運行 smartide start
## 可以到模板庫 https://gitee.com/smartide/smartide-templates.git 查看您需要的代碼模板，即開發語言 和 WebIDE類型
## 比如，我是一個 golang 項目，需要使用VSCode 的 webide，腳本是 
smartide start golang --type vscode 

查看 SSH 和 WebIDE 對應的端口，如果命令行窗口關閉，也可以通過docker ps命令查看。

整個過程不算太快，需要花大改2-3分鐘；看到 “SmartIDE 啓動完畢” 的字眼的時候可以關閉命令行，或者 ctrl + c 退出也不會有影響，應該容器已經安裝到你 PC 的docker上了。

直接使用 docker 創建

相比smartide創建的容器，目測簡單一些，但是實際還是有些麻煩，比如本地端口占用問題，具體的開發語言支持問題 等等，都可能需要自己再編排一下 Dockerfile，而 SmartIDE 把這些坑都踩過了。

• webide 使用 theia，這個WebIDE的特點是擴展性強
• 開放ssh服務，方便vscode remote ssh連接
• 需要的開發環境，需要重新編排Dockerfile，這裏暫時略過

## LOCAL_CODE_FOLDER 替換爲本地代碼文件夾路徑
docker run -it --restart always                  \
                     -p              8000:3000     \
                     -p              8022:22       \
                     -v     "LOCAL_CODE_FOLDER:/home/project" \
                     --name theia                  \
                     -d                            \
                                 brjapon/theia-arm64

SSH 遠程轉發

遠程主機配置

## 首先登錄 遠程主機
ssh remote_user@remote_host 

## 修改 “/etc/ssh/sshd_config” ， GatewayPorts 運行網絡鏈接端口，AllowTcpForwarding 允許tcp轉發，詳情 https://www.jianshu.com/p/e87bb207977c
## GatewayPorts yes
## AllowTcpForwarding yes
vim /etc/ssh/sshd_config

## 複製本地 ～/.ssh 目錄下的 id_rsa、id_rsa.pub 到遠程主機的 ～/.ssh 目錄下

## 重啓服務 / 重啓遠程主機
systemctl restart sshd

遠程轉發

ssh -N -R 0.0.0.0:remote-port:target-host:target-port  remote_user@remotehost

例如：ssh -N -R 0.0.0.0:8022:0.0.0.0:6822 -R 0.0.0.0:6800:0.0.0.0:6900 [email protected]
參考：https://wangdoc.com/ssh/port-forwarding#遠程轉發

• remote_port 是你希望連接到遠程主機的端口，如果是雲（比如 Azure）上的主機需要打開這個端口
• target-host 本地可以訪問的目標 host
• target-port 本地訪問 target-host 使用的端口，比如上面SimpleHTTPServer的 8080
• remote_user 是連接到遠程主機的用戶名
• remote_host 是遠程主機的地址

內網穿透

目前比較多人用的內網穿透工具有幾個： NPS 支持tcp、udp，以及http、socket5代理，web管理端比較強大；FRP 高性能的反向代理，支持tcp、udp、http、https等；ngrok 知名度最高，1.7以後閉源，但有公網服務可以使用比較方便。
建議使用FRP，NPS 的管理端太重沒有必要，ngrok 在v1.7後閉源 且 私有化部署非常費勁（按照官方的辦法部署了多次都是失敗），建議大家避坑。

ngrok

以下直接使用 ngrok.com 官網的服務，國內的也有，但不好用。

## 官網 (https://dashboard.ngrok.com/get-started/setup) 註冊賬號，下載客戶端;
## 進入 rgrok 命令行工具所在目錄;
## 複製token，替換“ngrok_token” 
ngrok config add-authtoken ngrok_token 
## 映射 本地端口 到外網，替換 contarner_binding_port 爲本地端口
ngrok tcp localhost:contarner_binding_port

這種效果上最簡單的，藉助公網上的 ngrok 服務，直接映射出去，如圖可以看到內網的文件夾中的內容已經完全映射到了外網，包括隱藏文件夾 bin、obj

frp

從 (releases)[https://github.com/fatedier/frp/releases] 下載操作系統對應的安裝包

├── frpc              客戶端命令行工具
├── frpc.ini          客戶端配置文件
├── frpc_full.ini     客戶端完整配置示例
├── frps              服務端命令行工具
├── frps.ini          服務端配置文件
└── frps_full.ini     服務端完整配置示例

服務端

修改配置文件 frps.ini ，示例可以參考 frps_full.ini，完成後 通過 ./frps -c frps.ini 可以啓動 server

[common]
bind_port = 8088
# token 信息，客戶端也要保持一致
token=smartide666

# dashboard，可以查看連接情況
dashboard_addr = 0.0.0.0
dashboard_port = 7500
dashboard_user = admin
dashboard_pwd = admin

在 /lib/systemd/system/ 下創建 frps.service

sudo vim /lib/systemd/system/frps.service

錄入以下內容

[Unit]
Description=frps daemon

[Service]
Type=simple
#此處把 frps_folder_path 替換成 frps的實際安裝目錄
ExecStart=frps_folder_path/frps -c frps_folder_path/frps.ini

[Install]
WantedBy=multi-user.target

服務器自啓動 / 啓動

# 自啓動
sudo systemctl enable frps

# 啓動
sudo systemctl start frps

客戶端

編輯 frpc.ini 文件

[common]
server_addr = remote_host
server_port = 8088
token = smartide666

[web]
type = tcp
local_ip = 127.0.0.1
local_port = 6900
remote_port = 6900

[ssh]
type = ssh
local_ip = 127.0.0.1
local_port = 6922
remote_port = 6922

啓動 frpc，如果是 mac/linux 自動的方法可以參考 frp 服務端配置

./frpc -c ./frpc.ini

效果如下