Web版VSCodeがDockerコンテナをWASM環境で起動、Webブラウザ内ローカルマシンとして利用可能に。拡張機能「vscode-container-wasm」登場

今回は「Web版VSCodeがDockerコンテナをWASM環境で起動、Webブラウザ内ローカルマシンとして利用可能に。拡張機能「vscode-container-wasm」登場」についてご紹介します。

関連ワード (外部、必要、拡張機能等) についても参考にしながら、ぜひ本記事について議論していってくださいね。

本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。


WindowsやMacなどのデスクトップPCでVisual Studio Code(以下VSCode)を利用して開発をする場合、同じローカルマシン上でDockerコンテナのLinux環境を起動し、VSCodeのターミナルで接続して操作することは、開発環境としてよくあることだと思います。

これと同じことをWebブラウザ版のVSCodeでも実現する、すなわちWeb版VSCodeが同一Webブラウザ上にWebAssembly化したDockerコンテナを起動し、Web版VSCodeからローカルマシンとして接続し利用できる、実験的実装を実現したVSCodeの拡張機能「vscode-container-wasm」が登場しました。

VSCodeの拡張機能一覧から選択してインストール可能になっています。

下記は「vscode-container-wasm」のデモ画面です。Web版VSCodeの右下のターミナル画面で接続されているのは、Webブラウザ内のローカルマシンとして起動している、DockerコンテナによるLinux環境です。このLinux環境でC言語のコードのコンパイルと実行に成功していることが示されています。

このWebブラウザ上で実行されているLinux環境は、DockerコンテナイメージがWebAssemblyに変換され、実行されているものです。

fig

「vscode-container-wasm」の開発者はNTTの徳永航平氏です。徳永氏は、DockerコンテナイメージをWebAssemblyに変換する「container2wasm」の開発者でもあります。そして今回のVSCodeの拡張機能「vscode-container-wasm」も、container2wasmの技術が利用されています。

参考:DockerコンテナイメージをWebAssemblyに変換、Webブラウザ上での実行も可能にする「container2wasm」バージョン0.3が登場

「vscode-container-wasm」は昨年(2023年)12月に徳永氏が発表しましたが、今月(2024年2月)ベルギーのブリュッセルで行われたオープンソースのイベント「FOSDEM 2024」での徳永氏によるセッション「vscode-container-wasm: An Extension of VSCode on Browser for Running Containers Within Your Browser」で、詳しい解説とデモが行われました。この記事では、このFOSDEMでの説明を基に「vscode-container-wasm」を紹介していきましょう。

WebAssemblyでCPUをエミュレーション、Linuxコンテナを起動

vscode-container-wasmがWebブラウザ上でDockerコンテナを起動する仕組みは、基本的に「container2wasm」と同じです。

WebAssembly環境上でCPUエミュレータのBochesもしくはTinyEmuを用いてx86_64もしくはRISC-Vをエミュレーションし、その上でLinuxとDockerコンテナを実行しています。

fig

このときVSCodeからWebAssembly/WASI環境をホストするために、マイクロソフトの「vscode-wasm」を利用しています。

DockerコンテナイメージをWebAssembly環境に読み込む方法

Webブラウザ上のWebAssembly環境にDockerコンテナを読み込む方法は2つ用意されています。

1つ目は、あらかじめDockerコンテナをcontainer2wasmでWebAssemblyファイルに変換しておき、それをHTTPサーバから読み込む方法です。

HTTPサーバで公開されたURLをvscode-container-wasmの設定ファイルに記述しておくことで、自動的にWebブラウザ上のWebAssembly環境に読み込まれて起動されます。

fig

2つ目の方法は、Dockerコンテナのコンテナイメージをそのまま、イメージレジストリもしくはHTTPサーバから読み込む方法です。

イメージレジストリが、オリジンをまたいだリクエストのレスポンスに対応する、CORS (Cross-Origin Resource Sharing:オリジン間リソース共有)対応であれば、読み込みたいDockerコンテナのイメージをvscode-container-wasmの設定ファイルに書いておくことで、読み込んで起動してくれます。

しかし現時点で主要なイメージレジストリはCORSに対応していないため、この方法を選択するにはCORSに対応したプライベートなイメージレジストリなどを立ち上げる必要があります。

もしくは、OCIイメージレイアウトに対応したフォーマットでファイルシステム上にコンテナイメージを配置し、HTTPサーバで公開します。そのURLをvscode-container-wasmの設定ファイルに書いておくとvscode-container-wasmが読み込んで起動してくれます。

fig

このようにして、Web版VSCodeが自動的にDockerコンテナイメージを外部から読み込み、Webブラウザ内ローカルマシンとして起動し、ターミナルから接続してコンパイルやデバッグなどに利用できるようになります。

この技術はChromebookやiPadなど、あまり自由度の高くないOSでの開発環境の構築などに有用であるのと同時に、プラットフォームとしてのWebブラウザの可能性を拡大するものとなりそうです。

さらに詳しい技術的な解説がFOSDEMのWebサイトで公開されているため、興味のある方はぜひそちらもご覧ください。

COMMENTS


Recommended

TITLE
CATEGORY
DATE
「Linux」デスクトップに「Android」を接続するには–「KDE Connect」を使った手順
IT関連
2022-08-13 19:28
数年間で1億ドルを日本に投資–キンドリルが国内の事業戦略を明らかに
IT関連
2023-10-14 01:15
臨床試験参加者を製薬会社に紹介しオーダーメイド医療研究を支援するSano Geneticsが3.5億円調達
バイオテック
2021-01-27 12:56
「macOS Ventura」発表、タスクを素早く切り替える「ステージマネージャ」など
IT関連
2022-06-08 14:43
Sansan、「Contract One」に契約ツリー機能と契約状況判定機能を追加
IT関連
2024-03-26 00:11
ベクトルデータベースで生成AI業界全体にアクセル–日本オラクル・三澤社長
IT関連
2023-09-29 02:54
Dataikuは「データの設計図」となる基盤–生成AIのコスト管理機能なども
IT関連
2024-04-13 11:13
トヨタ、デンソーら、AI活用した高齢者の安全運転支援を実証実験
IT関連
2022-09-09 14:02
米SalesforceがRPAに参入へ Servicetraceを買収、MuleSoftと統合
クラウドユーザー
2021-08-08 10:28
CISA、「Windows LSA」の脆弱性を「既知の悪用された脆弱性カタログ」から一時的に除外
IT関連
2022-05-19 22:36
マイクロソフト、医療クラウドのセキュリティリファレンス公開
IT関連
2021-07-27 00:12
「そば打ち名人」コロナ禍で再販 ターゲットは高齢層→巣ごもり家族に
くらテク
2021-07-09 08:05
米「雇用計画」でサイバーセキュリティ強化へ–地方のエネルギーインフラ投資など詳細
IT関連
2021-05-21 22:44
巨大オンライン闇市場「RaidForums」、欧米の合同捜査で閉鎖
IT関連
2022-04-14 21:40