既存の docker-compose.yml を Dev Containers で利用する方法

• この記事で改善できること
• 実行環境
• コンテナー環境の構築
• Dev Containers 拡張機能を使う

この記事で改善できること

Docker 環境のためインストールした Python パッケージの補完が VSCode で使えないといったことの改善。
他の言語でも同様の内容を改善できると思います。

実行環境

PC	Mac mini M1, 2020
仮想環境	Docker
エディター	VSCode
VSCode 拡張機能	Remote Development

コンテナー環境の構築

Dev Container を使用する前に Docker 環境の構築を始めます。
まず使用するフォルダーを作成し、VSCode で開きます。

ターミナルで以下のコマンドを実行します。

mkdir devcontainer-sample
cd devcontainer-sample
code .

アプリケーション開発用のフォルダーとファイルの作成をします。

mkdir src
touch src/main.py src/requirements.txt

FastAPI を実行するための依存関係を記述します。

src/requirements.txt

anyio==3.6.2
click==8.1.3
fastapi==0.95.2
h11==0.14.0
idna==3.4
pydantic==1.10.7
sniffio==1.3.0
starlette==0.27.0
typing_extensions==4.5.0
uvicorn==0.22.0

コンテナーでの動作確認用に以下の記述をします。

src/main.py

from fastapi import FastAPI

app = FastAPI()


@app.get("/")
def read_root():
    return {"Hello": "World"}

次に Dockerfile と docker-compose.yml の作成を行います。

touch Dockerfile docker-compose.yml

Dockerfile

FROM python:3.11-slim

WORKDIR /src

COPY ./src/requirements.txt .
RUN pip install -r requirements.txt

docker-compose.yml

version: '3'
services:
  fastapi:
    build: .
    volumes:
      - ./src:/src
    ports:
      - 8000:8000
    command: uvicorn main:app --host 0.0.0.0 --reload

コンテナーの起動をします。

docker compose up -d

ブラウザーで http://localhost:8000/ を開き、{"Hello":"World"} と表示されれば動作の確認完了です。

コンテナーを停止させます。

docker compose down

Dev Containers 拡張機能を使う

mkdir .devcontainer
touch .devcontainer/devcontainer.json

.devcontainer/devcontainer.json

{
  "dockerComposeFile": "../docker-compose.yml",
  "service": "fastapi",
  "workspaceFolder": "/src"
}

service に記述する値は docker-compose.yml で services に記述した値を使います。

workspaceFolder はコンテナー内のフォルダーを指定します。
そのフォルダーを VSCode で開くことになります。

F1 を押し、入力欄に >Dev Containers: Reopen in Container と記述し Enter でリモートコンテナー環境を実行します。

ブラウザーで http://localhost:8000/ を開き、{"Hello":"World"} と表示されれば動作の確認完了です。

F1 を押し、入力欄に >Dev Containers: Reopen Folder Locally と記述し、Enter でリモートコンテナー環境を終了し VSCode で元のフォルダーを開きます。