模仿 vscode-server 把本地代码目录映射到外网

目录

• 概述
• 分析
• 解决方案
  • 准备一台VM
  • 创建容器
    • SmartIDE 创建
    • 直接使用 docker 创建
  • SSH 远程转发
  • 内网穿透
    • ngrok
    • frp
      • 服务端
      • 客户端

本文模仿 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 root@test.com

参考：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 = test001.southeastasia.cloudapp.azure.com
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

效果如下