Step

【2023年】これからブログを始める人へおすすめの書籍

Kissy

Visual Studio CodeからWSL2内のDockerコンテナを利用する方法

作成: 更新:

この記事ではVisual Studio CodeからWSL2内のコンテナで開発する場合の手順を記載します。

Visual Studio CodeからWSL2内のDockerコンテナを利用する方法

Visual Studio Codeからdockerコンテナを利用するメリット

以前「WSL2の使い方」、「WSL2上でのdockerの使い方」について、以下の記事で紹介しました。

ぶろぐらまー: Windows10 WSL2の使い方まとめ [20H1 build 18917~]

ぶろぐらまー: Windows10でdockerを使用する方法(docker on WSL2編)

上記の記事でWSL2とdockerが使えるようになりましたが、実際Webサイトやアプリケーションの開発をしようと思うと、こんな悩みが出てきました。

  • Windows10とdockerコンテナーの間でファイルのコピーが手間である。
  • Visual Studio Codeからコーディングとデバッグをシームレスに実行できない。

もちろん、ファイルの永続化をすればエクスプローラーからdockerコンテナー内のファイルは参照できるのですが、変更しようと思うとアクセス権の問題で書き込みができません。

また、Windows10上にインストールしたVisual Studio Codeからはdockerコンテナー内のWebサイトやアプリケーションの実行ができません。

Visual Studio CodeからWSL2内のdockerコンテナーを利用することで、これらの悩みを解決してくれます。

必要な環境

事前準備

必要な環境を準備するため、以下の手順を実行します。この手順は１度実行すれば２回目以降は実行する必要はありません。

  1. WSL2を有効にし、好きなLinuxディストリビューションをインストールする。
    　「Windows 10 WSL2の使い方まとめ」の記事を参考にしてください。
  2. Docker Desktop for Windows (Stable 2.3.0.2以降) をインストールする。
    　Docker Desktop for WindowsからStable 2.3.0.2以降をダウンロードしてインストールします。
  3. Docker Desktopの[WSL統合]の設定を有効にする。
  4. Visual Studio Codeをインストールする。
    　Visual Studio Codeからダウンロードしてインストールします。
  5. 「Remote Development」拡張機能をインストールする。
    　Remote Develpment拡張機能をインストール

Node.js 14のコンテナを作成する手順

ここでは、MSのdockerコンテナのテンプレートを使用して「Node.js 14」のコンテナを作成します。もちろん、自分で作成したDockerファイルやdocker-compose.ymlファイルからdockerコンテナでも作成可能です。（docker-compose.ymlファイルを使用したコンテナの作成方法は後述します）

  1. Linuxディストリビューションを起動する。
  2. 開発用の作業用フォルダを作成する。
    　ここでは、以下のコマンドを実行しHelloNodeディレクトリを作成し、作成したディレクトリに移動します。
    mkdir HelloNode
cd HelloNode
  3. Visual Studio Codeを起動します。
    　Linuxディストリビューション上で以下のコマンドを実行し、Visual Studio Codeを起動します。
    code .
  4. Visual Studio Codeの左下にWSLで接続されていることを確認します。
    　WSL接続されていることを確認
  5. Remote-Containers: Reopen in Containerコマンドでdockerコンテナに接続する。
    　左下の[WSL]をクリック（または、Ctrl+Shift+P）でコマンドパレットを開き、Remote-Containers: Reopen in Containerコマンドを実行します。
    　Remote-Container: Reopen in ContainerでVSを開きなおす
    　Dockerファイルやdocker-composite.ymlファイルがあれば、ここでVisual Studioが自動的にdockerイメージ作成とコンテナ作成を行ってくれます。
    　
    　ですが、今回はDockerファイルもdocker-compose.ymlファイルも用意していないので、コマンドパレットにテンプレが表示されます。ここでは、MSの「Node.js 14」のテンプレを選択します。
    　「Node.js 14」を選択する
  6. 右下の通知がでるので、[Reopen in Container]をクリックする。
    　dockerコンテナが作成されます。イメージのビルドが実行されるので、少し時間がかかります。
    　Reopen in Container
    　左下に「Dev Container」が表示されたらdockerコンテナが作成され接続されました。
    　Containerに接続完了
  7. 環境構築が完了。
    　dockerコンテナに接続されると、Visual Studio Codeの左下に緑色のDev Container: <Container>が表示されます。これでVisual Studio Codeからdockerコンテナを利用する環境ができました。
  8. Node.jsでサンプルを動かしてみる。
    　あとは、Visual Studio Codeで開発をするだけですが、ここでは以降の手順で試しにNode.jsのサンプルアプリを動かしてみます。

node.jsのサンプルを実行する手順

  1. app.jsファイルを作成する。
    　「Hello VS Code!」と表示するだけの簡単なnode.jsアプリを作成します。

    const  http = require('http');
const  hostname = "127.0.0.1";
const  port = 9000;

const  server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello VS Code!');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

  2. devcontainer.jsonを修正し、アプリで使用するポートをWindows10のポートへ転送する。
    　上記node.jsのサンプルでは9000番ポートを使用するため、これをWindows10のポートへ転送します。dockerコンテナへ接続しているので、WSLで接続しなおします。
    　
    　まず、左下の緑色の「Dev Container」をクリック（または、Ctrl+Shift+P）でコマンドパレットを開き、Remote-WSL: Reopen in WSLコマンドを実行します。Visual Studio Codeの左下にWSL: <Distoro>が表示されたことを確認します。
    　
    　Visual Studio Codeでdevcontainer.jsonを開き、"forwardPorts" : [9000]の設定を追加します。devcontainer.jsonの全体としては、以下のようになります。

    // For format details, see https://aka.ms/vscode-remote/devcontainer.json or this file's README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.122.1/containers/javascript-node-14
{
  "name": "Node.js 14",
  "dockerFile": "Dockerfile",
  // Set *default* container specific settings.json values on container create.
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },
  // Add the IDs of extensions you want installed when the container is created.
  "extensions": [
    "dbaeumer.vscode-eslint"
  ],
  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  "forwardPorts": [
    9000
  ],
  // Use 'postCreateCommand' to run commands after the container is created.
  // "postCreateCommand": "yarn install",
  // Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
  // "remoteUser": "node"
}

    devcontainer.jsonを保存したら、再びdockerコンテナに接続します。Ctrl+Shift+Pでコマンドパレットを開き、Remote-Containers: Reopen in Containerコマンドを実行します。
    　
    　Visual Studio Codeの左下にDev Container: <Distoro>が表示されたことを確認します。

  3. node.jsのサンプルアプリを起動する。
    　以下のコマンドを実行してサンプルアプリを起動します。

    node app.js

  4. F5を押下し、ブラウザを起動する。
    　「Hello VS Code!」と表示されれば成功です。
    　node.jsアプリの実行に成功

WordPressのコンテナを作成する手順

先ほどはMSのテンプレートを使ってコンテナを作りましたが、こちらの手順ではdocker-compose.ymlファイルを使ってWordPressのdockerコンテナを作成してみます。

  1. Linuxディストリビューションを起動する。

  2. 開発用の作業用フォルダを作成する。
    　ここでは、以下のコマンドを実行しHelloNodeディレクトリを作成し、作成したディレクトリに移動します。

    mkdir wordpress
cd wordpress

  3. Visual Studio Codeを起動します。
    　Linuxディストリビューション上で以下のコマンドを実行し、Visual Studio Codeを起動します。

    code .

  4. Visual Studio Codeの左下にWSLで接続されていることを確認します。
    　WSL接続されていることを確認

  5. docker-compose.ymlとdevcontainer.jsonを作成する。
    　Visual Studio Codeでdocker-compose.ymlとdevcontainer.jsonを作ります。devcontainer.jsonは.devcontainerフォルダを作成しその中に作成します。
    　devcontainer.jsonとdocker-compose.ymlを作る
    　ファイルの内容は以下の通り。
    ＜docker-compose.yml＞

    version: '3.3'

services:
   db:
     image: mysql:5.7
     volumes:
       - ./db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     volumes:
       - ./wordpress/www/html:/var/www/html
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
       WORDPRESS_DB_NAME: wordpress

   phpmyadmin:
     image: phpmyadmin/phpmyadmin:latest
     restart: always
     depends_on:
       - db
     ports:
       - 8888:80

    ＜.devcontainer\devcontainer.json＞

    {
  "name": "Remote-dev Project",
  "dockerComposeFile": [
    "../docker-compose.yml",
  ],
  "service": "wordpress",
  "workspaceFolder": "/var/www/html",
  "extensions": [
  ],
  "settings": {
    "editor.tabSize": 2,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "terminal.integrated.profiles.linux": {
      "bash (login)": {
        "path": "bash",
        "args": ["-l"]
      }
    }
  },
  "shutdownAction": "none" // or "stopCompose"
}

    ※VSCode v1.56.0以降、シェルの設定が変更になりました。以前は"terminal.integrated.shell.linux"でしたが、"terminal.integrated.profiles.linux"に変更になっています。

  6. Remote-Containers: Reopen in Containerコマンドでdockerコンテナに接続する。
    　左下の[WSL]をクリック（または、Ctrl+Shift+P）でコマンドパレットを開き、Remote-Containers: Reopen in Containerコマンドを実行します。
    　Remote-Container: Reopen in ContainerでVSを開きなおす
    　実行すると、Visual Studioが自動的にdockerイメージ作成とコンテナ作成を行ってくれます。イメージのビルドが実行されるので、少し時間がかかります。左下に「Dev Container」が表示されたらdockerコンテナが作成され接続されました。
    　Containerに接続完了

  7. 環境構築が完了。
    　dockerコンテナに接続されると、Visual Studio Codeの左下に緑色のDev Container: <Container>が表示されます。これでVisual Studio Codeからdockerコンテナを利用する環境ができました。

  8. WebブラウザでWordPressの動作を確認する。
    　localhost:8000にアクセスしてみます。WordPressが起動しました！
    　WordPressの起動

まとめ

Visual Studio CodeからWSL2内のdockerコンテナを利用する方法を紹介しました。dockerイメージの作成に若干時間がかかるものの、Visual Studio Codeで開発作業が完結するシームレスな開発環境ができました。

Visual Studio Code + WSL2 + dockerはお世辞抜きに最強の環境だと思います。ぜひ試してみてください。

最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。

関連記事

SPONSORED LINK
SPONSORED LINK