🚀 VS Code で しましょう!

ディスクのパフォーマンスを向上させる

Dev Containers 拡張機能は、デフォルトでローカルファイルシステムのソースコードに「バインドマウント」を使用します。これは最も簡単なオプションですが、macOS および Windows では、コンテナー内から yarn install のようなコマンドを実行すると、ディスクパフォーマンスが低下する場合があります。これらのタイプの問題を解決するためにできることがいくつかあります。

ソースコードを Windows の WSL 2 ファイルシステムに保存する

Windows 10 2004 以降には、完全な Linux カーネルを提供し、WSL 1 よりもパフォーマンスが大幅に向上した Windows Subsystem for Linux (WSL 2) の改良版が含まれています。Docker Desktop 2.3 以降には、VM ではなく WSL で Docker を実行する新しい WSL 2 エンジンが含まれています。したがって、ソースコードを WSL 2 ファイルシステムに保存すると、パフォーマンスが向上し、アクセス許可の設定などの互換性も向上します。

Windows コンテナーで WSL 2 フォルダーを開く を参照して、VS Code からこの新しいエンジンを使用する方法の詳細を確認してください。

ビデオ: Windows 上の Dev Containers を高速化する

Container Volume でリポジトリをクローンするを使用する

Dev Containers: Container Volume でリポジトリのクローン... コマンドは、ローカルファイルシステムにバインドする代わりに、分離されたローカル Docker 名前付きボリュームを使用します。ローカルボリュームは、ファイルツリーを汚染しないだけでなく、Windows および macOS でのパフォーマンス向上という追加の利点もあります。

このアプローチの使用方法の詳細については、「分離されたコンテナーボリュームで Git リポジトリまたは GitHub PR を開く」を参照してください。

次の 2 つのセクションでは、他のシナリオで名前付きボリュームを使用する方法について概説します。

ターゲットを絞った名前付きボリュームを使用する

macOS および Windows は VM でコンテナーを実行するため、「バインド」マウントはコンテナーのファイルシステムを直接使用するほど高速ではありません。幸いなことに、Docker には、コンテナーのファイルシステムのように機能するが、コンテナーの再構築後も存続するローカルの「名前付きボリューム」という概念があります。これにより、書き込みパフォーマンスが重要な node_modules などのパッケージフォルダー、データフォルダー、または build などの出力フォルダーを保存するのに理想的です。devcontainer.json で参照するものに基づいて、以下の適切な手順に従ってください。

Dockerfile またはイメージ:

vscode-remote-try-node リポジトリを使用して、yarn install を高速化する方法を示します。

以下の手順に従ってください

  1. devcontainer.jsonworkspaceMount プロパティを使用して、ソースコードをバインドする場所を VS Code に指示します。次に、mounts プロパティ (VS Code 1.41 以降) を使用して、node_modules サブフォルダーを名前付きローカルボリュームにマウントします。

    "mounts": [
        "source=${localWorkspaceFolderBasename}-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume"
    ]
    

    : source${localWorkspaceFolderBasename}${devcontainerId}、またはハードコードされた名前を使用できます。

  2. このリポジトリは VS Code を非 root の「node」ユーザーとして実行するため、ユーザーがフォルダーにアクセスできるように postCreateCommand を追加する必要があります。

    "remoteUser": "node",
    "mounts": [
        "source=${localWorkspaceFolderBasename}-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume"
    ],
    "postCreateCommand": "sudo chown node node_modules"
    

    コンテナー内で root として実行する場合は、この 2 番目の手順は必要ありません。

コンテナーを既にビルドして接続している場合は、コマンドパレット (F1) から **Dev Containers: コンテナーの再構築** を実行して変更を反映させます。それ以外の場合は、**Dev Containers: コンテナーでフォルダーを開く...** を実行してコンテナーに接続します。

このアプローチに関する 2 つの注意点

  1. コンテナー内の node_modules フォルダーを削除すると、ボリュームへの接続が失われる可能性があります。必要な場合は、代わりに node_modules フォルダーの内容を削除してください (rm -rf node_modules/* node_modules/.*)。

  2. この方法では、空の node_modules フォルダーがローカルに作成されることがわかります。これは、コンテナー内のボリュームマウントポイントがローカルファイルシステムのバインドマウント内にあるためです。これは予期された動作であり、無害です。

Docker Compose:

vscode-remote-try-node は Docker Compose を使用しませんが、手順は似ていますが、ボリュームマウント構成は別のファイルに配置されます。

  1. Docker Compose ファイル (または 拡張されたファイル) で、適切なサービスに対して、名前付きローカルボリュームマウントを node_modules サブフォルダーに追加します。例:

    version: '3'
    services:
      your-service-name-here:
        volumes:
          # Or wherever you've mounted your source code
          - .:/workspace:cached
          - try-node-node_modules:/workspace/node_modules
        # ...
    
    volumes:
      try-node-node_modules:
    
  2. 次に、devcontainer.jsonworkspaceFolder プロパティが、実際のソースコードがマウントされている場所に一致していることを確認してください

    "workspaceFolder": "/workspace"
    
  3. root 以外のユーザーでコンテナーを実行している場合は、マウントするフォルダーの所有者を更新するために postCreateCommand を追加します。これは root としてマウントされている可能性があるためです。user-name-goes-here を適切なユーザーに置き換えてください。

    "remoteUser": "node",
    "workspaceFolder": "/workspace",
    "postCreateCommand": "sudo chown user-name-goes-here node_modules"
    

コンテナーを既にビルドして接続している場合は、コマンドパレット (F1) から **Dev Containers: コンテナーの再構築** を実行して変更を反映させます。それ以外の場合は、**Dev Containers: コンテナーでフォルダーを開く...** を実行してコンテナーに接続します。

ビデオ: dev container で npm install を高速化する

ソースツリー全体に名前付きボリュームを使用する

最後に、上記のオプションのいずれもニーズを満たさない場合は、さらに一歩進んで、ローカルではなく名前付きボリューム内にソースツリー全体をクローンできます。既存の devcontainer.json 構成を取得し、次のように変更することで、名前付きボリュームを設定できます (ボリュームに付けたい名前に your-volume-name-here を更新します)。

devcontainer.json で参照するものに応じて

  • Dockerfile またはイメージ: devcontainer.json で次のプロパティを使用して、ローカルの名前付きボリュームをコンテナーにマウントします

    "workspaceMount": "source=your-volume-name-here,target=/workspace,type=volume"
    "workspaceFolder": "/workspace",
    
  • Docker Compose: 適切なサービスに対して、次の内容で docker-compose.yml を更新 (または拡張) します

    version: '3'
    services:
      your-service-name-here:
        volumes:
            - your-volume-name-here:/workspace
        # ...
    
    volumes:
      your-volume-name-here:
    

    また、devcontainer.jsonworkspaceFolder プロパティが、ボリュームがマウントされている場所 (またはボリューム内のサブフォルダー) に一致していることを確認してください。

    "workspaceFolder": "/workspace"
    

コンテナーを既にビルドして接続している場合は、コマンドパレット (F1) から **Dev Containers: コンテナーの再構築** を実行して変更を反映させます。それ以外の場合は、**Dev Containers: コンテナーでフォルダーを開く...** を実行してコンテナーに接続します。

次に、コマンドパレットから **Git: クローン** コマンドを使用するか、統合ターミナル (⌃⇧` (Windows、Linux Ctrl+Shift+`)) を起動して、git clone コマンドを使用してソースコードを /workspace フォルダーにクローンします。

最後に、**ファイル > 開く... / フォルダーを開く...** コマンドを使用して、クローンされたリポジトリをコンテナーで開きます。