VSCodeのDev Containerを使って開発環境を手軽に設定する方法

IT・プログラミング

Dev Containerとは?

Dev Containerは、VSCodeが提供する機能の一つで、プロジェクトごとに異なる開発環境をDockerコンテナとして構築し、VSCode上で利用できるようにします。これにより、開発者は以下のメリットを享受できます。

  • 一貫した開発環境:開発チーム全員が同じ環境で作業できるため、環境の違いによるバグの発生を防ぎます。
  • 依存関係の管理:プロジェクトごとの依存関係をコンテナ内で管理するため、ローカル環境を汚さずに複数のプロジェクトを扱うことができます。
  • 迅速なセットアップ:新しいプロジェクトを開始する際、環境設定にかかる時間を大幅に短縮できます。

前提条件

  • Docker for desctop
  • VSCode
  • DevContainer(VSCodeの拡張)

詳しいインストール方法などは以下の記事で紹介しています。

DevContainerを手軽に試す

DevContainerにはいくつかサンプルが存在します。その中のPython環境でFlaskを動かすサンプルを起動してみたいと思います。

まずは、コマンドパレット(Ctrl+Shift+P)で
Dev Containers: Try a Dev Container Sampleを検索し、選択します。

Pythonを選択します。

しばらくすると選択した環境が起動します。

このサンプルはFlaskアプリのサンプルのため、
ターミナルに以下コマンドを入力して、ローカルホストにアクセスすると、アプリの実行を確認できます。

python -m flask run --port 9000 --no-debugger --no-reload

処理の内容

どのような設定で環境が作られているか確認したい場合は、.devcontainer/devcontainer.jsonを確認します。

{
    "name": "Python 3",
    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
    "image": "mcr.microsoft.com/devcontainers/python:1-3.12",

    // Features to add to the dev container. More info: https://containers.dev/features.
    // "features": {},

    // Configure tool-specific properties.
    "customizations": {
        // Configure properties specific to VS Code.
        "vscode": {
            "settings": {},
            "extensions": [
                "streetsidesoftware.code-spell-checker"
            ]
        }
    },

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // "forwardPorts": [9000],

    // Use 'portsAttributes' to set default properties for specific forwarded ports. 
    // More info: https://containers.dev/implementors/json_reference/#port-attributes
    "portsAttributes": {
        "9000": {
            "label": "Hello Remote World",
            "onAutoForward": "notify"
        }
    },

    // Use 'postCreateCommand' to run commands after the container is created.
    "postCreateCommand": "pip3 install -r requirements.txt"

    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
    // "remoteUser": "root"
}

コードの説明

  1. "name": "Python 3":
    – この開発コンテナの名前を指定しています。ここでは「Python 3」としています。

  2. "image": "mcr.microsoft.com/devcontainers/python:1-3.12":
    – 使用するDockerイメージを指定しています。この場合、Python 3.12がインストールされたMicrosoftの公式DevContainerイメージを使用しています。

  3. "customizations":
    – 開発環境のカスタマイズ設定を行います。

  • "vscode":

    • VS Codeに関する設定を行います。

    • "settings": {}:

    • VS Codeの設定を追加できますが、ここでは特に設定は追加されていません。

    • "extensions": ["streetsidesoftware.code-spell-checker"]:

    • VS Codeの拡張機能をインストールします。ここではコードスペルチェッカーをインストールしています。
  1. "forwardPorts": [9000]:
    – コンテナ内で動作するアプリケーションのポートをローカルマシンにフォワードする設定です。ここではポート9000をフォワードしています。

  2. "portsAttributes":
    – フォワードされるポートの属性を設定します。

  • "9000": { "label": "Hello Remote World", "onAutoForward": "notify" }:
    • ポート9000に関する設定で、ラベルとフォワード時の通知を設定しています。
  1. "postCreateCommand": "pip3 install -r requirements.txt":
    – コンテナ作成後に実行するコマンドを指定しています。ここでは、requirements.txtに記載されたPythonの依存関係をインストールするコマンドを指定しています。

  2. "remoteUser": "root":
    – コメントアウトされていますが、有効にするとコンテナにrootユーザーとして接続できます。デフォルトでは非rootユーザーが使用されます。

タイトルとURLをコピーしました