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

提供：Dev Guides
移動先:案内、検索

序章

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 Ubuntuパッケージをインストールして、Python仮想環境を作成できるようにします。 

sudo apt update && sudo apt install python3-venv

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

python3 -m venv myapp

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

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

source myapp/bin/activate

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

仮想環境をアクティブにして、pipのローカルインスタンスを使用してflaskおよびgunicornをインストールします。 

pip install flask gunicorn

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


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

pipを使用して、環境の情報をrequirements.txtファイルに保存します。 

pip freeze > requirements.txt

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

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

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

touch app.py

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

いずれかの方法を使用して、app.pyおよびDockerfileを作成します。

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

最後に、ポート8080でFlaskアプリを外部で実行するmain関数を作成します。 アドレス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という名前でタグ付けします。 -tオプションは、Dockerイメージにタグを適用します。 

docker build -t myapp .

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

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


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

docker run -p 8080:8080 myapp

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

警告：WSL端末がDockerイメージを停止する方法としてCTRL + Cを認識しない場合があります。 この場合、別のターミナルを開き、次のコマンドを使用して実行中の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でコードをビルド、テスト、およびパッケージ化する方法を示しました。これにより、開発者環境に関してより多くのオプションを利用できるようになります。

「https://www.finddevguides.com/index.php?title=WSL、VisualStudioCode、およびDockerDesktopを使用してWindowsでDockerアプリケーションを開発する方法&oldid=106715」から取得
Powered by MediaWiki