在瀏覽器里面運(yùn)行命令行，真香！
之前我寫過一篇《萬物皆可 API》，這個項(xiàng)目就是把一些腳本的執(zhí)行結(jié)果輸出到了網(wǎng)頁里面。
但是這個還是有很多改進(jìn)空間，比如說 UI 能好看些，甚至能執(zhí)行交互命令該多好，最后思來想去，它的究極形態(tài)不就是一個 Web 版的 Terminal （終端）嗎？
然后本來我還想著對項(xiàng)目進(jìn)行改造來著，但是想想，最終如果要改造成一個 Web 版的 Terminal，這個肯定已經(jīng)有開源實(shí)現(xiàn)了。
于是我就開始搜，最后搜到幾個還不錯的。
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í)就是個 Web 版的 SSH 終端。 Secure Shell (Chrome App)：Google 瀏覽器插件，也可以提供網(wǎng)頁版 SSH 終端。 tmate：https://tmate.io/，從 tmux 修改而來，可以支持 Terminal 分享。
經(jīng)過一番試用，我個人首推的還是 ttyd，其他的幾個要么是基于 SSH 的，要么不怎么好用或停止維護(hù)了。
下面我就來介紹下 ttyd 的簡單用法。
安裝
安裝其實(shí)非常簡單，我用的是 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 來指定運(yùn)行端口，使用 -c 指定登錄密碼等等。
基本使用
我們來試下，最基本的命令如下：
ttyd bash
這樣就使用啟動了一個 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 這個選項(xiàng)即可指定用戶名密碼，格式為 username:password，例如我們指定用戶名和密碼都是 admin，那命令就這么寫：
ttyd -p 8000 -c admin:admin zsh
這樣打開 ?http://localhost:8000/ 之后就需要輸入用戶名密碼才可以登錄了：
自動打開瀏覽器
我們還可以使用 -B 命令讓它自動打開瀏覽器：
ttyd -p 8000 -B zsh
這樣運(yùn)行之后，默認(rèn)的瀏覽器就會自動打開 http://localhost:8000/，不用我們再去敲網(wǎng)址了，十分方便。
所以，上面這個命令甚至我們還可以做成一個 alias，比如：
alias webcmd="ttyd -p 8000 -B zsh";
這樣輸入 webcmd 就可以輕松打開一個 Web 版命令行了。
Docker 支持
另外 ttyd 還提供了 Docker 鏡像，如果你不想安裝的話，可以直接啟 Docker，比如這樣的話就可以在 7681 上啟動：
docker run -it --rm -p 7681:7681 tsl0922/ttyd
但這實(shí)際上是把容器內(nèi)部的命令行暴露出來了，如果要暴露宿主機(jī)的命令行還需要 mount 下磁盤：
SSH 終端
ttyd 還支持 SSH 終端，命令如下：
ttyd login
這樣的話，打開瀏覽器之后就需要 SSH 登錄，輸入正確的 SSH 用戶名和密碼后才能使用。
SSL 支持
如果你想配置 SSL 支持，即支持 HTTPS 的話，可以自己生成證書并添加對應(yīng)的參數(shù)來啟動 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 訪問這個終端了，比如這里我就可以使用 https://11b4-2404-f801-8050-3-bf-00-55.ngrok.io/ 來訪問我的終端了：
非常 Nice！
總結(jié)
好了，以上就是 ttyd 的基本使用了，有了它，我們就可以輕松將某臺機(jī)器上的終端轉(zhuǎn)到 Web 上來執(zhí)行了，還是非常方便有用的。
往期推薦 2、為什么我們現(xiàn)在不再需要?dú)⒍拒浖耍?/a>
3、如何用 Python 發(fā)送告警通知到微信？（文末送書）