【VS Code/Python】Dockerコンテナの環境でリモート開発【Win/Mac】

はじめに

みなさんプログラミングの際にVS Codeを使っていますでしょうか。
私はよく使っています！

とても軽量ですし、必要最低限の機能はもちろん、ソースの管理や、デバッグ、強力な拡張機能など、非常に気に入っております。

今回はVS CodeでDockerを使ったリモート開発を試してみました。
驚くほど簡単に使うことができます。

Dockerを使いPython環境を用意し、VS Codeでリモートデバッグを行います。

他にも私のブログで、VS Codeについて解説している記事がありますのでご覧ください。

環境

参考

詳しくは以下の記事を参考にしてください。

Developing inside a Container using Visual Studio Code Remote Development

Developing inside a Container using Visual Studio Code Remote Development

code.visualstudio.com

リモート(Dockerコンテナ)開発のメリット

VS Codeの起動はローカルPC、実行環境はリモート(Dockerコンテナ)先と分けることにより、ローカルPCの環境を汚すことがありません。
コンテナ上に環境を用意すれば、ローカルPCに色々と開発に必要なライブラリなどをインストールする必要がないためです。

Dockerコンテナは、不要になれば破棄することもできますし、様々なプロジェクトの開発環境が必要な場合、各コンテナごとに環境を用意できますので便利です。

今回はDockerコンテナを利用してリモート開発を行いますが、複数人で開発する際に、同じ開発環境を用意することができます。

他にも、SSHでのリモート開発もサポートしておりますので、Linuxでしか動かないアプリの開発や、クラウド環境にリモート接続し、ローカルPCのVS Codeで編集といったこともできます。

VS Codeインストール

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

【VS Code】インストール手順を解説 【Windows/M1 Mac対応】

今回はVS Codeのインストール手順を解説します。WindowsとMacのそれぞれ分けてまとめました。

chigusa-web.com

2023/05/12

VS Codeのオススメ設定や拡張機能などは、以下の記事にまとめました。

【VS Code】オススメの設定・拡張機能・便利機能・ショートカット【Win/Mac対応】

私的に最初に行う設定や、拡張機能、よく使うショートカットや便利な機能をまとめてみました。

chigusa-web.com

2023/12/19

拡張機能(Dev Containers)のインストール

VS Codeを起動しましょう。
何も拡張機能が入っていない状態ですが、日本語パックだけはインストールしました。

以下の拡張機能をインストールします。

Dev Containers - Visual Studio Marketplace

Extension for Visual Studio Code - Open any folder or repository inside a Docker container and take advantage of Visual ...

marketplace.visualstudio.com

VS Code上から拡張機能を検索し、「Dev Containers」をインストールします。

ちなみに以前は、「Remote-Containers」という名称でした。

別な拡張機能で、「Remote Development」というのもあります。

Remote Development - Visual Studio Marketplace

Extension for Visual Studio Code - An extension pack that lets you open any folder in a container, on a remote machine, ...

marketplace.visualstudio.com

今回は、リモート先にDockerコンテナを利用しますので、「Dev Containers」拡張機能のみインストールしました。

インストールした拡張機能は、以下の２つだけです。
Pythonの拡張機能含め、開発に必要なものはリモート先にインストールしますので、ローカルPCのVS Codeはこれだけにしました。

Dockerの用意

Macの場合はDockerのみですが、Windowsの場合はDocker(WSL2がバックエンド)が必要です。
Dockerのインストール方法は、以下の記事をご覧ください。

【Docker Desktop】Windowsにインストール（WSL2）

WindowsにDockerをインストールする手順を解説します。ついでにPython環境を、コンテナに構築してみたいと思います。

chigusa-web.com

2023/10/30

【Docker Desktop】Macにインストール【Monterey/M1】

MacにDockerをインストールする手順を解説します。ついでにPython環境を、コンテナに構築してみたいと思います。

chigusa-web.com

2023/05/12

Pythonプロジェクトの用意

.devcontainerフォルダ作成

VS CodeからDockerのコンテナへリモートデバッグを行います。

任意のフォルダを作成します。

「.devcontainer」フォルダを作成し、その中にこのようにファイルを作成します。

devcontainer.json

devcontainer.jsonの中身を以下のようにしました。
Dockerfileで作成ということと、拡張機能のインストールを記述します。

{
	"name": "Python Sample",
	// Dockerfileでイメージ・コンテナを作成
	"dockerFile": "Dockerfile",
	// リモート先のVS Codeにインストールする拡張機能
	"customizations": {
		"vscode": {
			"extensions": [
				"ms-python.python"
			]
		}
	},
}

Dockerfile

Dockerfileを定義します。
簡単に動作確認するために、Pythonイメージを利用しました。

FROM python:3.7

設定はこれだけです。リモート先の設定と、Dockerコンテナの定義をしました。

VS Codeの準備

VS Codeを起動し、F1キーを押しコマンドパレットを開きます。
「Open Folder in Container」と入力し選択します。

参考までに以前とメニューの表示方法が変わりました。

【VS Code】Dev Containersで「Open Folder in Container」などのメニューが表示されない

Dev Containers拡張機能のメニューの表示に仕様変更があったためまとめました。

chigusa-web.com

2023/09/03

その後、先程作成したフォルダを選択します。
プロジェクトにはDockerの設定も含まれているため、初回起動時にはイメージとコンテナが自動で作成されます。

完了しました。

リモート先のVS Codeに拡張機能が追加されているのが確認できます。

Pythonの動作確認

実行

適当なPythonファイルを作成してみましょう。

print("remote")
print("debug!")

F5を押して実行してみます。「Python File」を選択しました。

きちんと実行することができました。

デバッグ

試しにソースコードにブレークポイントを貼り、デバッグしてみました。

先程同様に実行してみると、ブレークポイントで止まっていることがわかります。

Pythonスクレイピングサンプル

次に、以下の記事のコードを実行してみましょう。

コンテナ上に、Pythonのライブラリをインストールします。
今回はDockerfileに追記しました。

FROM python:3.7

RUN pip3 install beautifulsoup4
RUN pip3 install html5lib

余談ですが、devcontainer.jsonに、コンテナ作成時にコンテナ内でコマンドを実行することもできます。
以下でも同様のことが実現できます。（今回は不要です）

{
	"name": "Python Sample",
	// Dockerfileでイメージ・コンテナを作成
	"dockerFile": "Dockerfile",
	// リモート先のVS Codeにインストールする拡張機能
	"customizations": {
		"vscode": {
			"extensions": [
				"ms-python.python"
			]
		}
	},
	// コンテナ生成時にコマンド実行
	"postCreateCommand": "pip3 install beautifulsoup4 && pip3 install html5lib",
}

コンテナを再作成します。
F1キーを押しコマンドパレットから「Rebuild Container」を選択します。

もし①のPythonのバージョンが3.7(Dockerfileで指定したバージョン)ではない場合、Pythonのバージョンを指定します。

前回スクレイピングで作成したPythonファイルを作成しました。

import os
from urllib.request import urlretrieve

print("ダウンロード開始")

# HTMLファイル 保存先のディレクトリ
save_dir = os.path.dirname(os.path.abspath(__file__)) + "/html/"

# 存在しなければディレクトリ作成
if not os.path.exists(save_dir): 
    os.mkdir(save_dir)

# htmlをダウンロードするURL
# ここでは千草ウェブのトップページ
download_url = "https://chigusa-web.com/"

# 保存先
save_file = save_dir + "/chigusa.html"

# ダウンロード
urlretrieve(download_url, save_file)

print("ダウンロード完了")

import os
from bs4 import BeautifulSoup

print("HTML解析開始")

# HTMLファイル 保存先のディレクトリ
save_dir = os.path.dirname(os.path.abspath(__file__)) + "/html/"
# HTMLファイルパス
html_file = save_dir + "/chigusa.html"

# ファイルの読み込み
with open(html_file, encoding='utf-8') as f:

    bsoup = BeautifulSoup(f, "html5lib")

    # HTMLから該当の文字を取得(CSSセレクターを指定)
    ele = bsoup.select_one(".entry-body > h2:nth-child(4)")

    if ele is None:
        print("見つかりませんでした")
    else:
        print("見つかりました：" + ele.string)

print("HTML解析終了")

どちらのコードも問題なく実行することができました。

ライブラリにマウスオーバーしてみると、Dockerコンテナ上のPython環境のライブラリのドキュメントが表示されています。
当然ながらVS Codeを実行しているWindows(またはMac)にはPython環境は入っていません。

F5を押してデバッグしてみます。
きちんとブレークポイントで止まりますし、os.pathの値がDocker上のパスであることが確認できます。

使用例

例えば、Djangoプロジェクトでも使用することができます。

【Python+Django4】VS Code+Dockerで簡単構築【リモート開発】【Win/Mac】

Djangoの開発環境を、VS CodeとDockerを使用して簡単に構築し、リモート開発を行います。

chigusa-web.com

2024/02/18

PHPの環境などの使用例も参考にしてください。

【VS Code】PHP環境のリモート開発・デバッグ【Dockerコンテナ】

VS CodeでDockerを使ったリモート開発を試してみました。Dockerを使いPHP環境を用意し、VS Codeでリモートデバッグを行います。

chigusa-web.com

2023/09/14

【VS Code】Java環境のリモート開発・デバッグ【Dockerコンテナ】

VS CodeでDockerを使ったリモート開発を試してみました。Dockerを使いJava環境を用意し、VS Codeでリモートデバッグを行います。

chigusa-web.com

2023/09/14

GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。

【GitHub Copilot】登録方法の解説と試してみた

GitHub Copilotを試してみました。登録方法の解説や、実際に試した結果をまとめました。

chigusa-web.com

2023/09/01

さいごに

VS Codeのリモート開発は素晴らしいですね！
ローカルPCの環境を汚さず、コンテナで開発環境を作成することができます。
手順も面倒ではないので、ぜひ活用しましょう。

他にも私のブログで、VS Codeについて解説している記事がありますのでご覧ください。