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

WSL 2 で Dev Container を使用する

2020年7月1日 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 の Tech Preview のインストールでした。現在では、Windows の WSL 2 と Docker の両方のサポートが安定版の GA リリースに含まれています。

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

仮想化の新しい時代

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

WSL 2

以前の記事で説明したように、WSL 2 は軽量な仮想マシン (VM) 内で実際の Linux カーネルを使用することで、Windows Subsystem for 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 チームからさらなる投資が促されました。

Docker Desktop の新しい 2020 年 5 月版では、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 統合を有効にするように促します。ポップアップウィンドウからWSL 統合を有効にするを選択します。

Docker Desktop WSL integration dialog

オプション: 新しい PowerShell および Ubuntu ターミナルを同じインターフェースで開く機能を含め、最高の体験を得るために新しい Windows Terminal をインストールします。

WSL 2 で VS Code を開く

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

Launch code . from Ubuntu terminal

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

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 ファイルシステム上に既存の HelloNode フォルダーがあり、その中に Node プロジェクトがあります。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 リモート開発 GitHub リポジトリでIssueを開くか、@code にツイートしてください。

ハッピーコーディング!

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