【VS Code】DockerのPython環境でリモート開発

はじめに

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

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

まだ正式版の機能ではありませんが、VS Codeがリモート開発に対応したということで試してみました。

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

関連

【VS Code】ポータブル版の利用

みなさんプログラミングの際にVS Codeを使っていますでしょうか。今回はポータブル版のインストールをしてみます。

【VS Code】オススメの設定・拡張機能・便利機能・ショートカット【決定版】

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

環境

参考

Remote Development with Visual Studio Code

VS Code remote support for WSL, Containers, and SSH

code.visualstudio.com

Developing inside a Container using Visual Studio Code Remote Development

Developing inside a Container using Visual Studio Code Remote Development

code.visualstudio.com

ちなみにPHPのリモート開発については、Qiitaに記事を投稿しました。

VS CodeでDockerのPHP環境でリモート開発 - Qiita

はじめに みなさんプログラミングの際にVS Codeを使っていますでしょうか。 私はよく使っています とても軽量ですし、必要最低限の機能はもちろん、ソースの管理や、デバッグ、強力な拡張機能など、非常に気にっております。 まだ...

qiita.com

VS Codeインストール

今のところ本機能（リモート開発）は正式版ではないので、Insidersビルドをダウンロードします。

Download Visual Studio Code Insiders

For early adopters, you can get the latest release of VS Code each day with the Insiders Build. Available on Mac, Linux and Windows.

code.visualstudio.com

私は「.zip」の64bit版をダウンロードしました。

起動と拡張機能のインストール

zipファイル解凍後、「Code – Insiders.exe」をダブルクリックし起動します。

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

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, or in WSL and take advantage of VS Code'...

marketplace.visualstudio.com

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

Dockerの用意

今回はWindowsを使用しており、WindowsにDockerをインストールしました。
インストール後、Dockerの共有フォルダの設定も行います。
以前書いた記事を参考にしてください。

関連

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

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

Pythonプロジェクトの用意

前回スクレイピングの記事をまとめました。
この環境をVS CodeからDockerのコンテナへリモートデバッグを行います。

関連

【Python】スクレイピング(基本から実践) + docker(おまけ)

Pythonでスクレイピングを行ってみたいと思います。Webサイトのデータを自動的に取得してみましょう！Dockerでの環境も用意しました。

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

ファイル構成は以下です。
Pythonファイルは何でも良いですが、前回の記事を参考にしてください。

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

{
	"name": "Python Sample",
	"dockerFile": "Dockerfile",
	"extensions": [
		"ms-python.python"
	]
}

Dockerfileを定義します。
自分で作成したスクレイピング用のイメージを使用しました。
今回はコンテナ上でデバッグするので、pylintもインストールします。

FROM chigusaweb/python-scraping

# Install pylint
RUN pip install pylint

launch.jsonを以下のようにしました。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Scraping",
            "type": "python",
            "request": "launch",
            "program": "${file}",
            "console": "internalConsole"
        }
    ]
}

VS Codeの準備

VS Codeの左下の緑のアイコンをクリックします。

Remote-Containers: Open Folder in Container…を選択します。

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

以下のようにVS Codeが表示されました。

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("ダウンロード完了")

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

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

きちんと前回の記事と同じく、実行ができました。

さいごに

VS Codeのリモート開発は素晴らしいですね！
ただ現状、やや不安定なイメージがありました。
(エラーが発生したり、上手く構築できなかったりなど・・)
まだ正式版ではありませんが、今後に期待です😊