【VS Code】Visual Studio Code Dev Containersを使用する


Visual Studio Codeを使用したDev Containersについて記載します。

なお、正確な情報や詳細な情報は[公式ドキュメント](https://code.visualstudio.com/docs/devcontainers/containers)も参照してください。

## Dev Containersとは

公式ドキュメントには以下のように説明されています。

> The Visual Studio Code Dev Containers extension lets you use a container as a full-featured development environment. It allows you to open any folder inside (or mounted into) a container and take advantage of Visual Studio Code's full feature set. A devcontainer.json file in your project tells VS Code how to access (or create) a development container with a well-defined tool and runtime stack. This container can be used to run an application or to separate tools, libraries, or runtimes needed for working with a codebase.

簡単に説明すると、Visual Studio Codeの拡張機能の`Dev Containers`を使用すると、コンテナーを開発環境として使うことができます。

一度この仕組みで環境を用意したら、各開発者でまったく同じ環境が利用できたり、開発環境の構築が容易になります。またコンテナーなのでローカルの環境が汚れないというメリットもあります。

例えば、プロジェクトAではNode.js16系を使用する。プロジェクトBではNode.js18系を使用と場合に、従来はnvmなどを使用し使用するNode.jsバージョンを切り替えて使う方法などを取っていましたが、これを使うことでその手間も省けます。

## 環境

この記事の作業は、以下の環境で確認しました。

- MacBook Air (M1, 2020)
- macOS Ventura

## 前提

この記事の手順を実施する前提として、以下が満たされている必要があります。

- Docker Desktopがインストールされている
- Visual Studio Codeがインストールされている

https://qiita.com/cleyera_f/items/bdd3d33f13527604a663

https://qiita.com/cleyera_f/items/24bf47321fb3af05714f

## Dev Containersをインストールする

以下にVisual Studio Codeに拡張機能、Dev Containersをインストールする手順を記載します。

1. 拡張機能ボタンを選択し`Dev Containers`を検索しインストールします。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/b555b7ab-befb-6e92-a7cb-a2d17bd194f7.png)

2. 何事もなければインストールが完了します。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/fc01ab03-f9b9-a4d1-2148-3f07921fab3c.png)

## devcontainer CLIをインストールする

システムにdevcontainer CLIをインストールする手順を記載します。
devcontainer CLIとは、コマンドラインから各種操作を実行できるようにするためのコマンドです。

Visual Studio Codeからも操作はできますが、コマンドラインからも使用できると何かと役に立つと思います。

1. コマンドパレットを表示し`devcontainer cli`と入力します。`devcontainer CLI のインストール`が表示されるので選択します。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/07dfc1e7-658c-1442-8a63-83d9152c3de7.png)

2. シンボリックリンクの作成許可を求められるので作成を選択します。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/051007af-2d0d-2ffe-d2e7-218276ba57bc.png)

3. 権限を求められる旨のアラートが表示されます。OKを選択します。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/47e4caee-6c93-7ccd-c599-d226dd101add.png)

4. osascriptから権限を求められます。許可する場合はTouch ID認証、もしくはパスワードを入力し許可をします。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/3aa76701-8bdd-52d1-9755-352255ab0753.png)

5. インストールが完了します。OKを選択します。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/9dc0553b-f24c-128f-c75b-ae8b14cfcfb9.png)

ターミナルなどから`devcontainer`コマンドが使用できるようになっていると思います。

もし使用できないならターミナルの再起動や、パスが通っているかなど確認してください。（この場合の詳細は割愛します）

## Dev Containersの使用方法

実際の使用方法の一例を記載します。
以下の手順は、空の`project1`フォルダを開いた状態から開始しています。

1. Dev Containersボタン（ウィンドウ左下）を選択し、コンテナーを再度開くを選択します。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/39aabae3-bbc5-f6f8-f3db-ed1fc2805c0c.png)

2. ベースにするイメージの一覧が表示されるので選択します。ここでは`Node.js`を例に進めます。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/f78c82b6-aae0-811a-f22f-ed4489afd164.png)

3. 使用する`Node.js`のバージョンを選択します。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/907cd2dd-abe9-e4e7-b192-f940dc8c0e55.png)

4. 次に追加機能を選択します。ここではGitのみチェックしOKを選択します。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/59980675-ec14-762f-dbbb-750fd1587e1e.png)

5. イメージの作成などが行われます。完了するまでしばらく待ちます。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/40519aab-559a-c072-01bc-008bf5c01066.png)

6. 完了するとファイル一覧に、`.devcontainers`フォルダが確認できます。この中に`Dev Containers`関連のファイルが自動で作成されています。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/098fd13b-6988-caf0-8b2c-edb03e0a57bb.png)

7. `Visual Studio Code`のターミナルで、作成されたコンテナ上でのファイルやインストールされているツール類が使用できるようになっていることが確認できると思います。簡単な使用方法はこれで完了です。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/b37e3f4b-a12a-0880-7f50-4e739630ff16.png)

## 最後に

作成されるコンテナ環境は、自動で作成された`.devcontainer`フォルダ内のファイルに定義されています。Dockerfileなどを書き換えることでコンテナの環境を変更することもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/1a1e7fac-496f-9418-3820-1fa4f1beafc9.png)

また、docker-compose.ymlなども使用できますし、既存のプロジェクトですでにコンテナ環境を用意している場合はそれを参照することもできるので柔軟性はあると思います。