【初心者向け】VSCodeとDockerでリモート開発を行う方法

はじめに

これまでDockerfileやdocker-composeを使って、環境構築および構成情報をファイルとして作成しコンテナ起動を行うことができました。
Dockerfileについて↓
関連記事

はじめに Dockerで開発環境を構築する際に、pythonのように最初から実行環境が用意されているものもあれば、自分でインストールを行う必要があるものもあります。 また、開発プロジェクトや案件によって必要な機能は[…]

dockerfile_アイキャッチ
docker-composeについて↓
関連記事

はじめに これまでDockerで仮想環境を作成して開発環境を簡単に構築する方法をまとめてきましたが、実際のサービスとしてプログラミング開発を行うとなった場合にコンテナ一つで進めるのはまれです。 例えば、このブログは[…]

docker-compose_アイキャッチ

ファイルはコンテナとローカルPCのフォルダ共有を行うことでVSCodeで編集することができますが、実行環境がコンテナ内にある以上、パッケージを追加した際の依存関係であったり、デバッグ実行ができないという欠点があります。

そこで、今回はVSCodeの拡張機能である「Dev Containers」を利用してコンテナにリモートアクセスし、ローカルPCのファイルを操作するのと同じ感覚で開発が行える方法を説明します。

動作環境

 Windows10

 Docker Desktop

 VSCode

Dockerについて

そもそものDockerについて、インストール方法を以下の記事で紹介しています。

関連記事

はじめに プログラミングを行う際に実行環境を構築する必要がありますが、普段利用しているローカルPCに直接インストールしてしまっては、トライアンドエラーを繰り返すうちに不要なアプリケーションが積み重なり動作が不安定にな[…]

begindocker_アイキャッチ

VSCodeについて

VSCodeの拡張機能を利用するため、まだインストールしていない方は以下の記事を参考にしてください。
関連記事

はじめに 皆さんはプログラミングを行う際にエディターは何を使っていますでしょうか? 秀丸エディタ?、NotePad++?、サクラエディタ?、それともメモ帳でしょうか? Linuxの人はviやvim、emacsなど[…]

vscode_アイキャッチ

拡張機能「Dev Containers」のインストール

VSCodeを起動したら、拡張機能から「Dev Containers」を検索しインストールします。

dev-containers_extention

リモート開発環境の準備

拡張機能がインストールできたら、リモート開発環境を作成していきます。

今回は「dev」というフォルダを作成しその中に必要なファイルおよびフォルダを追加していきました。

構成は以下のようになっています。

dev/
|-- .devcontainer/
|   |-- devcontainer.json
|   `-- Dockerfile
`-- app/
    `-- Hello.py

「.devcontainer」フォルダを作成し、その中に「devcontainer.json」というファイルを追加します。

これが、DevContainersの設定ファイルとなります。

作成するコンテナの定義はDockerfileに記述しています。今回はdevcontainer.jsonと同じ階層に配置しています。

「app」には実行するpythonのプログラムコードが記載されています。

devcontainer.jsonの設定

DevContainersを利用するための設定を記述していきます。

{
    "name": "Python dev",
    // Dockerfileの配置場所を指定
    "dockerFile": "Dockerfile",
    // リモート先コンテナ内のVS Codeにインストールする拡張機能
    "extensions": ["ms-python.python"]
}

Dockerfileの場所と、VSCodeにインストールする拡張機能を指定します。

なぜ、改めて拡張機能を指定する必要があるかというと、このDevContainersを利用すると作成したリモートコンテナ内にVSCodeをインストールし、そこにローカルPCのVSCodeからリモートアクセスする形となります。

そのため、devcontainer.jsonで改めて拡張機能や設定を指定してあげる必要があります。逆に指定しないと素のVSCodeがインストールされるので注意が必要です。

Dockerfileの設定

作成するコンテナ用のDockerfileを記述します。今回はPythonで確認するため以下の通りとなります。

FROM python:3.11

Pythonプログラムの準備

Pythonの実行を確認するためのスクリプトは以下です。

print("Hello World!")

リモート開発環境の作成

ここまででリモート開発を行うための準備が完了しました。

それでは、VSCodeからリモート開発環境を作成していきます。

コンテナの起動

VSCodeの左下にある緑のアイコンをクリックするとDevContainersのメニューが表示されます。

dev-containers_start

メニュー内の「Open Folder in Container…」をクリックします。

dev-containers_start2

フォルダ選択画面が開くので、プロジェクトのフォルダを選択します。今回でいうと「dev」フォルダが対象となります。

フォルダを選択するとDockerfileの内容に沿ってコンテナのビルドが開始されます。

右下のリンクをクリックするとビルド状況を確認することができます。

dev-containers_start3

dev-containers_start4

コンテナのビルドが完了すると利用開始できます。

VSCodeの右側にある+(プラス)をクリックするとコンテナのコマンドラインを使用できます。

dev-containers_commandlinedev-containers_commandline2

Docker Desktopからもコンテナが追加され起動していることが確認できます。

dev-containers_start5

Pythonプログラムの実行

リモートコンテナが構築でき、Pythonの実行が可能となりました。

Pythonのバージョンを確認してみます。

python -V
Python 3.11.0

3.11.0がインストールされていることが確認できます。

続いて、Pythonスクリプトのファイルが存在することを確認してみます。

ls
app
ls ./app/
Hello.py

appディレクトリ内にHello.pyのスクリプトファイルが存在することが確認できました。

それではこのスクリプトファイルを実行します。

cd app/
python Hello.py 
Hello World!

無事、pythonスクリプトの実行が確認できました。

Pythonプログラムのデバッグ実行

今度はデバッグ実行についても確認してみます。

VSCodeのデバッグを行いたい行の行数左をクリックすることで、以下のように赤丸が付きます。

dev-containers_debug1F5キーを押し、「Pythonファイル」を選択することでデバッグ実行を開始できます。

dev-containers_debug2

赤丸をつけた箇所で実行が止まり、デバッグ実行できていることが確認できます。

dev-containers_debug3

右上のアイコンをクリックすることでステップインやステップオーバーなども利用することができます。

まとめ

VSCodeの拡張機能である「DevContainers」を利用することによって、VSCodeを利用しつつコンテナ環境を利用することができました。
やはりVSCodeを使うことによって開発効率が上がると思いますので、この拡張機能は使いこなせるようになりたいですね。
今回はDockerfileを使ったコンテナ構築を行いましたが、docker-composeを使って複数サービスを立ち上げることも可能です。
次回はdocker-composeを使った構築についてまとめます。
Dockerの操作についてより詳しく知りたい方は以下のような書籍を参考にしてみてください。
たった1日で基本が身に付く! Docker/Kubernetes超入門
著者:伊藤 裕一 (著)
出版社:技術評論社
本書は、次世代のアプリケーションアーキテクチャとして注目されている「マイクロサービス」の技術基盤となるコンテナ技術「Docker」とコンテナオーケストレーション技術「Kubernetes」を取り上げ、Dockerの基本的な利用法、DockerfileやComposeの設計、コンテナのデータ永続化やCI/CD、Kubernetesによる複数コンテナの自動管理までを、一気に学習します。出典:Amazon
さわって学ぶクラウドインフラ docker基礎からのコンテナ構築

著者:大澤 文孝 (著), 浅居 尚 (著) 
出版社:日経BP
本書では、Dockerのインストール方法に始まり、基本的なWebサーバーを起動させるところから、永続化、ネットワーク、コンテナイメージへと順番に学ぶことができます。さらに、複数のコンテナを使うことを想定し、「Docker Compose」や「Kubernetes」についても学習できます。Kubernetesは学習ツールとして「Minikube」を用い、最終的に「Amazon EKS」でコンテナを実行するはじめの一歩までを説明します。出典:Amazon
Docker実践ガイド 第2版 impress top gearシリーズ

著者:古賀 政純 (著)
出版社:インプレス
IT現場で役立つ、Dockerの導入、運用ノウハウを凝縮。Dockerが利用される環境や背景を説明し、導入前のシステム設計、Dockerの基本的な利用方法、Dockerfileによる自動化の手法、管理・監視ツールについて、実際に操作をしながら解説します。出典:Amazon