打造VSCode版repl.it

打造VSCode版repl.it

脸书出品的 https://repl.it 工具贼好用,在线写代码,运行和发布,还可内网穿透,暴露在线URL地址直接访问,简直6到不行。但前提是翻墙访问,且速度不咋地。

不用repl.it的话,本地开发接口,暴露调试又很不方便,要用三方的内网穿透工具,不通项目要频繁改端口,多个工具直接来回切换。

那有没有这么一款工具能做到类似 repl.it 的功能呢?

答案就是客优出品的VSCode插件,基于 VSCode Code Runner 插件和 frp 内网穿透工具,打造本地版repl.it体验。成本仅需一台有公网IP的云服务器和一个备案域名,一年也就几百块而已,比打造一个在线的 repl.it 的成本低多了。

实现思路

  1. VSCode 代替 replt.it 的WebIDE功能,且只会更强大
  2. frp 做内网穿透的事情
  3. 通过一个插件监听运行进程的监听端口,将 frp 的运行和配置做到一键运行

实现步骤

  1. 将域名添加一个泛域名A解析至你的云服务器,如 *.frpc.yuming.com -> a.b.c.d
  2. 在服务器运行 frps,启动内网穿透服务,配置如下
# [common] is integral section
[common]
# A literal address or host name for IPv6 must be enclosed
# in square brackets, as in "[::1]:80", "[ipv6-host]:http" or "[ipv6-host%zone]:80"
bind_addr = 0.0.0.0
bind_port = 9000 # 此处改成你的服务端口

# udp port to help make udp hole to penetrate nat
bind_udp_port = 9001

# udp port used for kcp protocol, it can be same with 'bind_port'
# if not set, kcp is disabled in frps
kcp_bind_port = 7000

# specify which address proxy will listen for, default value is same with bind_addr
# proxy_bind_addr = 127.0.0.1

# if you want to support virtual host, you must set the http port for listening (optional)
# Note: http port and https port can be same with bind_port
vhost_http_port = 80
vhost_https_port = 8443

# response header timeout(seconds) for vhost http server, default is 60s
# vhost_http_timeout = 60

# set dashboard_addr and dashboard_port to view dashboard of frps
# dashboard_addr's default value is same with bind_addr
# dashboard is available only if dashboard_port is set
dashboard_addr = 0.0.0.0
dashboard_port = 7500

# dashboard user and passwd for basic auth protect, if not set, both default value is admin
dashboard_user = admin
dashboard_pwd = 

# dashboard assets directory(only for debug mode)
# assets_dir = ./static
# console or real logFile path like ./frps.log
log_file = /var/log/frps.log

# trace, debug, info, warn, error
log_level = info

log_max_days = 3

# auth token
token = token # 改成你的token

# heartbeat configure, it's not recommended to modify the default value
# the default value of heartbeat_timeout is 90
# heartbeat_timeout = 90

# pool_count in each proxy will change to max_pool_count if they exceed the maximum value
max_pool_count = 5

# max ports can be used for each client, default value is 0 means no limit
max_ports_per_client = 0

# if subdomain_host is not empty, you can set subdomain when type is http or https in frpc's configure file
# when subdomain is test, the host used by routing is test.frps.com
subdomain_host = frpc.yuming.com # 改成你的域名

# if tcp stream multiplexing is used, default is true
tcp_mux = true

3. 改造 code-runner 插件,在进程运行后查看进程监听的端口,生成 frpc.ini 文件,启动 frpc 客户端,自动穿透,再访问生成的 url 即可。

安装体验

  1. 下载 github.com/koios-sh/vsc 并安装
  2. 配置 frp 服务器设置

3. 打开API项目,找到主文件入口,点击运行按钮即可,对应的URL会输出

目前只支持一键运行,调试还需按F5本地调试,可以在改造下支持以调试的方式运行且做内网穿透,欢迎提交PR


另外我们寻找志同道合人士加入,欢迎发邮件至 hr#koios.cn,我们官网主页 https://www.koios.cn

vscode-code-runner-frp 地址

koios-sh/vscode-code-runner-frpgithub.com图标


原版 vscode-code-runner 地址

https://github.com/formulahendry/vscode-code-runnergithub.com

frp 地址

fatedier/frpgithub.com图标

编辑于 2019-07-25