概要

ソフトウェアやライブラリなどのアップデートを検証する際の使い捨て環境、開発環境構築の自動化などにVisual Studio CodeのDev Containersが便利です。
Dev Containersを利用すれば、開発環境で手軽にDockerコンテナーを扱うことができます。コンテナーの作成やコンテナに配置したソースコードをVS Codeで編集、アプリケーションの実行といったことが簡単に出来るようになります。Dev Containersを利用する際の開発環境のイメージとその詳細は以下を参照してください。

Developing inside a Container using Visual Studio Code Remote Development

Visual Studio CodeのDev Containersを使って、開発環境を構築していきたいと思います。今回はWSL2がセットアップ済みのWindowsでやっていきます。

今回の環境

Visual Studio Code: 1.74.2
Visual Studio Code拡張機能
- Dev Containers: v0.266.1
- WSL: v0.72.0

>wsl --version
WSL バージョン: 1.0.3.0
カーネル バージョン: 5.15.79.1
WSLg バージョン: 1.0.47
MSRDC バージョン: 1.2.3575
Direct3D バージョン: 1.606.4
DXCore バージョン: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windowsバージョン: 10.0.22621.963

コンテナ作成手順

セットアップ方法や使い方は基本的に公式ドキュメントを見れば大丈夫です。 code.visualstudio.com

バージョンによって変わる可能性が高いので、ここでは簡単に紹介します。

Dockerファイルなどを格納するディレクトリを作成します。
上記ディレクトリをルートにしてVS Codeを開きます。
WSLで開き直します。
ここからDev Containersの環境を作っていきます。まずは Add Dev Container Configuration Files を実行します。
今回は複数のコンテナを作成する想定で Docker outside of Docker Compose devcontainers を選択します。
Dev ContainersでDockerコンテナからDockerを使う構成は、Docker in Docker（dind）と Docker outside of Docker（DooD） の二種類があります。 dindとDooDの違いについてはこのあたりを参照してください。 qiita.com dindとDooDの使い分けについてはこちらも参考にしてください。 jpetazzo.github.io
適当に選択を進めていきます。
Dev Containersで使う設定ファイル（devcontainer.json）とdocker-compose.yml、Dockerfileが生成されました。

ここでは、わかりやすくVS Codeから見える位置にソースコードを配置するのに、バインドマウントの設定を追加します。ディレクトリを追加し、その位置をdocker-compose.ymlの volumes で指定します。

  volumes:
    # Forwards the local Docker socket to the container.
    - /var/run/docker.sock:/var/run/docker-host.sock 
    # Update this to wherever you want VS Code to mount the folder of your project
    - ../..:/workspaces:cached
    - type: bind
      source: ../my-volume # ホスト側のYAMLからの相対パス
      target: /workspaces/node-app # コンテナ側の絶対パス

Node.jsの開発環境を試したいので、Dockerfikeを次のように編集します。
```
 FROM node:18
```
Node.jsの公式イメージのユーザーに合わせて、コンテナのユーザーをdevcontainer.jsonで指定しておきます。
```
 "remoteUser": "node"
```
準備が出来たので、Dev Containers: Reopen in Containerでコンテナを起動します。
コンテナの作成が始まります。

動作確認

コンテナが起動してコンテナに接続されたら、Node.jsの環境が正しく構築されたか確認しておきます。
```
 node@99cf54e2f43d:/workspaces/node-app$ node -v
 v18.12.1
```

ソースコードの参照とアプリケーションの実行を試したいので、create-react-appを実行します。

 node@99cf54e2f43d:/workspaces/node-app$ npx create-react-app my-app
 Need to install the following packages:
   create-react-app@5.0.1
 Ok to proceed? (y)

Reactアプリケーションが作成されたことを確認します。

アプリケーションの実行も試してみます。

 node@99cf54e2f43d:/workspaces/node-app$ cd my-app
 node@99cf54e2f43d:/workspaces/node-app/my-app$ npm start

ブラウザが起動してアプリケーションが表示されました。
ホスト側でもソースコードを開いてみます。

おわりに

Gitなど大分省略しましたが、ここまででDev Containersを使った開発環境の構築を通して、コンテナーの作成やコンテナに配置したソースコードをVS Codeで編集、アプリケーションの実行というところまで確認出来ました。

ha6_6ruブログ

主にフロントエンドの技術ネタを中心にしていく予定です。

VSCode Dev Containers（旧Remote Containers）を使った開発環境構築

概要

今回の環境

コンテナ作成手順

動作確認

おわりに