WSL、VisualStudioCode、およびDockerDesktopを使用してWindowsでDockerアプリケーションを開発する方法

投稿日: 2022-04-20 2022-10-22
タグ: Development, Docker, VS Code

序章

Linux 2用のWindowsサブシステム（略してWSL 2またはWSL）の出現により、WindowsでのLinuxベースの開発が簡素化されました。 WSL 2は、Docker Desktopとの直接統合を可能にし、VisualStudioCodeを使用して直接開発するためのプラグインを備えています。

このチュートリアルでは、Visual Studio Code、WSL、およびDockerDesktopを使用してWindowsで開発環境をセットアップします。 DockerでPythonFlask Webサービスを構築して、これらのツールの開発機能をデモンストレーションします。

前提条件

このガイドに従うには、次のものが必要です。

Windows10とWSL2がインストールされたパーソナルコンピューター：WSLが正しくインストールされていること、およびUbuntu20.04がWSLにインストールされていることを確認する必要があります。チュートリアルMicrosoftWindows 10 にLinux2用のWindowsサブシステムをインストールする方法に従って、これを設定できます。
VSCode Installed ：VSCodeは、公式のWebサイトからダウンロードしてインストールできます。プラグインのインストールについて心配する必要はありません。このチュートリアルでは、必要なプラグインについて説明します。

ステップ1—DockerDesktopのインストールとWSLへの接続

Docker は、開発者がアプリケーションをデプロイするために使用する一般的な開発ツールです。 Docker Desktopには、WSLLinux環境を実行して統合できるという利点もあります。

DockerのWebサイトからDockerDesktop をダウンロードし、 Get Docker ボタンをクリックしてダウンロードを開始し、Dockerをセットアップします。

ダウンロードした実行可能ファイルを実行し、変更できるようにします。

インストール中に、 WSL2に必要なWindowsコンポーネントをインストールするがチェックされていることを確認してください。デスクトップアイコンが必要かどうかはあなた次第です。

インストールプロセスが完了すると、変更を有効にするためにログアウトして再度ログインするように求められます。 閉じるボタンをクリックしてから、必ずログアウトしてから再度ログインして、変更を有効にしてください。

再度ログインして、StartメニューからDockerDesktopを起動します。

警告： Dockerを最初に起動すると、Dockerチュートリアルが表示されます。

Dockerに慣れていない場合は、Dockerチュートリアルを実行する価値があるかもしれませんが、この現在のチュートリアルでは必須ではありません。チュートリアルを完了するかスキップしたら、続行します。

Dockerダッシュボードが表示されます。これは、実行中のコンテナーとDockerの設定およびステータスが表示される場所です。左下隅にロゴが緑色で表示されている場合は、Dockerが実行されていることを意味します。黄色の場合、DockerDesktopはまだ起動しています。終了するまで1分ほど待ちます。インジケーターが赤の場合、Dockerを起動できません。

次に、Ubuntu環境でDockerを実行できるように、DockerをWSLに公開する必要があります。右上のGearアイコンをクリックして[設定]を開きます。そこから、リソースタブをクリックし、WSL統合をクリックします。そこにUbuntu環境が表示されますが、インストールした他のWSL環境とともにオフに切り替えられます。

スライダーをクリックしてオンにし、Ubuntu環境でDockerを有効にしてから、 適用して再起動 。再起動が完了すると、Ubuntu環境はDockerにアクセスできるようになります。

これで、DockerとWSLの接続をテストできます。 Dockerを有効にしたオペレーティングシステム（この場合はUbuntu）のターミナルを開き、Dockerhelloworldコマンドを実行します。

docker run hello-world

Ubuntu環境では、hello worldコンテナーをダウンロードして実行し、その出力を表示する必要があります。

DockerをWSLに接続したので、VisualStudioCodeとRemoteDevelopmentExtensionを使用してWSL内で直接開発する方法を学習します。

ステップ2— VisualStudioCodeのリモート拡張機能を使用してWSL内で開発する

WSLUbuntu環境をVisualStudioCode（以降、VSCodeと呼びます）と統合して、Linux環境で直接開発できるようにすることができます。

まず、VSCodeを開きます。ウィンドウの左側にある[拡張機能]タブに移動します。 Remote-WSL を検索すると、Remote-WSL拡張機能が表示されます。それをクリックし、インストールをクリックしてインストールします。

インストールが完了したら、を押します CTRL + Shift + P VSCodeコマンドダイアログを開きます。 Remote-WSL と入力すると、いくつかのオプションが表示されます。新しいWSL環境を開いたり、既存のフォルダーを開いたりすることができます。 Remote-WSL：New WSLWindowを選択します。これにより、UbuntuWSL環境に接続された新しいVSCodeウィンドウが開きます。

この新しいウィンドウが表示されたら、を押すことができます CTRL + Shift + ` または、ナビゲーションバーのターミナル->新しいターミナルをクリックして新しいターミナルを開くと、WSLターミナルに移動します。作成したファイルはすべて、WSLファイルシステムにも保存されます。

開発環境をセットアップしたので、 Flask フレームワークを使用してPythonマイクロサービスを構築します。このフレームワークは、環境変数として指定したサイトへの301リダイレクトを作成し、Dockerコンテナー内にパッケージ化します。

ステップ3—開発者環境のセットアップ

まず、Visual Studio Codeを使用してコードを開発できるように、開発環境をセットアップする必要があります。左側のサイドバーに移動し、一枚の紙のように見える一番上のアイコンをクリックします。 フォルダを開くまたはリポジトリのクローンを作成するのいずれかを求めるメッセージが表示されます。

ここからフォルダを開くを選択します。デフォルトの場所はホームディレクトリになります。このオプションを選択し、OKをクリックします。

このフォルダーの作成者を信頼するかどうかを尋ねるVisualStudioCodeによってプロンプトが表示される場合があります。これは、自動的に実行されたコードがPCに害を及ぼさないようにするためのセキュリティ対策です。この場合、すべてが良好なので、を選択します。はい、作成者を信頼します。

これで、左側のファイルエクスプローラーパネルにホームディレクトリが表示されます。次に、プロジェクトを保存するディレクトリを作成します。プラス記号の付いたフォルダアイコンに移動します。アイコンにカーソルを合わせると、新しいフォルダというポップアップが表示されます。このアイコンをクリックして新しいフォルダを作成し、my-appという名前を付けます。新しい空のディレクトリが右側のエクスプローラに表示されます。

これで、開発者環境がセットアップされ、次のステップでPythonマイクロサービスを構築する準備が整いました。

ステップ4—プロジェクト用のPython仮想環境を作成する

コーディングを開始する前に、Python開発者環境をセットアップする必要があります。このステップでは、管理を容易にするために、仮想環境内にPython要件をインストールしてアクティブ化します。

これらはすべて、VisualStudioCodeのターミナル内から実行できます。を押します CTRL + Shift + ` キーコンボで新しいターミナルを開くか、上部のナビゲーションバーのターミナルセクションの下にある新しいターミナルをクリックします。これを実行すると、VisualStudioCodeウィンドウの下部に新しいターミナルが表示されます。

このターミナルから、コード用に作成したディレクトリに移動します。 my-app.

cd my-app

次に、 python3-venv Python仮想環境を作成できるUbuntuパッケージ。

sudo apt update && sudo apt install python3-venv

次に、Pythonを使用して仮想環境を作成します。

python3 -m venv myapp

これにより、というディレクトリが作成されます myapp 現在のディレクトリにあります。内部には、Pythonのローカルバージョンとのローカルバージョンがインストールされます pip、Pythonのパッケージマネージャー。これを使用して、プロジェクト用に分離されたPython環境をインストールおよび構成できます。

プロジェクトのPython要件をインストールする前に、仮想環境をアクティブ化します。

source myapp/bin/activate

プロンプトが変化して、Python仮想環境内で操作していることを示します。次のようになります。 (myapp)user@host:~/my-app$.

仮想環境をアクティブにして、インストールします flask と gunicorn のローカルインスタンスで pip:

pip install flask gunicorn

注：仮想環境をアクティブ化したら（プロンプトが (myapp) その前に）、使用する pip それ以外の pip3、Python3を使用している場合でも。ツールの仮想環境のコピーには常に名前が付けられます pip、Pythonのバージョンに関係なく。

パッケージがインストールされたので、この要件とその依存関係を保存する必要があります。これは、必要に応じて開発者環境を再作成できるようにするための良い方法であり、後のステップで正しいパッケージをDockerfileにインストールするのに役立ちます。

使用する pip 環境の情報をに保存するには requirements.txt ファイル：

pip freeze > requirements.txt

開発用の仮想環境が機能するようになったので、マイクロサービスを構築しましょう。

ステップ5—トラフィックをリダイレクトするPythonマイクロサービスを構築する

最初に行う必要があるのは、という名前のPythonファイルを作成することです app.py と Dockerfile Docker要件を指定します。あなたはターミナルを介してファイルを作成することができます touch コマンドを実行してからエクスプローラーを更新します。

touch app.py

また、ファイルエクスプローラーを使用して、 my-app フォルダーをクリックし、プラスの付いた紙のような新しいファイルアイコンをクリックして、新しいファイルを作成することもできます。署名してから、ファイルのフルネームと拡張子を入力します。

どちらかの方法を使用して作成します app.py と Dockerfile.

これを行ったら、開きます app.py. 今日作成するマイクロサービスには、によって定義されているように、エンドポイントが1つだけあります。 @app.route("/") デコレータ。このエンドポイントは redirect 環境変数で指定されたサイトへの301リダイレクトを実行するためのFlaskライブラリ内のメソッド。環境変数が設定されていない場合、アプリはデフォルトでDigitalOceanのWebサイトにリダイレクトされます。

開ける app.py それをクリックして、次のコード行を追加します。

追加します import インポートするステートメント os パッケージ。これにより、マイクロサービスは後で定義する環境変数を読み取ることができます。

import os

次に、Flaskクラスとリダイレクト関数をフラスコライブラリからインポートします。これらを使用して、Webフレームワークをセットアップし、トラフィックを別のサイトにリダイレクトします。

from flask import Flask,redirect

次に、コード内で操作できるFlaskオブジェクトを作成します。これは、ルートを登録するWebアプリのインスタンスです。

app = Flask(__name__)

で単一のメソッドを作成します / ルート。 Flaskインスタンスを使用して、ルートを指定する関数を装飾します。関数内では、Flaskを使用します redirect 環境変数から読み取られる別のサイトへの301リダイレクトを実行する関数。環境変数が見つからない場合、アプリはデフォルトでDigitalOceanのホームページにリダイレクトされます。これは、環境変数の設定を忘れた場合にアプリがクラッシュしないようにするためです。

@app.route('/')
def hello():
    # Attempt to read REDIRECT_TO from the environment. If nothing is set
    # perform a 301 redirect to DigitalOcean's website
    return redirect(os.environ.get("REDIRECT_TO", "https://www.digitalocean.com"), code=301)

最後に、 main ポートでFlaskアプリを外部で実行する関数 8080. 住所・アドレス 0.0.0.0 は、ローカルループバックデバイスではなく、デバイスの外部に面したネットワークインターフェイスでアプリを実行することを指定するために使用されます。 localhost.

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

完成した app.py 以下にあります：

# Import the os package to read the environment variable
import os

# Import the Flask class and redirect function from the flask library
from flask import Flask,redirect


# Create a Flask object to be acted upon
app = Flask(__name__)

# Python decorator that specifies the web route that will execute the code below
@app.route('/')
def hello():
    # Attempt to read REDIRECT_TO from the environment. If nothing is set
    # perform a 301 redirect to DigitalOcean's website
    return redirect(os.environ.get("REDIRECT_TO", "https://www.digitalocean.com"), code=301)

# Main function that executes the Flask app
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

完了したら、ファイルをapp.pyとして保存します。

アプリが作成されたので、テストしてみましょう。

ステップ6—マイクロサービスをテストする

アプリが作成されたので、テストします。アクティブ化された仮想環境を使用してVisualStudioCodeで開いたターミナルで、次のコマンドを実行します。

python app.py

次のようなFlask出力が表示されます。

Output * Serving Flask app 'app' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead
 * Debug mode: off
 * Running on all addresses.
 * WARNING: This is a development server. Do not use it in a production deployment.
 * Running on https://256.333.112.1:8080/ (Press CTRL+C to quit)

これは、Flaskアプリが実行されていることを意味します。ブラウザを開き、に移動します localhost:8080. これを行うと、端末で出力が発生し、DigitalOceanのWebサイトにリダイレクトされるはずです。これは、Flaskアプリがリダイレクト先の場所を指定していないため、デフォルトを使用しているためです。

Flaskアプリを停止するには、Visual Studio Codeウィンドウをクリックしてアクティブになっていることを確認し、を押します。 CTRL+C. プロンプトが停止し、端末が再び表示されます。

次に、次のコマンドを実行して、リダイレクトを別のコマンドに設定します。

REDIRECT_TO="https://digitalocean.com/community/tutorials"

コマンドを使用してFlaskアプリを再度実行します

python app.py

もう一度ブラウザに移動して、に移動します localhost:8080. 次に、DigitalOceanチュートリアルページに移動する必要があります。

注：同じコンテナで複数のリダイレクトをテストする場合は、シークレットモードの形式を使用することをお勧めします。最近のほとんどのブラウザは301リダイレクトをキャッシュするため、環境変数を変更すると、同じサイトにアクセスして、変更が反映されない場合があります。シークレットウィンドウを使用するか、キャッシュをクリアすると、これに役立ちます。

これで、アプリが完成し、Dockerイメージに組み込む準備が整いました。

ステップ7—Dockerでのマイクロサービスの構築と実行

この最後のステップでは、DockerとDockerfileを使用してPythonアプリをマイクロサービスとしてパッケージ化します。 Dockerfileは、Dockerがイメージを作成するために使用するビルドコマンドのリストです。これらは、パッケージのインストール、ファイルのコピーなどを行うためのコマンドです。

を開きます Dockerfile 前の手順で作成したので、編集できます。このファイルでは、ベースイメージを指定し、コードを実行する場所をDockerに指示し、リダイレクトターゲットを保持する環境変数を作成し、必要なすべてのファイルをDockerイメージにコピーし、必要なPythonパッケージをインストールします。最後に、コンテナーの実行時に実行されるコマンドを追加します。

次のコードをに追加します Dockerfile これをする。

まず、使用するベースイメージを指定する必要があります。 Pythonベースイメージには、最新バージョンのPythonが含まれます。

FROM python

次に、作業ディレクトリを設定します。これは、Dockerがコマンドを実行し、接続した場合にドロップするデフォルトのディレクトリです。 ssh.

WORKDIR /var/www/

をセットする REDIRECT_TO リダイレクト先のデフォルトの場所への環境変数。ここでは、DigitalOceanのコミュニティチュートリアルサイトに設定しています。これは、コマンドラインからイメージを実行するときに変更できます。

ENV REDIRECT_TO=https://digitalocean.com/community/tutorials

あなたのコピー app.py と requirements.txt 宛先の完全修飾パスを使用して、Dockerコンテナーに挿入します。

COPY ./app.py /var/www/app.py
COPY ./requirements.txt /var/www/requirements.txt

必要なコマンドを実行して、Dockerイメージ内にPythonライブラリ要件をインストールします。

RUN pip install -r /var/www/requirements.txt

最後に、画像実行コマンドを設定してアプリを実行します。これは、誰かがDockerコンテナを実行しようとするたびに実行されるコマンドです。

CMD python3 app.py

完全な Dockerfile 以下にリストされています。

# Choose your base image
FROM python 

# Set your working directory
WORKDIR /var/www/

# Set environment variable for redirect. Can be overwritten by Docker run command
ENV REDIRECT_TO=https://digitalocean.com/community/tutorials

# Copy the necessary files
COPY ./app.py /var/www/app.py
COPY ./requirements.txt /var/www/requirements.txt

# Install the necessary packages
RUN pip install -r /var/www/requirements.txt

# Run the app
CMD python3 app.py

完了したら、ファイルを保存します。

これで、テスト用にDockerイメージをローカルでビルドできます。次のコマンドを実行してイメージを作成し、myappという名前でタグ付けします。 The -t オプションは、タグをDockerイメージに適用します。

docker build -t myapp .

最後に、Dockerイメージをテストします。上記のDockerfileで、環境変数を設定します REDIRECT_TO ウェブサイトを指す。これにより、コードのデフォルト値が上書きされるため、このコンテナーを実行すると、Dockerfileで指定したサイトが新しい場所になります。

注： Windowsから、ネットワークへのアクセスをDockerに許可するように求められた場合は、[許可]をクリックします。

イメージをテストするには、次のコマンドを実行します。

docker run -p 8080:8080 myapp

画像の実行中に、ブラウザに移動して次のように入力します localhost:8080 ナビゲーションバーで、Dockerfileにリストされているサイトにリダイレクトされます。

警告：WSL端末が認識しない場合があります CTRL + C Dockerイメージを停止する方法として。この場合、別のターミナルを開き、次のコマンドを使用して実行中のDockerイメージを検索する必要があります。

docker container ls

これにより、次のような出力が表示されます。

OutputCONTAINER ID   IMAGE     COMMAND                  CREATED              STATUS              PORTS                                       NAMES
3f081712283e   myapp     "/bin/sh -c 'python3…"   About a minute ago   Up About a minute   0.0.0.0:8080->8080/tcp, :::8080->8080/tcp   reverent_saha

コンテナIDを取得します。この例では次のようになります。 3f081712283e を使用します docker kill それを停止するコマンド。

docker kill 3f081712283e

最後に、リダイレクトの環境変数の変更をテストしてみましょう。 docker run 指図。

次のコマンドを入力して、環境変数をDigitalOceanクラウドコンソールページhttps://cloud.digitalocean.comに変更します。

docker run -p 8080:8080 -e REDIRECT_TO=https://cloud.digitalocean.com myapp

今、あなたがブラウザに行き、 localhost:8080 コマンドラインで指定されたサイトにリダイレクトされます。

結論

これで、WSL、Visual Studio Code、およびDockerDesktopを使用してWindowsで開発者環境を正常にセットアップできました。 Windowsでコードをビルド、テスト、およびパッケージ化する方法を示しました。これにより、開発者環境に関してより多くのオプションを利用できるようになります。

getdocs

13036