在瀏覽器里面運(yùn)行命令行，真香！

但是這個(gè)還是有很多改進(jìn)空間，比如說(shuō) UI 能好看些，甚至能執(zhí)行交互命令該多好，最后思來(lái)想去，它的究極形態(tài)不就是一個(gè) Web 版的 Terminal （終端）嗎？

然后本來(lái)我還想著對(duì)項(xiàng)目進(jìn)行改造來(lái)著，但是想想，最終如果要改造成一個(gè) Web 版的 Terminal，這個(gè)肯定已經(jīng)有開源實(shí)現(xiàn)了。

于是我就開始搜，最后搜到幾個(gè)還不錯(cuò)的。

Web Terminal

• ttyd：https://github.com/tsl0922/ttyd，一款可以將命令行轉(zhuǎn)到 Web 執(zhí)行的工具，基于 C 編寫的。
• gotty：https://github.com/yudai/gotty，和 ttyd 一樣，只不過是 Go 語(yǔ)言寫的，但最新更新是在 2017 年了，估計(jì)失修了。
• wetty：https://github.com/butlerx/wetty，基于 Node.js 開發(fā)的，也可以將命令行轉(zhuǎn)到 Web 執(zhí)行，但是需要基于 SSH 登錄，其實(shí)就是個(gè) Web 版的 SSH 終端。
• Secure Shell (Chrome App)：Google 瀏覽器插件，也可以提供網(wǎng)頁(yè)版 SSH 終端。
• tmate：https://tmate.io/，從 tmux 修改而來(lái)，可以支持 Terminal 分享。

經(jīng)過一番試用，我個(gè)人首推的還是 ttyd，其他的幾個(gè)要么是基于 SSH 的，要么不怎么好用或停止維護(hù)了。

下面我就來(lái)介紹下 ttyd 的簡(jiǎn)單用法。

安裝

安裝其實(shí)非常簡(jiǎn)單，我用的是 Mac，所以用 HomeBrew 直接安裝即可：

brew install ttyd

如果你用的是 Windows、Linux，依然也可以支持，安裝可以參考 https://github.com/tsl0922/ttyd#installation 章節(jié)。

使用

ttyd 支持不少功能配置，完整命令如下：

ttyd is a tool for sharing terminal over the web

USAGE:
    ttyd [options]  []

VERSION:
    1.6.3

OPTIONS:
    -p, --port              Port to listen (default: 7681, use `0` for random port)
    -i, --interface         Network interface to bind (eg: eth0), or UNIX domain socket path (eg: /var/run/ttyd.sock)
    -c, --credential        Credential for Basic Authentication (format: username:password)
    -u, --uid               User id to run with
    -g, --gid               Group id to run with
    -s, --signal            Signal to send to the command when exit it (default: 1, SIGHUP)
    -a, --url-arg           Allow client to send command line arguments in URL (eg: http://localhost:7681?arg=foo&arg=bar)
    -R, --readonly          Do not allow clients to write to the TTY
    -t, --client-option     Send option to client (format: key=value), repeat to add more options
    -T, --terminal-type     Terminal type to report, default: xterm-256color
    -O, --check-origin      Do not allow websocket connection from different origin
    -m, --max-clients       Maximum clients to support (default: 0, no limit)
    -o, --once              Accept only one client and exit on disconnection
    -B, --browser           Open terminal with the default system browser
    -I, --index             Custom index.html path
    -b, --base-path         Expected base path for requests coming from a reverse proxy (eg: /mounted/here)
    -P, --ping-interval     Websocket ping interval(sec) (default: 300)
    -6, --ipv6              Enable IPv6 support
    -S, --ssl               Enable SSL
    -C, --ssl-cert          SSL certificate file path
    -K, --ssl-key           SSL key file path
    -A, --ssl-ca            SSL CA file path for client certificate verification
    -d, --debug             Set log level (default: 7)
    -v, --version           Print the version and exit
    -h, --help              Print this text and exit

Visit https://github.com/tsl0922/ttyd to get more information and report bugs.

可以看到，這里可以使用 -p 來(lái)指定運(yùn)行端口，使用 -c 指定登錄密碼等等。

基本使用

我們來(lái)試下，最基本的命令如下：

ttyd bash

這樣就使用啟動(dòng)了一個(gè) Web 版的 bash，運(yùn)行結(jié)果如下：

這里顯示是在 7681 上運(yùn)行的，那我們就可以打開 http://localhost:7681/，就可以直接運(yùn)行命令了：

非常絲滑。

看了下背后的傳輸協(xié)議是 WebSocket，所以穩(wěn)定性還是有保障的：

當(dāng)然，我們也可以不用 bash，用自己喜歡的 Shell，比如 zsh，命令如下：

ttyd zsh

這樣的話瀏覽器里面的 Shell 就是 zsh 啦：

綁定端口

當(dāng)然我們也可以更換端口，比如 8000，則可以使用如下命令：

ttyd -p 8000 zsh

這樣 ttyd 就可以在 8000 端口運(yùn)行 HTTP 服務(wù)，我們打開 http://localhost:8000/ 就可以執(zhí)行命令了。

Basic Auth

當(dāng)然這么直接暴露出去似乎也不太安全，我們可以設(shè)置 Basic Auth，使用 -c 這個(gè)選項(xiàng)即可指定用戶名密碼，格式為 username:password，例如我們指定用戶名和密碼都是 admin，那命令就這么寫：

ttyd -p 8000 -c admin:admin zsh

這樣打開 ?http://localhost:8000/ 之后就需要輸入用戶名密碼才可以登錄了：

自動(dòng)打開瀏覽器

我們還可以使用 -B 命令讓它自動(dòng)打開瀏覽器：

ttyd -p 8000 -B zsh

這樣運(yùn)行之后，默認(rèn)的瀏覽器就會(huì)自動(dòng)打開 http://localhost:8000/，不用我們?cè)偃デ镁W(wǎng)址了，十分方便。

所以，上面這個(gè)命令甚至我們還可以做成一個(gè) alias，比如：

alias webcmd="ttyd -p 8000 -B zsh";

這樣輸入 webcmd 就可以輕松打開一個(gè) Web 版命令行了。

Docker 支持

另外 ttyd 還提供了 Docker 鏡像，如果你不想安裝的話，可以直接啟 Docker，比如這樣的話就可以在 7681 上啟動(dòng)：

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

但這實(shí)際上是把容器內(nèi)部的命令行暴露出來(lái)了，如果要暴露宿主機(jī)的命令行還需要 mount 下磁盤：

SSH 終端

ttyd 還支持 SSH 終端，命令如下：

ttyd login

這樣的話，打開瀏覽器之后就需要 SSH 登錄，輸入正確的 SSH 用戶名和密碼后才能使用。

SSL 支持

如果你想配置 SSL 支持，即支持 HTTPS 的話，可以自己生成證書并添加對(duì)應(yīng)的參數(shù)來(lái)啟動(dòng) ttyd，參考鏈接是：https://github.com/tsl0922/ttyd/wiki/SSL-Usage。

更多

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

公網(wǎng)暴露

當(dāng)然，我們?nèi)绻氚阉W(wǎng)暴露出來(lái)，還可以配合 Ngrok，比如 ttyd 運(yùn)行在 8000 端口上，我可以使用 Ngrok 將其暴露出來(lái)：

ngrok http 8000

運(yùn)行結(jié)果如下：

這樣我就可以通過指定的 URL 訪問這個(gè)終端了，比如這里我就可以使用 https://11b4-2404-f801-8050-3-bf-00-55.ngrok.io/ 來(lái)訪問我的終端了：

非常 Nice！

總結(jié)

好了，以上就是 ttyd 的基本使用了，有了它，我們就可以輕松將某臺(tái)機(jī)器上的終端轉(zhuǎn)到 Web 上來(lái)執(zhí)行了，還是非常方便有用的。

老表每周一贈(zèng)書

點(diǎn)擊下方卡片直接購(gòu)買學(xué)習(xí)

贈(zèng)書規(guī)則：給本文點(diǎn)贊+本周想對(duì)自己說(shuō)的一句話或者隨意留言，點(diǎn)擊下方卡片，關(guān)注老表小號(hào)「簡(jiǎn)說(shuō)編程」，回復(fù)：周一福利，既可以參與贈(zèng)書活動(dòng)送2本，另外我將從留言中隨機(jī)選一位，贈(zèng)書1本（一定要留言吶，留言滿100后，將無(wú)法精選）。

關(guān)注后，回復(fù)：周一福利