Devcontainer を使用した VSCode での Python 開発-Python チュートリアル-php.cn

Python Development in VSCode Using Devcontainer

Devcontainer を使用した VSCode での Python 開発

このガイドでは、Visual Studio Code (VSCode) を使用した Docker ベースの開発環境で Python 開発用に devcontainer-python-template をセットアップして使用する手順を説明します。このテンプレートを使用すると、devcontainer 内の Python プロジェクトをすぐに起動して実行できます。

リポジトリを直接クローン作成する代わりに、テンプレートに基づいて独自のリポジトリを作成し、変更を独自のリポジトリにプッシュできます。

1. テンプレートから新しいリポジトリを作成する

devcontainer-python-template リポジトリに移動します: https://github.com/jdevto/devcontainer-python-template.
リポジトリページの右上近くにある [このテンプレートを使用する] ボタンをクリックします。
新しいリポジトリの作成を選択します。
リポジトリの詳細を入力します。
- リポジトリ名: 新しいプロジェクトの名前を選択します (例: python-flask-web-app.
- 説明: オプションで、リポジトリの説明を追加します。
- 可視性: リポジトリをパブリックにするかプライベートにするかを選択します。
- 所有者: (オプション) 組織の下にリポジトリを作成している場合は、適切な所有者 (アカウントまたは組織) を選択します。
「テンプレートからリポジトリを作成」をクリックします。

これにより、GitHub アカウントに新しいリポジトリが作成され、devcontainer-python-template の内容で初期化されます。

2. 新しいリポジトリのクローンをローカルに作成します

新しいリポジトリを作成したので、VSCode を開きます。
新しく作成したリポジトリのクローンをローカルマシンに作成します。

git clone git@github.com:jdevto/python-flask-web-app.git
cd python-flask-web-app

ログイン後にコピー

ブランチを作成し、そこから作業することが常にベストプラクティスです。

git clone git@github.com:jdevto/python-flask-web-app.git
cd python-flask-web-app

ログイン後にコピー

3. VSCode でリポジトリを開き、Devcontainer を起動します。

VSCode でリポジトリを開きます。
- リポジトリのクローンを作成した後、Visual Studio Code で開きます。
- VSCode メニューで、アクティビティバーに移動し、リモートエクスプローラーをクリックします。
- [コンテナーで再度開く] を選択します。これにより、.devcontainer フォルダーに定義された開発コンテナー (devcontainer) が構築され、起動されます。
セットアップ中に起こること: VSCode は自動的に次のことを行います。
- devcontainer.json 構成ファイルで指定されているように Docker コンテナを構築します。
- requirements.txt または他のプロジェクトファイルにリストされている依存関係 (Python パッケージなど) をインストールします。
- コンテナ内のクリーンで分離された開発環境内でプロジェクトを開きます。
セットアップ成功時の出力: .devcontainer セットアップが成功すると、次のような出力が表示されるはずです。

git branch dev
git checkout dev

ログイン後にコピー

ターミナルを開きます:

同じ VSCode ウィンドウでターミナルを閉じてから再度開きます。
次のようなプロンプトが表示されるはずです。

  Running the postCreateCommand from devcontainer.json...

  [7382 ms] Start: Run in container: /bin/sh -c .devcontainer/scripts/postCreate.sh
  Linux 726a838654fd 6.8.0-49-generic #49~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Wed Nov  6 17:42:15 UTC 2 x86_64 GNU/Linux
  Done. Press any key to close the terminal.

ログイン後にコピー

4. Python が動作していることを検証する

続行する前に、Python が devcontainer 内で正しく動作していることを確認してください。

VSCode で統合ターミナルを開きます。
次のコマンドを実行して、Python のバージョンを確認します。

root ➜ /workspaces/python-flask-web-app (main) $

ログイン後にコピー

次のような出力が表示されるはずです。

  python --version

ログイン後にコピー

5. テスト Python スクリプトを実行する

テンプレートには、hello/main.py にある簡単なテストスクリプトが含まれています。次のスクリプトを実行してセットアップを検証し、Python が正しく実行されていることを確認します:

ターミナルで、テストスクリプトを実行します。

  Python 3.12.7

ログイン後にコピー

期待される出力:

  python hello/main.py

ログイン後にコピー

6. クリーンアップ

Python が動作し、テストスクリプトが正常に実行されることを確認したら:

テストスクリプトを削除します: テストスクリプトが不要になった場合は、hello ディレクトリを削除します。

  Hello, Devcontainer!

ログイン後にコピー

必要に応じて LICENSE ファイルを更新します

7. Flask Web アプリ開発

次の内容で README.md ファイルを更新します。

  rm -rf hello

ログイン後にコピー

プロジェクトディレクトリを作成する

プロジェクトを保存するフォルダーを作成します。

  # python-flask-web-app

  A simple demo showcasing a Python Flask web application running in a VSCode development container. This setup is designed to provide an isolated, portable, and consistent environment for Python development.

ログイン後にコピー

仮想環境をセットアップする
- 依存関係を管理するために Python 仮想環境をセットアップします。
```
mkdir flask-web-app
cd flask-web-app
```
ログイン後にコピー
Flask をインストール
- 仮想環境に Flask をインストールします。
```
python -m venv venv
source venv/bin/activate
```
ログイン後にコピー
- 依存関係を追跡するためにrequirements.txtファイルを作成します。
```
pip install flask
```
ログイン後にコピー
アプリを作成する
- app.py ファイルを作成します。
```
git clone git@github.com:jdevto/python-flask-web-app.git
cd python-flask-web-app
```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
- 次の内容で app.py ファイルを更新します。
```
git branch dev
git checkout dev
```
ログイン後にコピー
ログイン後にコピー

アプリを実行します

アプリを実行してセットアップを検証します。

  Running the postCreateCommand from devcontainer.json...

  [7382 ms] Start: Run in container: /bin/sh -c .devcontainer/scripts/postCreate.sh
  Linux 726a838654fd 6.8.0-49-generic #49~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Wed Nov  6 17:42:15 UTC 2 x86_64 GNU/Linux
  Done. Press any key to close the terminal.

ログイン後にコピー

次のようなものが表示されるはずです。

root ➜ /workspaces/python-flask-web-app (main) $

ログイン後にコピー

ブラウザで http://127.0.0.1:5000 を開きます。「Hello, World!」が表示されるはずです。

プロジェクト構造を拡張する

アプリが進化するにつれて、テンプレート、静的ファイル、テストをサポートするディレクトリ構造を追加します。

次の構造を作成します:
```
  python --version
```
ログイン後にコピー
ログイン後にコピー

  Python 3.12.7

ログイン後にコピー

base.html ファイルを次の内容で更新します:
```
  python hello/main.py
```
ログイン後にコピー
ログイン後にコピー
Flask アプリを再度実行します
アプリを再度実行して、更新されたバージョンをテストします。
```
  Hello, Devcontainer!
```
ログイン後にコピー
ログイン後にコピー
ブラウザを開いて http://127.0.0.1:5000 に移動します。
次のようなものが表示されるはずです:
```
  rm -rf hello
```
ログイン後にコピー
ログイン後にコピー
- 環境クリーンアップ Flask アプリのテストと実行が完了したら:
Flask サーバーを停止します
- Flask アプリが実行されているターミナルで Ctrl C を押します。これによりサーバープロセスが終了します。
開発環境を終了します
- VSCode で、Ctrl Shift P (macOS では Cmd Shift P) を押してコマンドパレットを開きます。
- 「SSH でフォルダーを再度開く」と入力し、オプションを選択します。これにより、開発コンテナから出てローカル環境に戻ることができ、コンテナ外の追加タスクに対してシームレスなワークフロー統合が可能になります。

8. ブランチを GitHub にプッシュします

実行

  # python-flask-web-app

  A simple demo showcasing a Python Flask web application running in a VSCode development container. This setup is designed to provide an isolated, portable, and consistent environment for Python development.

ログイン後にコピー