自分だけのクイズ作成 - Quipha公開中

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

VS Code
スポンサーリンク

はじめに

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

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

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

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

わざわざローカルPCに実行環境(例えばAnaconda等)を用意しなくても、リモート先で直接開発ができるためとても便利ですね!

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

環境

今回試した環境
  • Windows 11 / 10
  • macOS Monterey (M1)
  • Visual Studio Code
  • Docker – Python

2022/04/20 WindowsとMacを使い、最新バージョンで確認しました。
この記事を書いた当時は、VS CodeのInsidersビルドにしか対応していませんでしたが、今は普通に使えます。

参考

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

Developing inside a Container using Visual Studio Code Remote Development
Developing inside a Container using Visual Studio Code Remote Development

リモート開発のメリット

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

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

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

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

今回は、Pythonの開発環境をコンテナ上に構築しますが、他の言語や開発環境もやり方は同じです。
Dockerfileの定義で実行環境を自由に用意できます。

VS Codeインストール

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

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

以降の説明の画面キャプチャはWindows版のVS Codeですが、Mac版も同様の手順で動作確認済みです。

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

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

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

Remote - Containers - Visual Studio Marketplace
Extension for Visual Studio Code - Open any folder or repository inside a Docker container and take advantage of Visual Studio Code's full feature set.

VS Code上から拡張機能を検索し、「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, or in WSL and take advantage of VS Code'...

こちらは、「Remote – SSH」「Remote – Containers」「Remote – WSL」の3つの拡張機能を含んでいるようです。

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

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

スポンサーリンク

Dockerの用意

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

Windows
Mac

Pythonプロジェクトの用意

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

最低限、Pythonが実行できる環境を構築します。
もちろんローカルPCにはPythonはインストールされておりません。

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

vscode-remote-scraping-python

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

/
└ .devcontainer/
  ├ devcontainer.json
  └ Dockerfile

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

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

仕組みとして、リモート先のコンテナにもVS Codeがインストールされます。
そのVS Codeにインストールする拡張機能や、設定などを指定することができます。

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

FROM python:3.6

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

docker-compose.ymlの指定もできます。

VS Codeの準備

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

「Open Folder in Container…」を選択します。

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

完了しました。

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

Pythonの動作確認

実行

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

test.py
print("remote")
print("debug!")

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

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

デバッグ

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

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

ローカルPCにはPython環境がなくても、コンテナ上の環境で実行されていることが確認できました。

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

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

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

FROM python:3.6

RUN pip3 install beautifulsoup4
RUN pip3 install html5lib

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

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

コンテナを再作成します。
左下の緑のボタンをクリックし、「Rebuild Container」を選択します。

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上のパスであることが確認できます。

/workspaces/vscode-remote-scraping-python/

使用例

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

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

さいごに

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

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

\オススメ/

コメント

タイトルとURLをコピーしました