VS Codeのエージェントモードを拡張するには、を試してください！

WSL 2 での開発コンテナーの使用

2020年7月1日 by Brigit Murtaugh, @BrigitMurtaugh

Docker コンテナーと Windows Subsystem for Linux 2 (WSL 2) のパワーを活用することで、深く統合された Linux カーネル内のコンテナーという、サンドボックス化された使い慣れた環境でアプリケーションを開発し、Windows 環境をそのまま維持することができます。

5月には仮想化の世界でいくつかのエキサイティングな発表がありました。Windows 10 May 2020 Update で WSL 2 が標準機能として追加され、Docker Desktop Stable 2.3.0.2 が WSL 2 バックエンドをサポートして正式リリース (GA) されました。

以前のブログ記事では、WSL 2 で Docker を使用する方法を探りました。最初の要件は Windows Insiders をインストールすることでした。当時は WSL 2 のサポートがまだ Windows の安定版リリースに含まれていなかったためです。次の要件は Docker WSL 2 の技術プレビュー版をインストールすることでした。現在では、Windows WSL 2 と Docker のサポートはどちらも安定版の正式リリースになっています！

この記事では、これらのツールがどのように機能するのか、そして Visual Studio Code でそれらを活用して WSL 2 上の開発コンテナーを生産的に使用する方法を見ていきます。

仮想化の新時代

WSL 2 と最新バージョンの Docker Desktop は、どちらも仮想化の仕組みを変えました。

WSL 2

以前の記事で説明したように、WSL 2 はWindows Subsystem for Linux に対して、軽量の仮想マシン (VM) 内で本物の Linux カーネルを使用するという新しいアプローチをとっています。Windows 環境にシームレスかつ深く統合されているように感じられるよう最適化されており、高速な起動時間、少ないリソースフットプリントを実現し、VM の構成や管理の要件は一切ありません。

システムコールを使用すると、ファイルへのアクセス、メモリの要求、プロセスの作成などの機能を実行できます。WSL 2 には完全な Linux カーネルが含まれているため、完全なシステムコール能力があり、Docker のようなお気に入りのアプリが完全かつ確実に動作することを意味します。

Docker

WSL 1 では、Windows と Linux の根本的な違いにより、Docker Engine を WSL 内で直接実行することができませんでした。そこで Docker チームは Hyper-V VM と LinuxKit を使用する代替ソリューションを開発しました。しかし、WSL 2 は完全なシステムコール能力を持つようになったため、Docker は WSL 2 で完全に実行できるようになり、Docker チームによるさらなる投資が促されました。

新しい 2020 年 5 月バージョンの Docker Desktop は、WSL 2 の動的メモリ割り当てを活用するため、コンテナーをはるかに高速にビルドし、消費するリソースも少なくなりました。以前のバージョンでは 1 分近くかかっていたコールドスタートが、10 秒未満で完了することもあります。さらに、Hyper-V はもはや要件ではないため、この記事で詳述する手順は Windows 10 Home でも機能します。

Windows の WSL 2 と Docker Desktop は現在 GA (正式版) となっているため、WSL 2 上の開発コンテナーをさらに安心して使用できます。

はじめに

前提条件

  • Windows 10 バージョン 2004 をインストールします。
    • お使いのデバイスで実行されている Windows のバージョンを確認するには、Windows ロゴ キー + R を押し、[ファイル名を指定して実行] ボックスに winver と入力して、[OK] を選択します。
  • Visual Studio Code をインストールします。
  • WSL 2 のインストールガイドに従って WSL 2 を有効にします。
  • Microsoft Store から Ubuntu (またはお好みの Linux ディストリビューション) をインストールします。
  • Docker Desktop Stable 2.3.0.2 をインストールします。

インストールすると、Docker は WSL がインストールされていることを認識し、WSL 統合を有効にするよう促します。ポップアップウィンドウから [Enable WSL integration] を選択します。

Docker Desktop WSL integration dialog

任意: 新しい Windows Terminal をインストールすると、同じインターフェイスで新しい PowerShell と Ubuntu のターミナルを開くことができるなど、最高のエクスペリエンスが得られます。

WSL 2 で VS Code を開く

VS Code を WSL 2 エンジンに接続しましょう。Ubuntu ターミナルを開き、任意のソースコードフォルダーに移動して、code . と入力します。これにより、WSL をフルタイムの開発環境として使用できる VS Code のインスタンスが起動します。コマンドパレットから WSL に接続することもできます。ここでは、簡単な HelloNode アプリケーションを開きます。

Launch code . from Ubuntu terminal

VS Code を開くと、WSL がインストールされていることを認識し、WSL 拡張機能をインストールすることを推奨してきます。[Install] を選択します。

WSL extension recommended

拡張機能のインストール後、VS Code をリロードして WSL 2 に接続できます。

Reload VS Code after installing extension

リロード後、ウィンドウの左下隅にある WSL インジケーターを確認することで、Ubuntu に接続されていることを確認できます。

WSL: Ubuntu bottom left indicator

WSL 拡張機能をインストールすると、リモートエクスプローラーが VS Code に追加されました。エクスプローラー内を見ると、Linux ディストリビューションに関する情報を確認できます。

Remote Explorer with WSL Targets

コンテナーの操作

Dev Containers 拡張機能を利用して、コンテナーの表示やアタッチができるほか、次のようなさまざまなシナリオに対応できます。

これらの構成により、マシン間で同じ開発環境を簡単に再現したり、プロジェクト固有のツールや拡張機能を DevContainer にインストールしたり、ローカルマシンを変更せずにデプロイ環境と同様のセットアップで開発したりできます。Docker 拡張機能を使用してコンテナーを表示したりアタッチしたりすることも可能です。

WSL 2 エンジンを使用する場合、Windows と WSL 2 ファイルシステムの両方からソースコードにアクセスできますが、パフォーマンスがはるかに優れているため、WSL 2 ファイルシステムを使用することをお勧めします。WSL 2 内のファイルシステムを使用するとパフォーマンスが向上するため、その使用方法を順を追って説明します。

コンテナーで開きたいフォルダーを選択する必要があります。まず、Dev Containers 拡張機能がインストールされていることを確認してください。次に、WSL 拡張機能を使用してすでに開いているフォルダーから Dev Containers: Reopen in Container コマンドを呼び出すことができます。

私の WSL 2 ファイルシステムには、Node プロジェクトが入った既存の HelloNode フォルダーがあります。Dev Containers: Reopen in Container を選択します。

Command Palette: Dev Containers: Reopen in Container

リポジトリにはまだ DevContainer の設定がないため、コンテナー定義のリストが表示されます。表示されるコンテナー構成定義のリストは、私のプロジェクトタイプに基づいてフィルタリングされています。Node.js 14 を選択します。

Command Palette: Node.js 14

VS Code の新しいインスタンスが開きます。VS Code はイメージのビルドを開始し、その後コンテナーを起動します。

VS Code instance starting with Dev Container

これで、アプリケーションにはコンテナーの構成情報が格納される .devcontainer フォルダーが作成されました。WSL とコンテナーの両方に接続されていることを再確認するために、統合ターミナルを開いて uname と Node のバージョンを確認してみましょう。

Check uname and node -v

ご覧のとおり、uname は Linux として返されたので、WSL 2 エンジンにまだ接続されており、node -v は v14.4.0 を返したので、Node 14 コンテナーの構成に成功しました。

F5 でアプリを実行してみましょう。

Local host running Hello World app

成功です！

フィードバックと参考資料

WSL とコンテナーを使った VS Code のセットアップを支援するために、VS Code の リモート開発ドキュメントに詳細な記事があります。私たちのチームへの質問やフィードバックがある場合は、お気軽に VS Code Remote Development GitHub リポジトリで issue をオープンするか、@code までツイートしてください。

ハッピーコーディング！

Brigit Murtaugh、VS Code プログラムマネージャー @BrigitMurtaugh