VS Code で Hyper-V + Docker Desktop for Windows

- 7月 27, 2024

こんにちは、切り口太郎です。

Hyper-V で Docker Desktop for Windows (誠に勝手ながら DD4W と略させていただきます）を動かして、VS Code の Remote Container から操作します。

１　Windows GIT をインストールする

Microsoft から、Remote container 用の開発環境が用意されています。

この環境を使うには、Windows マシンに GIt プログラムが必要です。

GIT プログラムは、　Windows for GIT をインストールすれば利用できます。

https://gitforwindows.org/

「Download」ボタンをクリックして、インストール用パッケージをダウンロードします。

インストールしたプログラムをダブルクリックすると、インストールを開始します。

「Next」ボタンをクリックします。

インストールするコンポーネントの選択画面が表示されます。

このままで大丈夫なので、[Next] ボタンをクリックします。

GITで利用するエディターの選択です。

エディターは、リストでいくつか選択できるようになっています。

一番初めに表示される [Use Vim........] を選択します。

「Next] ボタンをクリックします。

こちらは、好みなのですが、普通にりようするのであれば真ん中の [Get from the command line and also from 3rd-party software] を選択してください。

[Next] ボタンをクリックします。

[Use the OpenSSL library] を選択して、[Next] ボタンをクリックします。

こちらも好みですが、[Checkout windows-style,.....] を選択して[Next] ボタンをクリックしてください。

[Use Min TTY (....) ] を選択してｍ、[Next] ボタンをクリックします。

これもデフォルトで表示されている状態で大丈夫です。[Next] ボタンをクリックします。

[Next] ボタンをクリックしてください。

やっと、[Install] ボタンが表示されました。ためらわずクリックしてください。

インストールが完了すると GIT が利用できるようになります。

２　サンプルの Docker Image を複製する

まず、Visual Studio Code Remote Development のサイト　 https://code.visualstudio.com/docs/remote/containers　を開きます。

Quick start: Try a dev container　の見出し記事の中に、Microsoft が用意してくれたサンプルの Docker イメージがありますので、こちらを複製します。

Python の開発環境を利用します。

Windows の「コマンドプロンプト」を開きます。

フォルダーを作成したほうが、ファイルの管理がしやすいと思いますので、フォルダーを作成しました。

なくても大丈夫です。

Python 開発環境を Git で複製します。

git clone https://github.com/Microsoft/vscode-remote-try-python

複製が完了しました。

３ VS Code Remote Container で Python の開発環境を開く

VS Code で Python の開発環境を開いてみましょう！

VS Code の Windows 版インストールは、 https://kirikutitarou.blogspot.com/2019/06/4-visual-studio-code.html　を参考にしてください。

VS Codeで Docker の拡張機能のインストールは、 https://kirikutitarou.blogspot.com/2019/07/vs-code-ssh.html　のページの「４ VS Code 拡張機能のインストール」を参照してください。

実際に VS Code で先ほど複製した Docker Image を開いてみます。

Control＋Shift+P で、「コマンドパレット」をオープンします。

コマンドパレットで [remote container] と入力します。

コマンドが絞られて表示されます。

[Remote-Containers: Open Folder in container...] をクリックします。

フォルダーの選択画面が表示されます。

先ほど Git で複製した、[vs-code-remote-try-python] のフォルダーを選択して「Open] ボタンをクリックします。

VS Code の画面の右下に Docker Image の Build 中の表示が通知されます。

数分時間がかかるので、忍耐強く待ちます。

Sharing を有効にしていると、Docker から share file の設定でパスワード入力を求められるダイアログが表示されます。

Windows のログインパスワードを入力します。

入力したらOKボタンをクリックします。

数分すると、特に「終わったよ！」というメッセージもなく、通知メッセージが消えて Docker に接続できています

右下のフッター領域に、開いたコンテナーの名前がひっそりと、表示されています。

これで、VS Code で Docker Container へ接続されました。

４　VS Code Remote Container の動作確認

いろいろ確認してみましょう！

Control*Shift+@ で、ターミナルが開きます。

ターミナルをを見ると、 Windows の CMD ターミナルではなく、Linux の bash ターミナルになっています。

これが、WSL (Windows Subsystem for Linux という、Windows のサブシステムとして Linux OS を動作させる技術のようです。

ディレクトリーリストをとってみると、エクスプローラーに表示しているファイルと同じものが表示されます。

Docker イメージとして登録しているか確認します。

「コマンドプロンプト」を開きます。

docker images と Docker のコマンドを入力します。

vsc-vscode-remote-try-python-0b0fc253a90a1ad39d632b7c09cf69b1　がDocker Image として登録されています。

次にコンテナーとして動作しているか確認します。

docker ps とコマンドを入力します。

コンテナー活動中が確認できました。

実行してみます。

このサンプルプログラムは、flask による web アプリケーションのようです。

app.py　エディターパネルに表示して、Control+F5 で実行してみます。

デバッグコンソールに起動メッセージが表示されました。

port 9000 でリスナーが起動しているようなので、ブラウザーで接続します。

なんか、かわいいメッセージが表示されました。

これで動いているのか確認します。

app.py のソースは、こうなっています。

#-----------------------------------------------------------------------------------------
# Copyright (c) Microsoft Corporation. All rights reserved.
# Licensed under the MIT License. See LICENSE in the project root for license information.
#-----------------------------------------------------------------------------------------

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return app.send_static_file("index.html")

index.html を表示するようになっています。

index.html

<html>
    <head>
        <title>VS Code Rocks!</title>
    </head>
    <body>
        <h1>VS Code can do that?</h1>
        <p>Yes it can!</p>
    </body>
</html>

ちゃんと動いているようです。

次回は、この開発環境を使用して、Docker と VS Code を利用した開発がどの程度快適なのか検証してみます。

このブログを検索

Let's Python