Zenn
🧭

ブラウザだけでOS自作入門しよう

2021/05/16に公開
Docker
GitHub
Codespaces
#
MikanOS
devcontainer
tech

TL; DR

  • mikanos-docker と mikanos-devcontainer をちょっといじって VNC に対応させた
  • コーディングと動作確認がブラウザだけでできる！iPad だけで OS 自作しよう！

更新履歴

2021/05/26: GitHub Codespaces のバグが修正されたため, 一部手順・文章を修正

概要

こんにちは.

皆さん, "ゼロからのOS自作入門", 捗っていますか？ 私はやっと8章が終わりそうです. マウスが動いて楽しい！

先日, Docker ではじめる "ゼロからのOS自作入門" という記事を公開しました. Docker イメージが 1,400 プル以上されており, 想像以上に利用して頂けているようです. ありがとうございます！

さて, 上述の記事では, Ansible を用いたしんどい環境構築を, Docker イメージに閉じ込めた構築済みの環境を用いることで簡単にしました. しかしながら, Docker を用いるには, 依然としてパソコンが必要です. iPad だけで開発！とは行かないのです. また, Docker は難しいので気絶してしまう方もいらっしゃるかもしれません. 環境構築で脱落者が出るのはまずい.

もっと気軽にOS自作入門できないか？と考えた結果...ありました.

GitHub Codespaces は良い.

GitHub Codespaces は, クラウド開発環境を GitHub から一瞬で起動できるサービスです. 全然わからないのでここで動作イメージを紹介します.

なんと, ブラウザ上で VSCode が動作します. しかも, QEMU を用いた MikanOS の動作確認もブラウザ上で可能で, マウスも問題なく動作します！

Codespaces を用いることで, コーディングから動作確認までをブラウザで完結することが可能です. クラウド上に開発環境が用意されるため, 実機パソコンなどは不要です. また, ブラウザで動作するため, iPad とマウス・キーボードさえあればいつでもどこでもOS自作が勉強できます！

くわしく

GitHub Codespaces は, 以下の複数のサービスを提供します:

  • VSCode devcontainer をベースとしたクラウド開発環境

    ワンクリックで devcontainer (Docker イメージ) をクラウド上で起動してくれます. 開発環境がクラウド上に起動するため, 実機パソコン等は不要です.

    devcontainer 設定がそのまま利用できるため, mikanos-devcontainer がそのまま使えます！

  • ブラウザで動作する VSCode エディタ

    ブラウザ上で Visual Studio Code エディタが利用できます. 拡張機能なども自由にインストールできます[1].

    ブラウザで動作するため, 端末, OS の制約が緩く, 例えば iPad でも動作します！

  • ポート転送できる！

    TCP ポートを転送してくれます. つまり, Codespaces コンテナ内で Web サーバを起動しておけば, ブラウザからアクセスすることが可能です.

いかがでしょうか. GitHub Codespaces は, 前述の高度な機能を, GitHub リポジトリページからのワンクリックで一瞬で用意してくれます. 便利ですね.

使い方

  1. GitHub Codespaces のページより, Codespaces Beta に登録して下さい. ウェイトリスト制なので, 自分の順番に到達次第, 利用できるようになります.

  2. mikanos-devcontainer テンプレートを参考に, GitHub リポジトリを作成します.

    既にリポジトリを作成済みの方はそのリポジトリを利用できます.

  3. 作成したリポジトリのページの "Code → Open with Codespaces" から, Codespaces を作成し, 起動します.

  4. .devcontainer/devcontainer.json を編集し, VNC 関連の設定をコメントアウトします.

    {
	"name": "MikanOS",
	"build": {
		"dockerfile": "Dockerfile",
		// Choose variant: latest, vnc
		// Set `vnc` to spin up noVNC services. Useful in GitHub Codespaces.
		"args": { "VARIANT": "vnc" }
	},

	// Comment out to enable noVNC for GitHub Codespaces
	"forwardPorts": [6080],
	"overrideCommand": false,
	"containerEnv": {
		// Port for noVNC Web Client & WebSocket
		"NOVNC_PORT": "6080",
		// VNC port QEMU listens. Default to 5900 + <display number>
		// If you run QEMU with "-vnc :1", then VNC_PORT should be 5901.
		"VNC_PORT": "5900",
		// QEMU launch options. Used in `run_image.sh`
		"QEMU_OPTS": "-vnc :0"
	},

    • build.args.VARIANT を latest から vnc に変更します.

      古い mikanos-devcontainer テンプレートを利用している方は, .devcontainer/Dockerfile も編集して下さい.

    • "Comment out to enable noVNC..." 以下の設定をコメントアウトしてください.

      古い mikanos-devcontainer テンプレートを利用している方は, これらの設定を .devcontainer/devcontainer.json に追記して下さい.

  5. 右下に出てきた通知からコンテナをリビルドします.

    • 出てこない方, 閉じてしまった方は F1 キー → "Codespaces: Rebuild Container" を選択します.

2021/05/26 追記: この手順は不要になりました
6. 下部 "Ports" タブより, 6080番ポートを右クリック → "Make Public" します.

  1. ここまで設定すれば, QEMU 起動時に "Ports" タブより 6080番ポートの転送先アドレスをブラウザで開くことで, 動作中の QEMU の画面を操作することが可能になります！

まとめ

いかがでしょうか. 使い方が長くなってしまいましたが, 要は設定ファイルをちょっといじって Codespaces を起動するだけです. 超絶便利な GitHub Codespaces を活用して, いつでもどこでも MikanOS しましょう！

おまけ (FAQ)

この記事を書くまでに試したこと, 考えたことを FAQ 形式で残しておこうと思います.

  • VNC にパスワードかけたいんですけど…

    できなくはないですが, 面倒なのでおすすめしません.

    QEMU を引数 -vnc :0,password=on 付きで起動後, QEMU monitor 上で set_password vnc [任意のパスワード] を実行して下さい. QEMU を起動するたびに設定が必要です.

    新しめの QEMU では起動時オプションに password-secret= を設定できますが, Ubuntu 20.04 で提供されている QEMU 4.2.1 では駄目みたいです.

  • なんで QEMU の WebSocket VNC オプション使わないんですか？

    QEMU の WebSocket オプションは利用可能です. 起動時に -vnc :0,websocket=on を渡し, ポートを転送してあげることで, 対応する任意のクライアント, 例えばパブリックの noVNC クライアントを利用することが可能です.

    ただし, 転送アドレスは Codespaces を作成するたびにランダムに変更される上に, パブリックの noVNC クライアントの設定を手動で行う必要があります. これは大変面倒なので, ワンクリックで VNC 接続できるように, コンテナイメージに noVNC (と, Websockify) をバンドルしました.

  • なんで手順6 (Make Public) が必要なんですか？

    私が動作確認した際には, "Make Public" しない状態だと, 転送されたポートのアドレスで動作する noVNC Webクライアントにはアクセスできましたが, noVNC から WebSocket 接続をしようとする際に HTTP 308 が返ってきてしまい, 動作しなかったためです. 最初は仕様かと思っていたのですが, GitHub で報告したところ, どうやら Codespaces のバグっぽいです. 将来的にはこの "Make Public" する手順は不要になるかもしれません.
    2021/05/26 追記: バグが修正され, 手順6は不要になりました！

脚注

  1. ローカルと比べてなんか制約があったはずですが長らく Codespaces で不便を感じていないので忘れました. 便利！ ↩︎

Discussion