Web ブラウザから SSH リモートログインできるサーバ（ttyd を使用）（Ubuntu 上）

Ubuntu 24.04 LTS で，Web ブラウザ経由の SSH 接続を行う ttyd サーバを構築する手順である。ファイアウォールの設定，SSH の設定，ttyd のインストールと起動を説明する。

要点は次の通りである．

ttyd は，Ubuntu 24.04 LTS の公式リポジトリ（universe）にバージョン 1.7.4 が収録されており，apt でインストールできる。ブラウザ側の端末エミュレータは xterm.js，サーバ側は libwebsockets を使用し，WebSocket で端末の入出力を中継する。同じ用途のソフトウェアとして，Apache Guacamole（SSH に加えて RDP, VNC にも対応するゲートウェイ），Wetty（Node.js 上で動作）がある．

前準備

Ubuntu のインストール

Ubuntu のインストール手順は，「別のページ」で説明する．

Ubuntu のシステム更新

次のコマンドを実行する．

# パッケージリストの情報を更新
sudo apt update
# インストール済みのパッケージを更新 (依存関係も考慮)
sudo apt full-upgrade
# 変更をシステム全体に反映させるために再起動
sudo shutdown -r now

ssh によるリモートアクセスの設定（Ubuntu 上）

要点: openssh-server をインストールする． Ubuntu 上のファイアウォールを有効にし，予期しないアクセスを抑止する．

  1. ファイアウォール（ufw）を有効にする． 
    sudo ufw enable
  2. ssh を使っている場合には，この時点で ssh アクセスを許可しておく． 
    sudo ufw allow 22
sudo ufw default deny incoming
  3. ufw の設定を確認する．

    ポート 22 についての通信が開放されていることを確認する． 

    sudo ufw status
  4. openssh server のインストール 
    sudo apt -y install openssh-server
  5. ポートスキャンを行い，ufw の設定を確認する．

    ポート 22 についての通信が開放されていることを確認する． 

    sudo apt install nmap
nmap localhost

SSH によるリモートログインを行うアカウントの作成と設定

SSH によるリモートログインの受付に用いるユーザである．

ここで作成するユーザ名: ai

  1. 新規ユーザの作成とパスワードの設定 
    sudo adduser --uid 1234 --home /home/ai ai

    この操作がうまく行かなかったときは「sudo deluser ai; sudo rm -rf /home/ai」のように操作した後に，この操作をやり直す．

  2. SSH キーペアの作成と，authorized_keys への公開鍵の追加 
    sudo -u ai -i
mkdir ~/.ssh
chmod 700 ~/.ssh
cd ~/.ssh
ssh-keygen -t ed25519 -C "＜鍵を識別するための文字列＞"
# 保存先については，Enter キー．パスフレーズについては適切に設定
cat id_ed25519.pub >> authorized_keys
chmod 600 authorized_keys
exit
  3. 試しに ai ユーザでログインしてみる 
    ssh ai@localhost

ttyd のインストールとテスト実行

ここでの設定：使用するポート番号 8443

ttyd のインストール

次のコマンドを実行する． 

# パッケージリストの情報を更新
sudo apt update
sudo apt -y install ttyd

バージョンを確認する． 

ttyd --version

ufw で ttyd のポートの解除

次のコマンドを実行する． 

sudo ufw allow 8443

ttyd のテスト実行

次のコマンドを実行する．--writable はブラウザからのキー入力を許可するオプションである（ttyd は既定では読み取り専用である）． 

ttyd --port=8443 --writable bash

ポートスキャンを行い，ufw の設定を確認する．

ポート 8443 についての通信が開放されていることを確認する． 

nmap localhost

Web ブラウザから使ってみる

Web ブラウザで，次の URL を指定する．端末の画面が開くことを確認する．確認後，Ctrl+C で ttyd を停止する．

http://127.0.0.1:8443

このテスト実行では，通信が暗号化されず，認証も行われない。動作確認のみに使用する．

ttyd サーバを立てて，Web ブラウザによるリモートログインを行う

  1. SSL/TLS 用の証明書の作成

    次のコマンドを実行する。ここでは動作確認用に自己署名証明書を作成する。Web ブラウザには警告が表示される。外部に公開する場合は，認証局が発行した証明書を使用する． 

    cd ~
openssl req -newkey rsa:2048 -nodes -keyout server.key \
  -x509 -days 365 -subj "/CN=localhost" -out server.crt
chmod 600 server.key
  2. ttyd サーバの起動

    次のコマンドを実行する。ssh ai@localhost を実行する端末をブラウザに公開する． 

    ttyd --port=8443 --writable --credential webuser:＜パスワード＞ \
  --check-origin \
  --ssl --ssl-cert ~/server.crt --ssl-key ~/server.key \
  ssh ai@localhost

    各オプションの意味は次の通りである．

    • --credential: Basic 認証のユーザ名とパスワードを指定する．
    • --check-origin: 異なるオリジンからの WebSocket 接続を拒否する．
    • --ssl, --ssl-cert, --ssl-key: SSL/TLS による通信の暗号化を有効にする．
  3. 試しに，Web ブラウザからリモートログインしてみる

    Web ブラウザで，次の URL を指定する．

    https://＜IP アドレス＞:8443

  4. Basic 認証のユーザ名とパスワードを入力する．
  5. SSH の認証（公開鍵のパスフレーズ，またはパスワード）を行う。ログインできることを確認する．

実運用