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

長くなってしまったので、準備編 と分けています。

サンプルアプリの実行

MicrosoftのGithubに色々サンプルが用意されているので、そちらを使ってみます。
今回はPythonのサンプルを使います。

ソースの取得

(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コンテナに入ります。

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

諸々インストールされる為、初回起動時は時間がかかります。
インストールが完了するとターミナル上に「Done. Press any key to close the terminal.」が表示されます。
左下の表示も「Dev Container:Python 3」に変わります。

アプリの起動

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

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

ブラウザで「http://127.0.0.1:9000」にアクセスすると以下のような画面が表示され、アプリケーションが起動できていることがわかります。

サンプルプロジェクトの確認

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

DockerContainerの設定

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

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

カスタマイズ

よく行うだろうものを記載します。

拡張機能を追加したい

追加したい拡張機能を右クリックして「拡張IDのコピー」でIDをコピーし、devcontainer.jsonのextentions配下に追加します。
WSLに接続した状態(左下が「WSL:Ubuntu」)で拡張機能を右クリックして「Add to devcontainer.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の設定値を記載することで追加できます。

.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,
	},

docker-composeを使いたい

devcontainer.jsonのbuildを削除し、代わりにdockerComposeFileとserviceを追加します。

.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",

.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