WindowsにVSCodeのRemote Containerで開発環境構築【実践編】

長くなってしまったので、[準備編](https://qiita.com/tks-hsmt/items/c0d422a0ace67afe74f9) と分けています。

https://qiita.com/tks-hsmt/items/c0d422a0ace67afe74f9

# サンプルアプリの実行

[MicrosoftのGithub](https://github.com/microsoft/vscode-dev-containers)に色々サンプルが用意されているので、そちらを使ってみます。
今回は[Pythonのサンプル](https://github.com/microsoft/vscode-remote-try-python.git)を使います。

https://github.com/microsoft/vscode-dev-containers

## ソースの取得
(Windowsターミナルで)Ubuntuを起動し、サンプルプロジェクトをCloneしてきます。

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

## VSCodeでDockerContainerの起動
以下のコマンドでVSCodeを起動します。

```
code vscode-remote-try-python
```
左下が「WSL:Ubuntu」になっていて、VSCodeがUbuntuにつないでいることがわかります。
右下の「Reopen in Container」をクリックすることで、Dockerコンテナに入ります。
![vscode-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281509/ca449591-71ce-dc64-9c64-05fdbc1c44d4.png)

:::note warn
右側のポップアップは消えた場合は、左下の「WSL:Ubuntu」をクリックして「Reopen in Container」をクリックしてください。
:::

諸々インストールされる為、初回起動時は時間がかかります。
インストールが完了するとターミナル上に「Done. Press any key to close the terminal.」が表示されます。
左下の表示も「Dev Container:Python 3」に変わります。
![vscode-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281509/fbf0edd9-6fb8-e6f4-d19a-0faff57f961a.png)

## アプリの起動
VSCodeのターミナルを開き、以下のコマンドを入力してアプリケーションを起動します。

```
python -m flask run --port 9000 --no-debugger --no-reload
```

ブラウザで「[http://127.0.0.1:9000](http://127.0.0.1:9000)」にアクセスすると以下のような画面が表示され、アプリケーションが起動できていることがわかります。
![flask.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281509/2e678011-1b74-ffe0-fca2-29fcad0664d9.png)

# サンプルプロジェクトの確認
うまく起動できたので、プロジェクトの設定を見ていきます。

## DockerContainerの設定
DockerContainerの設定は、.devcontainer配下の以下のファイルで行います。

* devcontainer.json ・・・VSCodeの設定や拡張機能、起動するDockerコンテナを管理。
* Dockerfile ・・・ 起動するDockerfile。

https://code.visualstudio.com/docs/remote/devcontainerjson-reference

# カスタマイズ
よく行うだろうものを記載します。

## 拡張機能を追加したい
追加したい拡張機能を右クリックして「拡張IDのコピー」でIDをコピーし、devcontainer.jsonのextentions配下に追加します。
WSLに接続した状態(左下が「WSL:Ubuntu」)で拡張機能を右クリックして「Add to devcontainer.json」でも追加できます。
![vscode-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281509/ad024cde-1d81-70fb-cc7d-95db5605a2cf.png)

```diff_json:.devcontainer/devcontainer.json
	// Add the IDs of extensions you want installed when the container is created.
	"extensions": [
		"ms-python.python",
		"ms-python.vscode-pylance",
+		"oderwat.indent-rainbow"
	],
```

## VSCodeの設定を追加したい
devcontainer.jsonのsettings配下にVSCodeのsetting.jsonの設定値を記載することで追加できます。

```diff_json:.devcontainer/devcontainer.json
	// Set *default* container specific settings.json values on container create.
	"settings": { 
		"terminal.integrated.profiles.linux": {
			"bash": {
				"path": "/bin/bash"
			}
		},
		"python.defaultInterpreterPath": "/usr/local/bin/python",
		"python.languageServer": "Default",
		"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",
+		"editor.tabSize": 2,
	},
```

https://code.visualstudio.com/docs/getstarted/settings

## docker-composeを使いたい
devcontainer.jsonのbuildを削除し、代わりにdockerComposeFileとserviceを追加します。

```diff_json:.devcontainer/devcontainer.json
-	"build": {
-		"dockerfile": "Dockerfile",
-		"context": "..",
-		"args": { 
-			// Update 'VARIANT' to pick a Python version: 3, 3.9, 3.8, 3.7, 3.6.
-			// Append -bullseye or -buster to pin to an OS version.
-			// Use -bullseye variants on local on arm64/Apple Silicon.
-			"VARIANT": "3.9-bullseye",
-			// Options
-			"NODE_VERSION": "lts/*"
-		}
-	},
+	"dockerComposeFile": ["./docker-compose.yaml"],
+	"workspaceFolder": "/app",
+	"service": "app",
```

```diff_json:.devcontainer/docker-compose.yaml
version: '3'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
      args:
        VARIANT: "3.9-bullseye"
        NODE_VERSION: "lts/*"
    volumes:
      - ..:/app
    command: "sleep infinity"
    ports:
      - "9000:9000"
    tty: true
    stdin_open: true
```