---
lang: ja-jp
breaks: true
---
# Python WebアプリをDockerで実行する Visual Studio Code Remote - Containers Windows　2021-05-03

> Visual Studio Code を使用して Docker コンテナーを開発環境として使用する
> https://docs.microsoft.com/ja-jp/learn/modules/use-docker-container-dev-env-vs-code/

> MicrosoftDocs/mslearn-python-products
> https://github.com/MicrosoftDocs/mslearn-python-products

## Visual Studio Codeに「Remote - Containers」拡張機能をインストール


## Python Webアプリを git clone する。

$ git clone https://github.com/MicrosoftDocs/mslearn-python-products.git

## Visual Studio Codeでローカルリポジトリを開く
メニュー＞フォルダを開く


## コマンドパレットより、「Remote-Containers: Add Development Container Configuration Files」を実行する。

### `ctrl` + `shift` + `P` を押して、「add container」とか入力する。

### Python3を選択する。

### 3 (default)を選択する。

### install Node.js のチェックを外して、OKボタンを押す。

### 「.devcontainer」フォルダに、「devcontainer.json」と「Dockerfile」ファイルが自動的に作成される。

#### devcontainer.json

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.166.1/containers/python-3
{
	"name": "Python 3",
	"build": {
		"dockerfile": "Dockerfile",
		"context": "..",
		"args": { 
			// Update 'VARIANT' to pick a Python version: 3, 3.6, 3.7, 3.8, 3.9
			"VARIANT": "3",
			// Options
			"INSTALL_NODE": "false",
			"NODE_VERSION": "lts/*"
		}
	},

	// Set *default* container specific settings.json values on container create.
	"settings": { 
		"terminal.integrated.shell.linux": "/bin/bash",
		"python.pythonPath": "/usr/local/bin/python",
		"python.linting.enabled": true,
		"python.linting.pylintEnabled": true,
		"python.formatting.autopep8Path": "/usr/local/py-utils/bin/autopep8",
		"python.formatting.blackPath": "/usr/local/py-utils/bin/black",
		"python.formatting.yapfPath": "/usr/local/py-utils/bin/yapf",
		"python.linting.banditPath": "/usr/local/py-utils/bin/bandit",
		"python.linting.flake8Path": "/usr/local/py-utils/bin/flake8",
		"python.linting.mypyPath": "/usr/local/py-utils/bin/mypy",
		"python.linting.pycodestylePath": "/usr/local/py-utils/bin/pycodestyle",
		"python.linting.pydocstylePath": "/usr/local/py-utils/bin/pydocstyle",
		"python.linting.pylintPath": "/usr/local/py-utils/bin/pylint"
	},

	// Add the IDs of extensions you want installed when the container is created.
	"extensions": [
		"ms-python.python"
	],

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "pip3 install --user -r requirements.txt",

	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
	"remoteUser": "vscode"
}

#### Dockerfile

# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.166.1/containers/python-3/.devcontainer/base.Dockerfile

# [Choice] Python version: 3, 3.9, 3.8, 3.7, 3.6
ARG VARIANT="3"
FROM mcr.microsoft.com/vscode/devcontainers/python:0-${VARIANT}

# [Option] Install Node.js
ARG INSTALL_NODE="true"
ARG NODE_VERSION="lts/*"
RUN if [ "${INSTALL_NODE}" = "true" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi

# [Optional] If your pip requirements rarely change, uncomment this section to add them to the image.
# COPY requirements.txt /tmp/pip-tmp/
# RUN pip3 --disable-pip-version-check --no-cache-dir install -r /tmp/pip-tmp/requirements.txt \
#    && rm -rf /tmp/pip-tmp

# [Optional] Uncomment this section to install additional OS packages.
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
#     && apt-get -y install --no-install-recommends <your-package-list-here>

# [Optional] Uncomment this line to install global node packages.
# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1

## コマンドパレットより、ReOpen in Container を実行してDockerコンテナを追加する。

:::warning
※初めて実行する場合、数分程度時間がかかります。また、タイムアウトエラーが発生することがあります。エラーが発生しても再度同じ操作を実行すれば正常にコンテナが起動します。
:::


## 自動的に コンテナに接続したシェルが表示されます。


##　pip を使用して必要なモジュールをインストール

$ pip3 install --user -r requirements.txt
Collecting Flask==1.0.2
  Downloading Flask-1.0.2-py2.py3-none-any.whl (91 kB)
     |████████████████████████████████| 91 kB 1.9 MB/s 
Collecting Jinja2>=2.10
  Downloading Jinja2-2.11.3-py2.py3-none-any.whl (125 kB)
     |████████████████████████████████| 125 kB 3.8 MB/s 
Collecting itsdangerous>=0.24
  Downloading itsdangerous-1.1.0-py2.py3-none-any.whl (16 kB)
Collecting Werkzeug>=0.14
  Downloading Werkzeug-1.0.1-py2.py3-none-any.whl (298 kB)
     |████████████████████████████████| 298 kB 3.7 MB/s 
Collecting click>=5.1
  Downloading click-7.1.2-py2.py3-none-any.whl (82 kB)
     |████████████████████████████████| 82 kB 1.1 MB/s 
Collecting MarkupSafe>=0.23
  Downloading MarkupSafe-1.1.1-cp39-cp39-manylinux2010_x86_64.whl (32 kB)
Installing collected packages: MarkupSafe, Werkzeug, Jinja2, itsdangerous, click, Flask
WARNING: Value for scheme.headers does not match. Please report this to <https://github.com/pypa/pip/issues/9617>
distutils: /home/vscode/.local/include/python3.9/UNKNOWN
sysconfig: /home/vscode/.local/include/python3.9
WARNING: Additional context:
user = True
home = None
root = None
prefix = None
Successfully installed Flask-1.0.2 Jinja2-2.11.3 MarkupSafe-1.1.1 Werkzeug-1.0.1 click-7.1.2 itsdangerous-1.1.0
WARNING: You are using pip version 21.1; however, version 21.1.1 is available.
You should consider upgrading via the '/usr/local/bin/python -m pip install --upgrade pip' command.

## Python Webアプリを実行

$ python app.py 
 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 356-477-547

## ブラウザで開く


### 自動的にポートフォワーディングされて、表示されます。

###### tags: `Python` `Webアプリ` `Docker` `Visual Studio Code` `Remote - Containers` `Windows`