VSCode Remote Containers対応

.devcontainer/devcontainer.json

@@ -0,0 +1,16 @@
+{
+    "name": "covid19",
+    "dockerComposeFile": [
+        "../docker-compose.yml"
+    ],
+    "appPort": [
+        3000
+    ],
+    "service": "app",
+    "extensions": [
+        "dbaeumer.vscode-eslint"
+    ],
+    "postCreateCommand": "yarn install",
+    "workspaceFolder": "/app",
+    "shutdownAction": "stopCompose"
+}

README.md

@@ -55,6 +55,18 @@ $ yarn install
 $ docker-compose run --rm app yarn install
 ```
 
+### VSCode + Remote Cotainersで開発する場合
+
+1. VSCodeの拡張機能「[Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)」を導入します。
+2. [この画像（外部サイト）](https://code.visualstudio.com/docs/remote/containers#_quick-start-try-a-dev-container)のように左下部の「Open Folder in Container」でこのリポジトリのルートを選択すれば環境構築が始まります。
+
+[Topic]
+- 設定を変更したい場合は、`.devcontainer/devcontainer.json`を修正してください。<br/>
+    詳細は[devcontainer.jsonのリファレンス](https://code.visualstudio.com/docs/remote/containers#_devcontainerjson-reference)を参照してください。
+- Remote Container実行時のみ有効な拡張機能「ESlint」を導入していますが、必要に応じて`devcontainer.json`の`extensions`に追加してください。<br/>
+    詳細な手順は[こちら（外部サイト）](https://code.visualstudio.com/docs/remote/containers#_managing-extensions)を参照してください。
+- 開発環境を再構築する場合は、左下部の「Rebuild Container」を実行してください。
+
 ### ステージング・本番環境への反映
 
 `master` ブランチがアップデートされると、自動的に `production` ブランチにHTML類がbuildされます。そして、本番サイト https://stopcovid19.metro.tokyo.lg.jp/ が更新されます。