LoginSignup
1
2
@cleyera_f

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

Last updated at Posted at 2023-09-28

Visual Studio Codeを使用したDev 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がインストールされている

Dev Containersをインストールする

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

  1. 拡張機能ボタンを選択しDev Containersを検索しインストールします。
    image.png

  2. 何事もなければインストールが完了します。
    image.png

devcontainer CLIをインストールする

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

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

  1. コマンドパレットを表示しdevcontainer cliと入力します。devcontainer CLI のインストールが表示されるので選択します。
    image.png

  2. シンボリックリンクの作成許可を求められるので作成を選択します。
    image.png

  3. 権限を求められる旨のアラートが表示されます。OKを選択します。
    image.png

  4. osascriptから権限を求められます。許可する場合はTouch ID認証、もしくはパスワードを入力し許可をします。
    image.png

  5. インストールが完了します。OKを選択します。
    image.png

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

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

Dev Containersの使用方法

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

  1. Dev Containersボタン（ウィンドウ左下）を選択し、コンテナーを再度開くを選択します。
    image.png

  2. ベースにするイメージの一覧が表示されるので選択します。ここではNode.jsを例に進めます。
    image.png

  3. 使用するNode.jsのバージョンを選択します。
    image.png

  4. 次に追加機能を選択します。ここではGitのみチェックしOKを選択します。
    image.png

  5. イメージの作成などが行われます。完了するまでしばらく待ちます。
    image.png

  6. 完了するとファイル一覧に、.devcontainersフォルダが確認できます。この中にDev Containers関連のファイルが自動で作成されています。
    image.png

  7. Visual Studio Codeのターミナルで、作成されたコンテナ上でのファイルやインストールされているツール類が使用できるようになっていることが確認できると思います。簡単な使用方法はこれで完了です。
    image.png

最後に

作成されるコンテナ環境は、自動で作成された.devcontainerフォルダ内のファイルに定義されています。Dockerfileなどを書き換えることでコンテナの環境を変更することもできます。
image.png

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

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2