之前我看過一篇《萬物皆可 API》，這個(gè)項(xiàng)目就是把一些腳本的執(zhí)行結(jié)果輸出到了網(wǎng)頁里面。

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

然后本來我還想著對(duì)項(xiàng)目進(jìn)行改造來著，但是想想，最終如果要改造成一個(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 語言寫的，但最新更新是在 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)頁版 SSH 終端。
•  tmate：https://tmate.io/，從 tmux 修改而來，可以支持 Terminal 分享。

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

下面我就來介紹下 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] <command> [<arguments...>]  
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 來指定運(yùn)行端口，使用 -c 指定登錄密碼等等。

基本使用

我們來試下，最基本的命令如下： 

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)部的命令行暴露出來了，如果要暴露宿主機(jī)的命令行還需要 mount 下磁盤：

SSH 終端

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

ttyd login 

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

SSL 支持

如果你想配置 SSL 支持，即支持 HTTPS 的話，可以自己生成證書并添加對(duì)應(yīng)的參數(shù)來啟動(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)暴露出來，還可以配合 Ngrok，比如 ttyd 運(yùn)行在 8000 端口上，我可以使用 Ngrok 將其暴露出來： 

ngrok http 8000 

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

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

非常 Nice！

總結(jié)

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