在浏览器里面运行命令行，真香！
<p><img title="在浏览器里面运行命令行，真香！" alt="在浏览器里面运行命令行，真香！" border="0" src="https://zhuji.jb51.net/uploads/img/202305/9f69099fc398ed5dad31855143aab6f6.jpg"></p>
<p>
之前我看过一篇《万物皆可 API》，这个项目就是把一些脚本的执行结果输出到了网页里面。
</p>
<p>
但是这个还是有很多改进空间，比如说 UI 能好看些，甚至能执行交互命令该多好，最后思来想去，它的究极形态不就是一个 Web 版的 Terminal （终端）吗？
</p>
<p>
然后本来我还想着对项目进行改造来着，但是想想，最终如果要改造成一个 Web 版的 Terminal，这个肯定已经有开源实现了。
</p>
<p>
于是我就开始搜，最后搜到几个还不错的。
</p>
<h3>
Web Terminal
</h3>
<ul>
<li>
ttyd：https://github.com/tsl0922/ttyd，一款可以将命令行转到 Web 执行的工具，基于 C 编写的。
</li>
<li>
gotty：https://github.com/yudai/gotty，和 ttyd 一样，只不过是 Go 语言写的，但最新更新是在 2017 年了，估计失修了。
</li>
<li>
wetty：https://github.com/butlerx/wetty，基于 Node.js 开发的，也可以将命令行转到 Web 执行，但是需要基于 SSH 登录，其实就是个 Web 版的 SSH 终端。
</li>
<li>
Secure Shell (Chrome App)：Google 浏览器插件，也可以提供网页版 SSH 终端。
</li>
<li>
tmate：https://tmate.io/，从 tmux 修改而来，可以支持 Terminal 分享。
</li>
</ul>
<p>
经过一番试用，我个人首推的还是 ttyd，其他的几个要么是基于 SSH 的，要么不怎么好用或停止维护了。
</p>
<p>
下面我就来介绍下 ttyd 的简单用法。
</p>
<h3>
安装
</h3>
<p>
安装其实非常简单，我用的是 Mac，所以用 HomeBrew 直接安装即可：
</p>
<ol class="dp-xml">
<li class="alt">
<span><span>brew install ttyd </span></span>
</li>
</ol>
<p>
如果你用的是 Windows、Linux，依然也可以支持，安装可以参考 https://github.com/tsl0922/ttyd#installation 章节。
</p>
<h3>
使用
</h3>
<p>
ttyd 支持不少功能配置，完整命令如下：
</p>
<ol class="dp-xml">
<li class="alt">
<span><span>ttyd is a tool for sharing terminal over the web </span></span><span></span>
</li>
<li class="alt">
<span>USAGE: </span><span></span>
</li>
<li class="alt">
<span>ttyd <span class="tag"><</span><span class="tag-name">command</span><span class="tag">></span><span> [</span><span class="tag"><</span><span class="tag-name">arguments...</span><span class="tag">></span><span>] </span></span><span></span>
</li>
<li class="alt">
<span>VERSION: </span><span></span>
</li>
<li class="alt">
<span>1.6.3 </span><span></span>
</li>
<li class="alt">
<span>OPTIONS: </span><span></span>
</li>
<li class="alt">
<span>-p, --port Port to listen (default: 7681, use `0` for random port) </span><span></span>
</li>
<li class="alt">
<span>-i, --interface Network interface to bind (eg: eth0), or UNIX domain socket path (eg: /var/run/ttyd.sock) </span><span></span>
</li>
<li class="alt">
<span>-c, --credential Credential for Basic Authentication (format: username:password) </span><span></span>
</li>
<li class="alt">
<span>-u, --uid User id to run with </span><span></span>
</li>
<li class="alt">
<span>-g, --gid Group id to run with </span><span></span>
</li>
<li class="alt">
<span>-s, --signal Signal to send to the command when exit it (default: 1, SIGHUP) </span><span></span>
</li>
<li class="alt">
<span>-a, --url-arg Allow client to send command line arguments in URL (eg: http://localhost:7681?<span class="attribute">arg</span><span>=</span><span class="attribute-value">foo</span><span>&</span><span class="attribute">arg</span><span>=</span><span class="attribute-value">bar</span><span>) </span></span><span></span>
</li>
<li class="alt">
<span>-R, --readonly Do not allow clients to write to the TTY </span><span></span>
</li>
<li class="alt">
<span>-t, --client-option Send option to client (format: <span class="attribute">key</span><span>=</span><span class="attribute-value">value</span><span>), repeat to add more options </span></span><span></span>
</li>
<li class="alt">
<span>-T, --terminal-type Terminal type to report, default: xterm-256color </span><span></span>
</li>
<li class="alt">
<span>-O, --check-origin Do not allow websocket connection from different origin </span><span></span>
</li>
<li class="alt">
<span>-m, --max-clients Maximum clients to support (default: 0, no limit) </span><span></span>
</li>
<li class="alt">
<span>-o, --once Accept only one client and exit on disconnection </span><span></span>
</li>
<li class="alt">
<span>-B, --browser Open terminal with the default system browser </span><span></span>
</li>
<li class="alt">
<span>-I, --index Custom index.html path </span><span></span>
</li>
<li class="alt">
<span>-b, --base-path Expected base path for requests coming from a reverse proxy (eg: /mounted/here) </span><span></span>
</li>
<li class="alt">
<span>-P, --ping-interval Websocket ping interval(sec) (default: 300) </span><span></span>
</li>
<li class="alt">
<span>-6, --ipv6 Enable IPv6 support </span><span></span>
</li>
<li class="alt">
<span>-S, --ssl Enable SSL </span><span></span>
</li>
<li class="alt">
<span>-C, --ssl-cert SSL certificate file path </span><span></span>
</li>
<li class="alt">
<span>-K, --ssl-key SSL key file path </span><span></span>
</li>
<li class="alt">
<span>-A, --ssl-ca SSL CA file path for client certificate verification </span><span></span>
</li>
<li class="alt">
<span>-d, --debug Set log level (default: 7) </span><span></span>
</li>
<li class="alt">
<span>-v, --version Print the version and exit </span><span></span>
</li>
<li class="alt">
<span>-h, --help Print this text and exit </span><span></span>
</li>
<li class="alt">
<span>Visit https://github.com/tsl0922/ttyd to get more information and report bugs. </span>
</li>
</ol>
<p>
可以看到，这里可以使用 -p 来指定运行端口，使用 -c 指定登录密码等等。
</p>
<p>
<strong>基本使用</strong>
</p>
<p>
我们来试下，最基本的命令如下：
</p>
<ol class="dp-xml">
<li class="alt">
<span><span>ttyd bash </span></span>
</li>
</ol>
<p>
这样就使用启动了一个 Web 版的 bash，运行结果如下：
</p>
<p>
<img title="在浏览器里面运行命令行，真香！" alt="在浏览器里面运行命令行，真香！" border="0" src="https://zhuji.jb51.net/uploads/img/202305/36c384418ac4074e663affa6eb09f218.jpg"></p>
<p>
这里显示是在 7681 上运行的，那我们就可以打开 http://localhost:7681/，就可以直接运行命令了：
</p>
<p>
<img title="在浏览器里面运行命令行，真香！" alt="在浏览器里面运行命令行，真香！" border="0" src="https://zhuji.jb51.net/uploads/img/202305/e922c085abb48edac9b6daa96c69b35a.jpg"></p>
<p>
非常丝滑。
</p>
<p>
看了下背后的传输协议是 WebSocket，所以稳定性还是有保障的：
</p>
<p>
<img title="在浏览器里面运行命令行，真香！" alt="在浏览器里面运行命令行，真香！" border="0" src="https://zhuji.jb51.net/uploads/img/202305/3725783a47c705796d831a2561180dbd.jpg"></p>
<p>
当然，我们也可以不用 bash，用自己喜欢的 Shell，比如 zsh，命令如下：
</p>
<ol class="dp-xml">
<li class="alt">
<span><span>ttyd zsh </span></span>
</li>
</ol>
<p>
这样的话浏览器里面的 Shell 就是 zsh 啦：
</p>
<p>
<img title="在浏览器里面运行命令行，真香！" alt="在浏览器里面运行命令行，真香！" border="0" src="https://zhuji.jb51.net/uploads/img/202305/e9b8277f5fa5c5fbe0a042beb4c6f3fd.jpg"></p>
<p>
<strong>绑定端口</strong>
</p>
<p>
当然我们也可以更换端口，比如 8000，则可以使用如下命令：
</p>
<ol class="dp-xml">
<li class="alt">
<span><span>ttyd -p 8000 zsh </span></span>
</li>
</ol>
<p>
这样 ttyd 就可以在 8000 端口运行 HTTP 服务，我们打开 http://localhost:8000/ 就可以执行命令了。
</p>
<p>
<strong>Basic Auth</strong>
</p>
<p>
当然这么直接暴露出去似乎也不太安全，我们可以设置 Basic Auth，使用 -c 这个选项即可指定用户名密码，格式为 username:password，例如我们指定用户名和密码都是 admin，那命令就这么写：
</p>
<ol class="dp-xml">
<li class="alt">
<span><span>ttyd -p 8000 -c admin:admin zsh </span></span>
</li>
</ol>
<p>
这样打开 http://localhost:8000/ 之后就需要输入用户名密码才可以登录了：
</p>
<p>
<img title="在浏览器里面运行命令行，真香！" alt="在浏览器里面运行命令行，真香！" border="0" src="https://zhuji.jb51.net/uploads/img/202305/9044ca8992b6702870cf49100fcfd65d.jpg"></p>
<p>
<strong>自动打开浏览器</strong>
</p>
<p>
我们还可以使用 -B 命令让它自动打开浏览器：
</p>
<ol class="dp-xml">
<li class="alt">
<span><span>ttyd -p 8000 -B zsh </span></span>
</li>
</ol>
<p>
这样运行之后，默认的浏览器就会自动打开 http://localhost:8000/，不用我们再去敲网址了，十分方便。
</p>
<p>
所以，上面这个命令甚至我们还可以做成一个 alias，比如：
</p>
<ol class="dp-xml">
<li class="alt">
<span><span>alias </span><span class="attribute">webcmd</span><span>=</span><span class="attribute-value">"ttyd -p 8000 -B zsh"</span><span>; </span></span>
</li>
</ol>
<p>
这样输入 webcmd 就可以轻松打开一个 Web 版命令行了。
</p>
<p>
<strong>Docker 支持</strong>
</p>
<p>
另外 ttyd 还提供了 Docker 镜像，如果你不想安装的话，可以直接启 Docker，比如这样的话就可以在 7681 上启动：
</p>
<ol class="dp-xml">
<li class="alt">
<span><span>docker run -it --rm -p 7681:7681 tsl0922/ttyd </span></span>
</li>
</ol>
<p>
但这实际上是把容器内部的命令行暴露出来了，如果要暴露宿主机的命令行还需要 mount 下磁盘：
</p>
<p>
<strong>SSH 终端</strong>
</p>
<p>
ttyd 还支持 SSH 终端，命令如下：
</p>
<ol class="dp-xml">
<li class="alt">
<span><span>ttyd login </span></span>
</li>
</ol>
<p>
这样的话，打开浏览器之后就需要 SSH 登录，输入正确的 SSH 用户名和密码后才能使用。
</p>
<p>
<strong>SSL 支持</strong>
</p>
<p>
如果你想配置 SSL 支持，即支持 HTTPS 的话，可以自己生成证书并添加对应的参数来启动 ttyd，参考链接是：https://github.com/tsl0922/ttyd/wiki/SSL-Usage。
</p>
<p>
<strong>更多</strong>
</p>
<p>
上面的用法基本能满足日常需要了，如果想要了解更多用法，可以参考其 Wiki，链接是：https://github.com/tsl0922/ttyd/wiki/Example-Usage。
</p>
<h3>
公网暴露
</h3>
<p>
当然，我们如果想把它公网暴露出来，还可以配合 Ngrok，比如 ttyd 运行在 8000 端口上，我可以使用 Ngrok 将其暴露出来：
</p>
<ol class="dp-xml">
<li class="alt">
<span><span>ngrok http 8000 </span></span>
</li>
</ol>
<p>
运行结果如下：
</p>
<p>
<img title="在浏览器里面运行命令行，真香！" alt="在浏览器里面运行命令行，真香！" border="0" src="https://zhuji.jb51.net/uploads/img/202305/c17b903c39a9e8192aa9e7332383f598.jpg"></p>
<p>
这样我就可以通过指定的 URL 访问这个终端了，比如这里我就可以使用 https://11b4-2404-f801-8050-3-bf-00-55.ngrok.io/ 来访问我的终端了：
</p>
<p>
<img title="在浏览器里面运行命令行，真香！" alt="在浏览器里面运行命令行，真香！" border="0" src="https://zhuji.jb51.net/uploads/img/202305/345ffe301982304491094a57d8296fcf.jpg"></p>
<p>
非常 Nice！
</p>
<h3>
总结
</h3>
<p>
好了，以上就是 ttyd 的基本使用了，有了它，我们就可以轻松将某台机器上的终端转到 Web 上来执行了，还是非常方便有用的。
</p>
<p>
原文链接：https://mp.weixin.qq.com/s/fOTFQRetykkcpoWCW6A8xA
</p>
頁:
[1]