当サイトは、アフィリエイト広告を利用しています

【VScode】VScodeのDev Containersでコンテナ開発する

作成日：2023月11月04日
更新日：2024年03月09日

Dockerコンテナを作って、そのコンテナ内の開発を
VScodeを使って行う方法をまとめる

Dockerコンテナ内での作業はVScodeの拡張機能「Dev Containers」
を使わない場合は基本はterateamやWindowsTerminalなどで
コンテナにログインして行うことになるので
VScode上でコンテナ内の作業を行うえるようになるのは
かなり便利だと思う

ちなみに開く対象がコンテナではなくリモートサーバーの場合は remoteSSHという拡張機能が使える

VScodeの拡張機能「Dev Containers」は拡張機能「Remote Development」を
インストールすれば、それに含まれているので一緒に入手することができる。

2024-03-09-20-02-58

「Remote Development」にはVScodeでリモート開発する際に便利な拡張機能が
まとめられているので、特に理由がなければ「Remote Development」を入れておく。

環境

下記の環境で行う

  • Windows10
  • Docker version 24.0.2(Docker for Windows)
  • VScode
  • Devcontainer(VScodeの拡張機能)

Docker for Windowsのインストール方法については下記記事で 紹介しています

dockerコンテナの設定

まずはコンテナを作る必要がある

サンプルとしてPythonの開発環境をコンテナで作り
そのコンテナに対して、VScodeからコンテナ開発する方法
を実施する

コンテナで開発環境を作る場合は
ローカルにはDockerだけあればいいので
Pythonはいれなくてもよく、ローカル環境が
汚れないので良い

docker-compose.yml作成

コンテナはdocker-composeを使って作成する

yml
version: "3"
services:
  python3:
    container_name: "container_python3"
    # imageを指定
    image: "python:3.10"
    tty: true
    # プロジェクトをバインドマウント
    volumes:
      - .:/workspace

image

コンテナと元となるimageを指定する
今回はPythonの開発環境を作るので
「python:3.10」のimageを使う

tty

trueにするとコンテナ内で対話的なシェルセッションを開始できる
※コンテナ内に入って操作するならつけといたほうが無難。

volumes

「ホスト側の相対Path:コンテナの絶対Path」で設定し
ホストとコンテナのvolumeをバインドさせておく

これでコンテナ内の編集はローカルの方へ反映されるようになるので
コンテナを削除してもローカルに変更分は残るようになる。

VScodeからコンテナを開く方法

VScodeのDev Containersを使ってコンテナをVScodeで開く場合
大きく2つ方法がある

  • dockerコマンドで作成済のコンテナをVScodeから開く
  • VScode上でコンテナ作成して開く

それぞれのやり方をまとめる。

dockerコマンドで作成済のコンテナをVScodeから開く

docker composeで作ったコンテナにVScode
からアクセスできるイメージ。

後述するがこちらはVScodeのDev Containersの設定ファイルである

  • devcontainer.json

は作らない。
そのためdevcontainer.jsonでの細かな設定はできないが
その分、設定はdocker-compose.yml内に全て書くため、シンプルではある。

構成

構成は下記のようになる

構成
.
|-- app
|   `-- main.py       
`-- docker-compose.yml

main.py

サンプルのファイル。

main.py
print("hellow world")

docker-compose.yml

「dockerコンテナの設定」で作成したものと
同じ。変更なし

dockerコマンドでコンテナ作成

まずはdocker composeでコンテナをつくる

GitBash
$ docker compose up -d
[+] Building 0.0s (0/0)                                                                                                                                                                         docker:default
[+] Running 2/2
 ✔ Network pythonorg-base_default  Created                                                                                                                                                                0.0s 
 ✔ Container container_python3     Started                                                                                                                                                                0.1s 


$ docker ps
CONTAINER ID   IMAGE         COMMAND     CREATED         STATUS         PORTS     NAMES
826bbad45fdf   python:3.10   "python3"   6 seconds ago   Up 5 seconds             container_python3

コンテナ作成完了！

VScodeからコンテナを開く

作成したコンテナをVScodeのDev Containersを使って開く

リモートエクスプローラーで開く

Dev Containersをインストールしていると
リモートエクスプローラが表示されているので 2023-11-05-01-28-53

  • リモートエクスプローラをクリック
  • 開発コンテナを選択
  • 現在のウインドウか新しいウインドウで開く
    ※×ボタンを押すとコンテナが削除されるので注意

VScodeからコンテナ内の操作ができる

コンテナの画面が開く。 2023-11-05-01-34-15

コンテナ画面を閉じる

コンテナ画面を終了したい場合は
×ボタンで閉じるか、左下のコンテナ名をクリックすると
リモート接続を終了するがあるのでそれを選択する
2023-11-05-01-38-47

VScodeの画面を閉じても、コンテナは停止されない。

コンテナのVScode拡張機能について

「dockerコマンドで作成済のコンテナをVScodeから開く」の場合
VScodeの拡張機能はインストールされないので
自分で追加する必要がある。

またコンテナを削除した場合は、VScodeの拡張機能も消えるので
インストールしなおす必要がある。

スクリプト使ってを使って拡張機能を一括インストール方法があるので
そのスクリプトをつくっておけば、さほど手間ではないと思う。
下記で紹介しています。

VScode上でコンテナ作成して開く

こちらはコンテナ作成からVScodeで実行する
VScodeのDev Containersの設定ファイルである

  • devcontainer.json

を作成することで
コンテナ作成時の細かい設定が可能。

構成

構成は下記のようにする

構成
.
|-- .devcontainer        
|   `-- devcontainer.json
|-- app
|   `-- main.py
`-- docker-compose.yml

.devcontainerを増やす
他は変更なし。

Dev Containersの設定

VScodeの拡張機能のDev Containersの開発コンテナの
設定をしていく

.devcontainer/devcontainer.json

.devcontainer/devcontainer.jsonを作成する

devcontainer.json
{
    // コンテナ名(vscode上の)
    "name": "python3_vscode",
    // コンテナ作成に使うdocker-comopseファイルの相対パス
    "dockerComposeFile": "../docker-compose.yml",
    // サービス名
    "service": "python3",
    // コンテナ内のプロジェクトのルートフォルダを指定
    "workspaceFolder": "/workspace",
    // コンテナ停止時のアクション
    "shutdownAction": "stopCompose",
    // コンテナに入れるVScodeの拡張機能
    "extensions": [
        "ms-python.python",
    ]
}

name

vscode上で見えるコンテナ名

dockerComposeFile

コンテナ作成に使うdocker-comopseファイルの相対パスで指定する

service

docker-compose.yml内のserviceのうち
VScodeで開きたいコンテナのサービス名を指定する

docker-compose.ymlで複数コンテナを作ってる場合でも
VScodeで開けるのはそのうちの一つのみ

workspaceFolder

コンテナを開いたときのルートフォルダを指定する

shutdownAction

VScodeでコンテナ画面を閉じた時、コンテナを
どうするかの設定
stopComposeは画面を閉じた時にコンテナを停止する

extensions

コンテナ作成と同時にインストールする
VScodeの拡張機能を指定できる

これが便利！

その他の設定項目について

remoteEnv、workspaceMount、remoteUserなど
いろいろあるが、docker-compose.ymlで設定できる
項目と重複していたり、使い方がよくわからなかったりするので
一旦は、上記ぐらいの設定をするようにしている

また便利な使い方があれば追記しようと思う。

.devcontainer/devcontainer.jsonの自動作成

実は.devcontainer/devcontainer.jsonは
VScodeからコンテナを作成した場合は、デフォルトで
勝手に作成してくれる。

ただ中身は自分で編集する必要があるので
先に作っておいた方がいいと思う。

VScodeからコンテナ作成

devcontainer.jsonができたら
VScodeからコンテナを作る

コンテナで再度、開く

F1でコマンドパレットを開いて、「コンテナで再度、開く」
を実行すればコンテナを作ってくれる。
2023-11-05-02-01-42

※devcontainer.jsonがなかった場合
このタイミングで自動で作られる。

コンテナ作成

2023-11-05-02-03-47

  • VScodeの拡張機能が自動でインストールされる
  • コンテナ名が指定したものになる

コンテナを閉じる

「dockerコマンドで作成済のコンテナをVScodeから開く」と同じ
要領でコンテナを閉じるとコンテナも停止する 2023-11-05-02-06-58

拡張機能がインストールされない場合

会社などでプロキシを利用している場合は、拡張機能がうまく
インストールできないことがある。
※具体的にはインストールずっと終わらない

その場合は、VScodeでプロキシの設定をすれば
インストールできるようになる

VScodeでプロキシを設定する方法については下記記事で紹介
しています

まとめ

VScodeの拡張機能「Dev Containers」を使った
コンテナ開発のやり方を自分なりにまとめてみた

個人的には、基本はdocker-compose.ymlで設定して
使いやすくするため細かいところをVScodeの拡張機能インストールをdevcontainer.jsonで
設定する使い方をしている。

ただまだ使い始めたところなので
もっと便利な使い方を探していこうと思う。

新着記事

目次
タグ別一覧
top