【VSCode】Docker の Python 環境でリモート開発を行う（Remote - Containers）

VSCode の Python開発環境で、Pylint を使っている時に、以下のような Lint エラーが出た。

Unable to import '****' pylint(import-error)

問題なくモジュールを使うことができるのに、VSCode 上で Lintエラーが出てしまっていた。この点に関して、どのような開発環境を用意すべきか調べたので、備忘録として残しておく。

開発環境概要
Lint エラーの原因
Remote - Containers の導入
まとめ

開発環境概要

f:id:serip39:20201029131457p:plain

今回の開発は Docker 環境を用いて行っていた。そして、コーディングはローカルのPCで VSCode を使っていた。実装したコードを実行する場合は、以下のコマンドでコンテナに入って、コマンドを実行していた。

$ docker-compose exec python bash
bash-5.0#

そして、docker上の Python には pip でコンテナ起動時にモジュールをインストールしていた。

Lint エラーの原因

今回、Lint エラーが出ていたのは、pip でインストールしているはずのモジュールが認識されていないことが問題で発生していた。（コードを実行した場合には、問題なくモジュールを使うことができていたので、VSCode 上の問題であることが発覚した。）

そして、VSCode上では、setting.jsonで以下のような設定になっていた。

{
  "python.pythonPath": "/usr/local/opt/python@3.8/bin/python3.8",
}

モジュールは Docker の Python 上にインストールしているにも関わらず、VSCode はローカルの Python を参照しているので、モジュールを参照できずに Lint エラーが出ていた。

Remote - Containers の導入

VS Code上でどうやって Docker を参照させるのかと思い、検索すると、拡張機能で「Remote - Containers」があったので使ってみた。

marketplace.visualstudio.com

動作確認をした環境は以下の通りである。

macOS Catalina Version 10.15.7
Docker Desktop for Mac Version 2.3.0.5 (48029)
Visual Studio Code Version 1.50.1
Remote - Containers Version 0.147.0

インストール

VSCode上の拡張機能ビューで、「Remote Containers」と検索してインストールする。インストールが完了すると、VSCodeの下にアイコンが表示される。

f:id:serip39:20201029145022p:plain

設定

今回、ディレクトリ構造は以下のようになっている。

├── docker-compose.yml
├── docker/python
│   ├── Dockerfile
│   └── requirements.txt
├── .devcontainer
│   ├── devcontainer.json
│   └── docker-compose.extend.yml
├── src
│   ├── manage.py
│   └── app/

リモート開発環境の設定は、 .devcontainer フォルダの中に設定ファイルを置いている。今回は、pythonの環境で、Django + MySQL のアプリケーション開発を行う環境となっている。docker/python/requirements.txt に関しては、pipでインストールしたいモジュールを列挙して記載している。

version: '3'

services:
  db:
    container_name: nora_mysql
    image: mysql:latest
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: django_project
      MYSQL_USER: django
      MYSQL_PASSWORD: django
      TZ: Asia/Tokyo
    ports:
      - 3306:3306
    expose:
      - 3306
    volumes:
      - ./docker/mysql/my.cnf:/etc/mysql/conf.d/my.cnf
      - ./db/mysql_data:/var/lib/mysql
    security_opt:
      - seccomp:unconfined

  python:
    container_name: django
    build: ./docker/python
    command: python3 manage.py runserver 0.0.0.0:8000
    volumes:
      - ./src:/code
    ports:
      - 8000:8000
    depends_on:
      - db

FROM python:3.9-alpine3.12
ENV PYTHONUNBUFFERED 1

RUN apk --update add tzdata bash vim && \
    cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime && \
    apk del tzdata && \
    rm -rf /var/cache/apk/*

RUN mkdir /code

WORKDIR /code
ADD ./requirements.txt /code/

RUN pip3 install -r requirements.txt
ADD . /code/

EXPOSE 8000

docker-compose.yml で Django の開発を行うための設定を記載し、リモート開発用の設定を「docker-compose.extend.yml」で追加する。

version: '3'
services:
  python:
    environment:
      - HOME=/code/remote-dev

environment で環境変数 HOME を明示的に指定し、リモート開発サーバーや拡張機能等の環境をインストールする先を設定している。

次に、リモート開発サーバーや拡張機能等の設定を「devcontainer.json」に記述する。

{
  "name": "Docker-Python",
  "dockerComposeFile": [
    "../docker-compose.yml",
    "docker-compose.extend.yml"
  ],
  "service": "python",
  "workspaceFolder": "/code",
  "settings": {
    "editor.tabSize": 4,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "terminal.integrated.shell.linux": "/bin/bash",
    "python.pythonPath": "/usr/local/bin/python",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "python.formatting.provider": "black",
    "python.linting.pylintEnabled": true,
    "python.linting.pylintArgs": [
      "--load-plugins",
      "pylint_Django",
    ]
  },
  "extensions": [
    "ms-python.python",
    "dbaeumer.vscode-eslint",
  ],
  "shutdownAction": "stopCompose"
}

name：VS Code に表示されるワークスペース名
dockerComposeFile：docker-compose.ymlのファイルパスを指定する
service：Docker Containerのサービス名
workspaceFolder：VS Code で開くワークスペースのディレクトリ
settings：VSCodeのの設定を記述（保存時に、blackで自動的にフォーマットされるようにしている）
extensions：リモート開発環境にインストールする拡張機能（pythonとeslintをインストールに指定。）
shutdownAction：「stopCompose」の場合、VS Code を閉じた際に、コンテナが自動的に停止する。「none」の場合、コンテナは起動したままになる。