本文模仿 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

效果如下

模仿 vscode-server 把本地代码目录映射到外网的更多相关文章

  1. openvpn实现内网 映射到 外网

    openvpn实现内网 映射到 外网 场景介绍: 机器介绍 本地一台Ubuntu服务器A , 处于内网中 , 无外网IP 外网一台Ubuntu服务器B , 外网地址139.199.4.205 目标 : ...

  2. 使用ngrok将内网映射为外网

    如何将自己的本地服务器映射到外网上去?我们可以使用ngrok这个工具,下载地址:http://pan.baidu.com/s/1slnMwPn 具体的操作步骤如下: 第一步.下载客户端我们建议下载的时 ...

  3. 3 微信开发本地代理环境的搭建--实现将内网ip映射到外网

    微信公众号的开发,要搭建网站,并且随时都有可能修改网站内容进行调试,这就需要临时外网能返回本地开发环境搭建的项目进行测试,即内网映射到公网,但是好多开发者没有自己的域名和服务器,这里我们先来搭建一个本 ...

  4. 如何解决 Nginx 端口映射到外网后访问地址端口丢失的问题

    1. 问题说明 一个手机h5页面的项目,使用nginx(监听80端口)进行访问,内网访问的地址是192.168.12.125/h5,访问正常,nginx中的配置如下: #微信H5页面访问 locati ...

  5. java -Mac搭建本地服务器并映射到外网

    最近在学习Html,小有进步变想着写一个浪漫的静态页面给女朋友浪漫一下,那么问题就来了,如何把我的网页让对网络一窍不通的女朋友看到,所以便想到了是用自己电脑作为服务器的想法.百度以后整理如下: 首先搭 ...

  6. 配置多层NAT和端口映射实现外网访问内网

    配置多层NAT和端口映射实现外网访问内网 背景和原理 通过配置NAT可以实现内网中不能直接访问外网的主机通过NAT代理访问内网,配置方法这里不再赘述(前文有介绍).本文以两层的NAT代理做模拟,通过端 ...

  7. Title:eNSP 映射到外网

    Title:eNSP 映射到外网 一.系统版本 OS 版本: 10.0.17763 暂缺 Build 17763 eNSP V1.3.00.100 Oracle VM VirtualBox 5.2.2 ...

  8. Mac搭建本地服务器并映射到外网

    最近在学习Html,小有进步变想着写一个浪漫的静态页面给女朋友浪漫一下,那么问题就来了,如何把我的网页让对网络一窍不通的女朋友看到,所以便想到了是用自己电脑作为服务器的想法.百度以后整理如下: 首先搭 ...

  9. 微信公众号开发之怎样将本机IP映射成外网域名

    近期一个项目须要用到微信公众号的网页授权登录,在研究这个公众号的时候遇到各种困难,现将自己的一些心得总结一下. 我想进行微信公众号开发遇到的第一个困难就是微信公众号必须输入一个外网能够訪问的域名,在网 ...

  10. Tp-link TL-WR841N无线路由器端口映射到外网如何设置

    针对TP-LINK的无线路由器进行演示如何设置端口映射和访问控制,演示使用的具体型号是TP-LINK TL-WR841N 3G无线路由器如何设置端口映射. 什么是端口映射? 端口映射又称端口转发,有的 ...

随机推荐

  1. 为了讲明白继承和super、this关键字,群主发了20块钱群红包

    摘要:以群主发红包为例,带你深入了解继承和super.this关键字. 本文分享自华为云社区<群主发红包带你深入了解继承和super.this关键字>,作者:共饮一杯无 . 需求 群主发随 ...

  2. 齐博x1客服系统显示客户在哪个页面

    如下图所示,要想实现下面的效果,即显示客户给你发消息时,当时处于哪个商品页面.这样方便跟客户针对此商品进行交流. 你的模板如果使用了碎片的话,就可以添加下面的代码index_style/default ...

  3. 齐博x1模板中常用的TP标签数据处理

    上图是比较常用的, 而下图是比较特殊的场合,比如幻灯片可能会用到 下图使用了TP的循环标签. 上图只使用了条件判断标签 上图不存在 val="xxx" 这个参数,所以会自动循环输出 ...

  4. 【Kubernetes】K8s笔记(十一):Ingress 集群进出流量总管

    目录 0. Ingress 解决了什么问题 1. Ingress Controller 2. 指定 Ingress Class 使用多个 Ingress Controller 3. 使用 YAML 描 ...

  5. SpringBoot自动配置(装配)流程

    源码分析 SpringBoot自动配置流程 ​ ​ 首先,我们要了解在@SpringBootApplication注解的内部,还具有@EnableAutoConfiguration,@SpringBo ...

  6. Spark基本知识

    Spark基本知识 Spark 是一种基于内存的快速.通用.可扩展的大数据分析计算引擎. spark与hadoop的区别 Hadoop Hadoop 是由 java 语言编写的,在分布式服务器集群上存 ...

  7. 最全iOS 上架指南

    一.上架基本需求资料 1.苹果开发者账号(公司已有可以不用申请,需要开通开发者功能,每年 99 美元) 2.开发好的APP 二.证书 上架版本需要使用正式的证书 1.创建证书 Apple Develo ...

  8. android学习 基础知识

    布局管理器 大小用dp; 字体用sp 线性布局 与 相对布局是可以嵌套使用的,根据实际需求,灵活使用. 1.通用属性 # 大小相关 layout_width="100dp":宽度 ...

  9. loguru库使用

    参考: https://github.com/Delgan/loguru https://loguru.readthedocs.io/en/stable/overview.html https://b ...

  10. java学习之springboot

    0x00前言 呀呀呀时隔好久我又来做笔记了,上个月去大型保密活动了,这里在网上看了一些教程如果说不是去做java开发我就不做ssm的手动整合了采用springboot去一并开发. Spring Boo ...