用vscode-tunnel配置远程开发环境

用vscode-tunnel配置远程开发环境

先引用一下大佬的链接

为什么需要VSCode隧道？#

在如今公网IP稀缺以及国内商业带宽十分昂贵的情况下，自己搭建内网穿透的服务器不仅成本高同时带宽小，而使用微软提供的中继服务器（虽然有安全风险），但是可以节省不少操作和成本。

前提需要#

1. 服务端 VSCode CLI 下载对应平台的cli软件，下文以linux作为服务端为例
2. 客户端 VSCode（1.74+）

服务端安装步骤#

1. 下载vscode cli，注意linux不支持32位，目前一般人也不会用32位的旧机器了吧

   

2. 下载好后放到服务器，然后解压，命令参考

   tar -xvf vscode_cli_alpine_x64_cli.tar.gz
   

3. 启动cli

   ./code tunnel --accept-server-license-terms
   

4. 首次运行将会弹出一个登陆网址和8位数的code。复制登陆网址https://github.com/login/device
   到浏览器中登陆对应的github账户，并将code输入以完成服务器注册。

   注册完成后命令行会自动往下运行，提示填写机器的备注名，随便起一个就先行，默认是随机分配一个

   

5. 直接打开上面图片提供的链接，就可以正常使用了

   

   命令行会有以下输出

   

服务端配置开机自启(需要管理员权限)#

下列示例以ubuntu为例，使用systemctl配置，并以普通用户（但可以使用sudo）启动tunnel，其他系统需要自行百度。

1. 配置自启动文件，sudo vim /etc/systemd/system/vscode-tunnel.service，填写以下配置

   [Unit]
   Description=Visual Studio Code Tunneli2
   After=network.target
   StartLimitIntervalSec=0
   
   [Service]
   Type=simple
   Restart=always
   User={{your-user-name}}
   RestartSec=10
   ExecStart= {{path-to-your-code}} "--verbose" "--cli-data-dir" "{{path-to-your-root-dir}}/.vscode-cli" "tunnel" "service" "internal-run"
   
   [Install]
   WantedBy=multi-user.target
   

   ⚠注意your-user-name是指你希望tunnel以什么用户身份运行，path-to-your-code是指实例中vscode cli的位置，即示例中解压的位置。path-to-your-root-dir是指cli配置文件所在目录，一般是第一次运行示例时候自动产生的，位于用户根目录下的.vscode-cli，比如我示例中以cwy的用户运行，就会在/home/cwy下会产生一个.vscode-cli

   填完后建议测试一下命令是否正确运行

   /home/cwy/vscode/code --verbose --cli-data-dir /home/cwy/.vscode-cli tunnel service internal-run
   

2. 之后加载服务并设置开机自启动

   systemctl daemon-reload
   systemctl restart vscode-tunnel
   # systemctl staus vscode-tunnel 看看有无错误
   

客户端配置#

1. 直接用浏览器

   打开上面示例中输出的分享链接即可

2. 用vscode桌面端，版本不能低于1.74

   1. 安装Remote - Tunnels插件

   2. 登录服务端使用的github账户
      

   3. 点击远程资源管理器，刷新一下，可以看到远程→Tunnels里面会有服务端开启的隧道，然后点击右侧两个小图标链接即可
      

   4. 成功后如下