Chapter 07

Web Shell・回答チェック機能の実装

株式会社var(ヴァー)
株式会社var(ヴァー)
2021.09.21に更新

こちらのチャプターでは、Webシェルと回答チェックの実装について説明します。

はじめに、Webシェルから説明します。
ウェブシェルとは、ブラウザ上でTerminal操作ができる機能のことです。

今まで説明してきたような実装で、コンテナサーバーにてコンテナを起動させることは可能になりました。
しかし、ユーザーはコンテナにアクセスするときにSSHクライアントを利用しなければいけないという問題点が残っていました。ユーザーにSSHクライアントを用意させる手間はなんとしても省きたいというのが我々の要望でした。

そこで、HTTP<->SSHができるwettyhttps://github.com/butlerx/wetty)を利用することにしました。

しかし、wettyをそのまま使った場合、各ユーザはhttp通信でhttp://ip:portのようにしてコンテナに接続する必要があるが、これもUXとしていまいちだと思われるため、専用のプロキシを作成することにしました

  • プロキシはGAE上にGolangで実装
  • ユーザにはシナリオを起動した時に専用のハッシュ値が発行される
  • プロキシサーバはこのハッシュ値を受け取り、ユーザのWettyのコンテナが動いているプライベートIPアドレスとポート番号を取得し、そこに全ての通信をプロキシする

これによって全ユーザは同じGAEに接続はするが、それぞれ別のWettyにアクセスし、シナリオを体験することが可能になります。

イメージ図はこちらです。

  1. Webシェル導入前の接続方法
  2. Webシェルを導入後の接続方法
  3. 専用プロキシ導入後の接続方法

次に、回答チェック機能について説明します。

単純に、フォームに値を入れてその値をチェックするという回答チェックではなく、サーバーの変更を検知し、環境構築が正しくできているかを判定することが我々の要望でした。

AnswerCheck機能の流れは以下のように実装しました。

  1. ユーザがチェックボタンを押す
  2. Golangで書かれたAnswerCheckのGCFが環境チェックを行うコンテナを起動
  3. 起動されたコンテナはチェック対象のコンテナに接続し、想定した環境になっているかを確認
  4. 確認した結果をフロントエンドまで返す

なお、AnswerCheckで確認のために利用するはDocker+Golangでマルチステージングビルドを用いて作成しているため、非常に軽量であり、ほぼ全ての問題においてCheckボタンを押してから3秒程度で結果を返してくれるように実装できました。

イメージ図はこちらです。

これにより、従来のただユーザーにコンテナ内の文字列を探してもらい、その文字列の正誤判定をするようり1つ上のレベルでユーザーの回答の正誤判定を行うことができるようになりました。