Improve the devcontainer experience (#3492)

* Make it easier to run the devcontainer

* Some more improvements

* Tidy up few other things

* Better name stages

* Fix CI

* Setup everything with one click

* Allow to set IMAGE_OWNER

* Change IMAGE_OWNER to IMAGE_REPO

* Fix CI with IMAGE_REPO

* Fix nodejs installation

* Test devcontainer build as part of CI

* Build devcontainer in its own job

* Fix devcontainer cli installation

* Fix devcontainer build

* Fix devcontainer build in CI again

* Enable buildkit only

* Increase coverage of devcontainer test

* Fix devcontainer start in CI

* Ensure latest version of docker compose is used

* Fix install compose action

* Disable CI stuff which does not work until we fix them

.devcontainer/devcontainer.json

@@ -1,16 +1,50 @@
 {
-  "name": "Frigate Dev",
+  "name": "Frigate Devcontainer",
   "dockerComposeFile": "../docker-compose.yml",
-  "service": "dev",
-  "workspaceFolder": "/lab/frigate",
+  "service": "devcontainer",
+  "workspaceFolder": "/workspace/frigate",
+  "initializeCommand": ".devcontainer/initialize.sh",
+  "postCreateCommand": ".devcontainer/post_create.sh",
+  "overrideCommand": false,
+  "remoteUser": "vscode",
+  "features": {
+    "ghcr.io/devcontainers/features/common-utils:1": {}
+  },
+  "forwardPorts": [5000, 5001, 5173, 1935, 8554, 8555],
+  "portsAttributes": {
+    "5000": {
+      "label": "NGINX",
+      "onAutoForward": "silent"
+    },
+    "5001": {
+      "label": "Frigate API",
+      "onAutoForward": "silent"
+    },
+    "5173": {
+      "label": "Vite Server",
+      "onAutoForward": "silent"
+    },
+    "1935": {
+      "label": "RTMP",
+      "onAutoForward": "silent"
+    },
+    "8554": {
+      "label": "gortc RTSP",
+      "onAutoForward": "silent"
+    },
+    "8555": {
+      "label": "go2rtc WebRTC",
+      "onAutoForward": "silent"
+    }
+  },
   "extensions": [
+    "ms-python.vscode-pylance",
     "ms-python.python",
     "visualstudioexptteam.vscodeintellicode",
     "mhutchie.git-graph",
     "ms-azuretools.vscode-docker",
     "streetsidesoftware.code-spell-checker",
     "esbenp.prettier-vscode",
-    "ms-python.vscode-pylance",
     "dbaeumer.vscode-eslint",
     "mikestead.dotenv",
     "csstools.postcss",
@@ -18,6 +52,7 @@
     "bradlc.vscode-tailwindcss"
   ],
   "settings": {
+    "remote.autoForwardPorts": false,
     "python.linting.pylintEnabled": true,
     "python.linting.enabled": true,
     "python.formatting.provider": "black",

.devcontainer/initialize.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+set -euo pipefail
+
+# These folders needs to be created and owned by the host user
+mkdir -p debug web/dist
+
+if [[ -f "config/config.yml" ]]; then
+  echo "config/config.yml already exists, skipping initialization" >&2
+else
+  echo "initializing config/config.yml" >&2
+  cp -fv config/config.yml.example config/config.yml
+fi

.devcontainer/post_create.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+set -euxo pipefail
+
+# Frigate normal container runs as root, so it have permission to create
+# the folders. But the devcontainer runs as the host user, so we need to
+# create the folders and give the host user permission to write to them.
+sudo mkdir -p /media/frigate
+sudo chown -R "$(id -u):$(id -g)" /media/frigate
+
+make version
+
+cd web
+
+npm install
+
+npm run build