授業のVMをVirtualBoxからDockerベースに変更したのですが、学生にとって本当にVM(的なもの)が動いているのかというのが不安になってしまうこともあるかと思います。 本当はdocker系のコマンドを教えたいところですが、それを話す学年ではない(そういう主戦場の学年はもうひとつ上)ので、稼働状態と最低限の制御のできるUIができないかなと思っていたら… あるではありませんか? Tauri ですよ。

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
posted with ヨメレバ
手島 拓也/吉田 健人 技術評論社 2022年07月25日頃
楽天ブックス
Amazon
Kindle

実のところReactのUI設計とかは一切やったことなくかなり難儀してますが、その裏でこの春休み期間(学生のね)にRustにおけるbollardでちょっとだけdocker状態の取得とか操作を練習していたのでした。

とりあえず最初は状態の確認ができるようなUIのみにして、その後起動・終了を行えるようにボタンを付けるつもりです。現状はこんな感じ(スタブのみです)。

どんな感じ作っているのかですが… とっかかりはそれほど難しくありません。

1

% create-tauri-app

で、TypeScriptベース、React使用という感じで雛形を作り、 src/App.tsx で表示に使っているところをゴリゴリ書き換えていきました。 なお、状態表示に関しては事前に調査をしていて、とりあえずuseEffectとタイマーで書き換えるようにしています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

  const [dockerState, setDockerState] = useState(""); // Docker環境の状態を持つ
  const [vmState, setVmState] = useState(""); // VMの状態を持つ
// ...
  useEffect(() => {
    // Dockerの状態を取得、更新
    setInterval(() => {
      getDockerState()
    }, 2000)
    setInterval(() => {
      getVmState()
    }, 2000)
  })
//...
  return (
    <div className="container">
      <h1>授業用LinuxVM管理</h1>
        <p>Docker: {dockerState}</p>
        <p>VM状態: {vmState}</p>
    </div>
  );
//..
  async function getDockerState(){
    await setDockerState("ここでDockerの状態を表示");
  }

  async function getVmState(){
    await setVmState("ここでVMの状態を表示");
  }

このコードに、とりあえずDocker状態とVMの稼働状態を記載しておけばそれなりに参照できるようになるかと思います。 まず第一弾はここまで。