在浏览器里面运行命令行,真香!
系统 浏览器
本文介绍了 ttyd 的基本使用,有了它,我们就可以轻松将某台机器上的终端转到 Web 上来执行了,还是非常方便有用的。

 

之前我看过一篇《万物皆可 API》,这个项目就是把一些脚本的执行结果输出到了网页里面。

但是这个还是有很多改进空间,比如说 UI 能好看些,甚至能执行交互命令该多好,最后思来想去,它的究极形态不就是一个 Web 版的 Terminal (终端)吗?

然后本来我还想着对项目进行改造来着,但是想想,最终如果要改造成一个 Web 版的 Terminal,这个肯定已经有开源实现了。

于是我就开始搜,最后搜到几个还不错的。

Web Terminal

  •  ttyd:https://github.com/tsl0922/ttyd,一款可以将命令行转到 Web 执行的工具,基于 C 编写的。
  •  gotty:https://github.com/yudai/gotty,和 ttyd 一样,只不过是 Go 语言写的,但最新更新是在 2017 年了,估计失修了。
  •  wetty:https://github.com/butlerx/wetty,基于 Node.js 开发的,也可以将命令行转到 Web 执行,但是需要基于 SSH 登录,其实就是个 Web 版的 SSH 终端。
  •  Secure Shell (Chrome App):Google 浏览器插件,也可以提供网页版 SSH 终端。
  •  tmate:https://tmate.io/,从 tmux 修改而来,可以支持 Terminal 分享。

经过一番试用,我个人首推的还是 ttyd,其他的几个要么是基于 SSH 的,要么不怎么好用或停止维护了。

下面我就来介绍下 ttyd 的简单用法。

安装

安装其实非常简单,我用的是 Mac,所以用 HomeBrew 直接安装即可: 

  1. brew install ttyd 

如果你用的是 Windows、Linux,依然也可以支持,安装可以参考 https://github.com/tsl0922/ttyd#installation 章节。

使用

ttyd 支持不少功能配置,完整命令如下: 

  1. ttyd is a tool for sharing terminal over the web  
  2. USAGE:  
  3.     ttyd [options] <command> [<arguments...> 
  4. VERSION:  
  5.     1.6.3  
  6. OPTIONS:  
  7.     -p, --port              Port to listen (default: 7681, use `0` for random port)  
  8.     -i, --interface         Network interface to bind (eg: eth0), or UNIX domain socket path (eg: /var/run/ttyd.sock)  
  9.     -c, --credential        Credential for Basic Authentication (format: username:password)  
  10.     -u, --uid               User id to run with  
  11.     -g, --gid               Group id to run with  
  12.     -s, --signal            Signal to send to the command when exit it (default: 1, SIGHUP)  
  13.     -a, --url-arg           Allow client to send command line arguments in URL (eg: http://localhost:7681?arg=foo&arg=bar 
  14.     -R, --readonly          Do not allow clients to write to the TTY  
  15.     -t, --client-option     Send option to client (format: key=value), repeat to add more options  
  16.     -T, --terminal-type     Terminal type to report, default: xterm-256color  
  17.     -O, --check-origin      Do not allow websocket connection from different origin  
  18.     -m, --max-clients       Maximum clients to support (default: 0, no limit)  
  19.     -o, --once              Accept only one client and exit on disconnection  
  20.     -B, --browser           Open terminal with the default system browser  
  21.     -I, --index             Custom index.html path  
  22.     -b, --base-path         Expected base path for requests coming from a reverse proxy (eg: /mounted/here)  
  23.     -P, --ping-interval     Websocket ping interval(sec) (default: 300)  
  24.     -6, --ipv6              Enable IPv6 support  
  25.     -S, --ssl               Enable SSL  
  26.     -C, --ssl-cert          SSL certificate file path  
  27.     -K, --ssl-key           SSL key file path  
  28.     -A, --ssl-ca            SSL CA file path for client certificate verification  
  29.     -d, --debug             Set log level (default: 7)  
  30.     -v, --version           Print the version and exit  
  31.     -h, --help              Print this text and exit  
  32. Visit https://github.com/tsl0922/ttyd to get more information and report bugs. 

可以看到,这里可以使用 -p 来指定运行端口,使用 -c 指定登录密码等等。

基本使用

我们来试下,最基本的命令如下: 

  1. ttyd bash 

这样就使用启动了一个 Web 版的 bash,运行结果如下:

这里显示是在 7681 上运行的,那我们就可以打开 http://localhost:7681/,就可以直接运行命令了:

非常丝滑。

看了下背后的传输协议是 WebSocket,所以稳定性还是有保障的:

当然,我们也可以不用 bash,用自己喜欢的 Shell,比如 zsh,命令如下:

  1. ttyd zsh 

这样的话浏览器里面的 Shell 就是 zsh 啦:

绑定端口

当然我们也可以更换端口,比如 8000,则可以使用如下命令: 

  1. ttyd -p 8000 zsh 

这样 ttyd 就可以在 8000 端口运行 HTTP 服务,我们打开 http://localhost:8000/ 就可以执行命令了。

Basic Auth

当然这么直接暴露出去似乎也不太安全,我们可以设置 Basic Auth,使用 -c 这个选项即可指定用户名密码,格式为 username:password,例如我们指定用户名和密码都是 admin,那命令就这么写: 

  1. ttyd -p 8000 -c admin:admin zsh 

这样打开  http://localhost:8000/ 之后就需要输入用户名密码才可以登录了:

自动打开浏览器

我们还可以使用 -B 命令让它自动打开浏览器: 

  1. ttyd -p 8000 -B zsh 

这样运行之后,默认的浏览器就会自动打开 http://localhost:8000/,不用我们再去敲网址了,十分方便。

所以,上面这个命令甚至我们还可以做成一个 alias,比如: 

  1. alias webcmd="ttyd -p 8000 -B zsh"

这样输入 webcmd 就可以轻松打开一个 Web 版命令行了。

Docker 支持

另外 ttyd 还提供了 Docker 镜像,如果你不想安装的话,可以直接启 Docker,比如这样的话就可以在 7681 上启动: 

  1. docker run -it --rm -p 7681:7681 tsl0922/ttyd 

但这实际上是把容器内部的命令行暴露出来了,如果要暴露宿主机的命令行还需要 mount 下磁盘:

SSH 终端

ttyd 还支持 SSH 终端,命令如下: 

  1. ttyd login 

这样的话,打开浏览器之后就需要 SSH 登录,输入正确的 SSH 用户名和密码后才能使用。

SSL 支持

如果你想配置 SSL 支持,即支持 HTTPS 的话,可以自己生成证书并添加对应的参数来启动 ttyd,参考链接是:https://github.com/tsl0922/ttyd/wiki/SSL-Usage。

更多

上面的用法基本能满足日常需要了,如果想要了解更多用法,可以参考其 Wiki,链接是:https://github.com/tsl0922/ttyd/wiki/Example-Usage。

公网暴露

当然,我们如果想把它公网暴露出来,还可以配合 Ngrok,比如 ttyd 运行在 8000 端口上,我可以使用 Ngrok 将其暴露出来: 

  1. ngrok http 8000 

运行结果如下:

这样我就可以通过指定的 URL 访问这个终端了,比如这里我就可以使用 https://11b4-2404-f801-8050-3-bf-00-55.ngrok.io/ 来访问我的终端了:

非常 Nice!

总结

好了,以上就是 ttyd 的基本使用了,有了它,我们就可以轻松将某台机器上的终端转到 Web 上来执行了,还是非常方便有用的。 

 

责任编辑:庞桂玉 来源: 良许Linux

同话题下的热门内容

所有Chrome内核浏览器:删除默认搜索引擎的功能都不复存在谷歌 Chrome 97 浏览器无法删除默认搜索引擎,引发用户批评:官方称之后版本改正怕用户删完加不回去 Chromium上的默认搜索引擎将无法被移除Chrome浏览器推送最后一个双位数版本:删除默认搜索引擎功能回归苹果 macOS 12.2 RC 发布,修复 Safari 浏览器泄露隐私漏洞谷歌 Chrome Canary 99 浏览器推出:删除默认搜索引擎功能回归微软 Windows 11 Edge 浏览器 Mica 云母效果失效,教你如何恢复Sentry 开发者贡献指南 - 浏览器 SDK 集成测试

编辑推荐

如何通过Google Chrome远程控制你的Windows 10系统五大浏览器,四大内核,指的都是什么?PC浏览器凌冬已至,移动端才是未来面向Windows 10的4款轻量级浏览器关于Chrome浏览器调试技巧
我收藏的内容
点赞
收藏

51CTO技术栈视频号