feat: prototype dynamic development proxy dashboard

.docker/database-services.yml

@@ -2,14 +2,14 @@ services:
   mysql:
     # Pin to 8.4: mysql:latest currently resolves to 9.x, and Nextcloud autoinstall
     # runs with the application user, which cannot read mysql.component there.
-    image: mysql:8.4
+    image: mysql:8.4@sha256:b3b90af2a6552ae30c266fdb7d5dd55f3afb72404bb78d37fe8a23eb857fd3fb
     volumes:
       - ../volumes/mysql/init:/docker-entrypoint-initdb.d
       - ../volumes/mysql/data:/var/lib/mysql
     ports:
       - target: 3306
         published: "3306-3325"
-        host_ip: ${IP_BIND:-127.0.0.1}
+        host_ip: ${MYSQL_IP_BIND:-127.0.0.1}
     command: ["mysqld"]
     environment:
       - TZ=${TZ:-CET}
@@ -18,13 +18,13 @@ services:
       - MYSQL_USER=${MYSQL_USER:-nextcloud}
       - MYSQL_PASSWORD=${MYSQL_PASSWORD:-nextcloud}
   pgsql:
-    image: postgres:13-alpine
+    image: postgres:13-alpine@sha256:fb9065b6e3e213bdc07edd372a5b2a26245840b7fb65d1fd8b6700106d51805c
     volumes:
       - ../volumes/postgres/data:/var/lib/postgresql/data
     ports:
       - target: 5432
         published: "5432-5451"
-        host_ip: ${IP_BIND:-127.0.0.1}
+        host_ip: ${POSTGRES_IP_BIND:-127.0.0.1}
     command: ["postgres", "-c", "log_statement=all"]
     environment:
       - POSTGRES_DB=${POSTGRES_DB:-nextcloud}

.docker/docker-compose.proxy.yml

@@ -1,29 +1,31 @@
 services:
   nginx-proxy:
-    image: nginxproxy/nginx-proxy:1.11-alpine
+    image: nginxproxy/nginx-proxy:1.11.6-alpine@sha256:99376e95c8754547213d411222a2c4dca046d974e753ae2a1c9aef09b2c03364
     container_name: librecode-dev-proxy
-    restart: unless-stopped
     labels:
       coop.librecode.dev-proxy: "true"
+    working_dir: /dashboard
+    command: ["forego", "start", "-r"]
     ports:
-      - "80:80"
-      - "443:443"
+      - "${PROXY_IP_BIND:-127.0.0.1}:80:80"
+      - "${PROXY_IP_BIND:-127.0.0.1}:443:443"
     volumes:
       - ${DOCKER_SOCKET:-/var/run/docker.sock}:/tmp/docker.sock:ro
       - librecode-dev-proxy-vhost:/etc/nginx/vhost.d
-      - librecode-dev-proxy-conf:/etc/nginx/conf.d
+      - librecode-dev-proxy-assets:/dashboard:ro
       - librecode-dev-proxy-log:/etc/nginx/log
       - librecode-dev-proxy-certs:/etc/nginx/certs:ro
-      - librecode-dev-proxy-html:/usr/share/nginx/html
     environment:
       - ENABLE_IPV6=true
+      - VIRTUAL_HOST=localhost,*.localhost
+      - VIRTUAL_PORT=80
+      - SELF_SIGNED_HOST=localhost,*.localhost
     networks:
       - proxy
 
   ssl-companion:
-    image: sebastienheyd/self-signed-proxy-companion:latest
+    image: sebastienheyd/self-signed-proxy-companion:1.1.0@sha256:dd698341f804aaffe2974931a185aa088561d76094e040e374847f3a64004d43
     container_name: librecode-dev-proxy-ssl-companion
-    restart: unless-stopped
     labels:
       coop.librecode.dev-proxy-companion: "true"
     volumes:
@@ -37,15 +39,14 @@ services:
 networks:
   proxy:
     name: librecode-dev-proxy
+    external: true
 
 volumes:
   librecode-dev-proxy-vhost:
     name: librecode-dev-proxy-vhost
-  librecode-dev-proxy-conf:
-    name: librecode-dev-proxy-conf
+  librecode-dev-proxy-assets:
+    name: librecode-dev-proxy-assets
   librecode-dev-proxy-log:
     name: librecode-dev-proxy-log
   librecode-dev-proxy-certs:
     name: librecode-dev-proxy-certs
-  librecode-dev-proxy-html:
-    name: librecode-dev-proxy-html

.docker/nginx-proxy/*.localhost

@@ -0,0 +1,6 @@
+root /usr/share/nginx/html;
+error_page 404 =404 @librecode_dashboard_404;
+
+location @librecode_dashboard_404 {
+    try_files /index.html =404;
+}

.docker/nginx-proxy/*.localhost_location_override

@@ -0,0 +1 @@
+return 404;

.docker/nginx-proxy/Procfile

@@ -0,0 +1,2 @@
+dockergen: docker-gen -config /dashboard/docker-gen.cfg -event-filter event=connect -event-filter event=disconnect
+nginx: nginx -g "daemon off;"

.docker/nginx-proxy/dashboard.tmpl

@@ -0,0 +1,250 @@
+{{- $routes := list -}}
+{{- range $hostname, $containers := groupByMulti . "Env.VIRTUAL_HOST" "," -}}
+  {{- $hostname = trim $hostname -}}
+  {{- if or (eq $hostname "") (eq $hostname "localhost") (eq $hostname "*.localhost") -}}
+    {{- continue -}}
+  {{- end -}}
+
+  {{- range $container := $containers -}}
+    {{- $onProxyNetwork := false -}}
+    {{- range $network := $container.Networks -}}
+      {{- if eq $network.Name "librecode-dev-proxy" -}}
+        {{- $onProxyNetwork = true -}}
+      {{- end -}}
+    {{- end -}}
+    {{- if not $onProxyNetwork -}}
+      {{- continue -}}
+    {{- end -}}
+
+    {{- $project := index $container.Labels "com.docker.compose.project" -}}
+    {{- $service := index $container.Labels "com.docker.compose.service" -}}
+    {{- if not $project -}}
+      {{- $project = "Docker" -}}
+    {{- end -}}
+    {{- if not $service -}}
+      {{- $service = "Service" -}}
+    {{- end -}}
+
+    {{- $routes = append $routes (dict "host" $hostname "project" $project "service" $service) -}}
+    {{- break -}}
+  {{- end -}}
+{{- end -}}
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>LibreCode Nextcloud Development Environment</title>
+  <style>
+    :root { color-scheme: light dark; font-family: system-ui, sans-serif; }
+    body { margin: 0; min-height: 100vh; display: grid; place-items: start center; background: Canvas; color: CanvasText; }
+    main { width: min(760px, calc(100% - 48px)); margin: 26px 0; padding: 32px; border: 1px solid color-mix(in srgb, CanvasText 20%, transparent); border-radius: 12px; }
+    h1 { margin-top: 0; font-size: 1.5rem; }
+    h2 { margin-top: 2rem; font-size: 1.15rem; }
+    h3 { margin: 1.5rem 0 .5rem; font-size: 1rem; }
+    ul { padding-left: 1.25rem; }
+    li { margin: .45rem 0; }
+    a { color: LinkText; }
+    code { padding: .15em .4em; border-radius: 4px; background: color-mix(in srgb, CanvasText 10%, transparent); }
+    .not-found, .runtime-warning, .runtime-hint { padding: 1rem; border: 1px solid color-mix(in srgb, CanvasText 24%, transparent); border-radius: 8px; }
+    .not-found { border-color: #c9362b; background: color-mix(in srgb, #c9362b 8%, Canvas 92%); }
+    .not-found h2 { margin: 0 0 .65rem; color: color-mix(in srgb, #c9362b 82%, CanvasText 18%); }
+    .not-found p { margin: .45rem 0 0; }
+    .not-found #suggestion { margin-top: .8rem; font-weight: 600; }
+    .runtime-warning, .runtime-hint { margin-top: 1rem; }
+    .runtime-warning { border-color: #c47f00; }
+    .runtime-hint { border-color: color-mix(in srgb, LinkText 55%, Canvas 45%); }
+    .runtime-warning strong, .runtime-hint strong { display: block; margin-bottom: .4rem; }
+    .runtime-hint p { margin: .45rem 0 0; }
+    .runtime-list { list-style: none; padding: 0; }
+    .runtime-list li { margin: .35rem 0; }
+    .project-links { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, CanvasText 16%, transparent); font-size: .95rem; }
+    .project-links p { margin: .45rem 0; }
+    .project-links nav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
+    .muted { opacity: .7; }
+  </style>
+</head>
+<body>
+  <main>
+    <h1>💙 LibreCode Nextcloud Development Environment</h1>
+    <section id="not-found" class="not-found" role="alert" hidden>
+      <h2>⚠ Environment not found</h2>
+      <p>There is no active development service for <code id="requested-host"></code>.</p>
+      <p id="suggestion" hidden>Did you mean <a id="suggestion-link"></a>?</p>
+    </section>
+
+    <h2>Active environments</h2>
+    <div id="environments"></div>
+
+    <section id="runtime-section" hidden>
+      <h2>Environment checks</h2>
+      <div id="runtime-checks"><p class="muted">Loading runtime information…</p></div>
+    </section>
+
+    <p class="muted">This page is generated from the currently active development routes.</p>
+
+    <footer class="project-links">
+      <strong>Help improve this development environment</strong>
+      <p class="muted">Contributions, bug reports, and stars help the project grow.</p>
+      <nav aria-label="Project links">
+        <a href="https://github.com/LibreCodeCoop/nextcloud-docker-development" target="_blank" rel="noopener noreferrer">Contribute on GitHub</a>
+        <a href="https://github.com/LibreCodeCoop/nextcloud-docker-development/issues/new/choose" target="_blank" rel="noopener noreferrer">Report an issue</a>
+        <a href="https://github.com/LibreCodeCoop/nextcloud-docker-development" target="_blank" rel="noopener noreferrer">Star on GitHub</a>
+      </nav>
+    </footer>
+  </main>
+
+  <script type="application/json" id="routes">{{ toJson $routes }}</script>
+  <script>
+    const serviceNames = {
+      nginx: 'Nextcloud',
+      mailpit: 'Mailpit',
+      playwright: 'Playwright',
+      eurooffice: 'EuroOffice',
+      'signal-gateway': 'Signal Gateway',
+    };
+
+    const routes = JSON.parse(document.getElementById('routes').textContent)
+      .filter(({ host }) => !host.includes('*') && !host.startsWith('~'))
+      .sort((a, b) => a.project.localeCompare(b.project) || a.host.localeCompare(b.host));
+
+    const environments = document.getElementById('environments');
+    if (routes.length === 0) {
+      const empty = document.createElement('p');
+      empty.className = 'muted';
+      empty.textContent = 'No development environments are active.';
+      environments.appendChild(empty);
+    } else {
+      let currentProject = null;
+      let list = null;
+
+      for (const route of routes) {
+        if (route.project !== currentProject) {
+          currentProject = route.project;
+          const heading = document.createElement('h3');
+          heading.textContent = currentProject;
+          environments.appendChild(heading);
+
+          list = document.createElement('ul');
+          environments.appendChild(list);
+        }
+
+        const item = document.createElement('li');
+        const label = document.createElement('strong');
+        label.textContent = `${serviceNames[route.service] || route.service}: `;
+        const link = document.createElement('a');
+        link.href = `https://${route.host}`;
+        link.dataset.host = route.host;
+        link.textContent = link.href;
+        item.append(label, link);
+        list.appendChild(item);
+      }
+    }
+
+    const requestedHost = window.location.hostname;
+    if (requestedHost !== 'localhost') {
+      const panel = document.getElementById('not-found');
+      document.getElementById('requested-host').textContent = requestedHost;
+      panel.hidden = false;
+
+      const hosts = routes.map(({ host }) => host);
+      const distance = (a, b) => {
+        const row = Array.from({ length: b.length + 1 }, (_, index) => index);
+        for (let i = 1; i <= a.length; i++) {
+          let previous = row[0];
+          row[0] = i;
+          for (let j = 1; j <= b.length; j++) {
+            const current = row[j];
+            row[j] = Math.min(row[j] + 1, row[j - 1] + 1, previous + (a[i - 1] === b[j - 1] ? 0 : 1));
+            previous = current;
+          }
+        }
+        return row[b.length];
+      };
+
+      if (hosts.length > 0) {
+        const closest = hosts.reduce((best, host) => distance(requestedHost, host) < distance(requestedHost, best) ? host : best);
+        const suggestion = document.getElementById('suggestion');
+        const link = document.getElementById('suggestion-link');
+        link.href = `https://${closest}`;
+        link.textContent = closest;
+        suggestion.hidden = false;
+      }
+    } else {
+      const runtimeSection = document.getElementById('runtime-section');
+      runtimeSection.hidden = false;
+
+      fetch('/runtime.json', { cache: 'no-store' })
+        .then((response) => {
+          if (!response.ok) throw new Error(`HTTP ${response.status}`);
+          return response.json();
+        })
+        .then((runtime) => {
+          const checks = document.getElementById('runtime-checks');
+          checks.replaceChildren();
+
+          const list = document.createElement('ul');
+          list.className = 'runtime-list';
+          for (const [label, version] of [
+            ['Docker Engine', runtime.docker],
+            ['runc', runtime.runc],
+          ]) {
+            const item = document.createElement('li');
+            item.textContent = `✓ ${label} ${version || 'unknown'}`;
+            list.appendChild(item);
+          }
+          checks.appendChild(list);
+
+          for (const warning of runtime.warnings || []) {
+            const panel = document.createElement('div');
+            panel.className = 'runtime-warning';
+            const title = document.createElement('strong');
+            title.textContent = '⚠ Docker runtime needs attention';
+            const message = document.createElement('span');
+            message.textContent = warning.message;
+            panel.append(title, message);
+            checks.appendChild(panel);
+          }
+
+          for (const hint of runtime.hints || []) {
+            if (hint.code !== 'long-project-name') continue;
+
+            const panel = document.createElement('div');
+            panel.className = 'runtime-hint';
+
+            const title = document.createElement('strong');
+            title.textContent = 'ℹ Shorter local URLs are available';
+
+            const explanation = document.createElement('p');
+            explanation.append(
+              'This environment uses the Compose project name ',
+              Object.assign(document.createElement('code'), { textContent: hint.projectName }),
+              ', which makes local URLs longer.'
+            );
+
+            const example = document.createElement('p');
+            example.append(
+              'For example: ',
+              Object.assign(document.createElement('code'), { textContent: `https://${hint.exampleHost}/` })
+            );
+
+            const suggestion = document.createElement('p');
+            suggestion.append(
+              'You can keep the current directory and use a shorter project name, for example ',
+              Object.assign(document.createElement('code'), { textContent: 'COMPOSE_PROJECT_NAME=dev docker compose up' }),
+              '.'
+            );
+
+            panel.append(title, explanation, example, suggestion);
+            checks.appendChild(panel);
+          }
+        })
+        .catch(() => {
+          const checks = document.getElementById('runtime-checks');
+          checks.textContent = 'Runtime information is not available.';
+          checks.className = 'muted';
+        });
+    }
+  </script>
+</body>
+</html>

.docker/nginx-proxy/docker-gen.cfg

@@ -0,0 +1,12 @@
+[[config]]
+template = "/app/nginx.tmpl"
+dest = "/etc/nginx/conf.d/default.conf"
+watch = true
+wait = "100ms:500ms"
+notifycmd = "nginx -s reload"
+
+[[config]]
+template = "/dashboard/dashboard.tmpl"
+dest = "/usr/share/nginx/html/index.html"
+watch = true
+wait = "100ms:500ms"