OpenCode Web-UI mit Cloudflare Tunnel auf CT 116 einrichten

orbitalo commented

2026-04-10 15:54:06 +00:00

Owner

Ziel

OpenCode als dauerhaft laufende Web-UI auf CT 116 (homelab-ai-bot) bereitstellen und über opencode.orbitalo.net via Cloudflare Tunnel erreichbar machen.

Systemkontext

Server: CT 116 (homelab-ai-bot), IP 10.10.10.116
Cloudflared: läuft bereits (systemd, Token-Auth)
Nginx: läuft bereits (Ports 8766, 9443)
Geplanter Port: 4000 (OpenCode Web-UI)
Ziel-Domain: opencode.orbitalo.net

Architektur

Browser → Cloudflare Tunnel (cloudflared) → nginx CT116 → OpenCode :4000

Checkliste

Schritt 1: OpenCode installieren

OpenCode Web-Modus in Docs prüfen (opencode.ai/docs)
Binary auf CT 116 herunterladen und installieren (/usr/local/bin/opencode)
opencode --version verifizieren

Schritt 2: Konfiguration & API-Keys

/opt/opencode/ Verzeichnis anlegen
.env mit OPENROUTER_API_KEY erstellen
Modell-Konfiguration festlegen
Manueller Test-Start: opencode --web --port 4000

Schritt 3: systemd-Service

/etc/systemd/system/opencode-webui.service erstellen
systemctl enable --now opencode-webui
Logs prüfen: journalctl -u opencode-webui -n 30

Schritt 4: Nginx Reverse-Proxy

/etc/nginx/sites-available/opencode erstellen
Symlink nach sites-enabled setzen
nginx -t && systemctl reload nginx

Schritt 5: Cloudflare Tunnel Route

Route opencode.orbitalo.net → http://localhost:4000 anlegen
DNS CNAME prüfen
Externaler Zugriff testen

Schritt 6: Absicherung

Cloudflare Access Policy (Zero Trust) einrichten ODER nginx Basic Auth
Zugriff auf eigenen Account beschränken

Offene Fragen

Unterstützt OpenCode aktuell --web / Server-Modus? → Docs prüfen!
Authentifizierung: Cloudflare Access oder Basic Auth?
Welches Workspace-Verzeichnis soll default sein?

Referenz

Plan-Datei: PLAN-opencode-webui.md im Repo
Docs: https://opencode.ai/docs
Bestehende Tunnel-Config: CT 116 /etc/systemd/system/cloudflared.service

## Ziel OpenCode als dauerhaft laufende Web-UI auf CT 116 (homelab-ai-bot) bereitstellen und über `opencode.orbitalo.net` via Cloudflare Tunnel erreichbar machen. ## Systemkontext - **Server:** CT 116 (homelab-ai-bot), IP 10.10.10.116 - **Cloudflared:** läuft bereits (systemd, Token-Auth) - **Nginx:** läuft bereits (Ports 8766, 9443) - **Geplanter Port:** 4000 (OpenCode Web-UI) - **Ziel-Domain:** `opencode.orbitalo.net` ## Architektur ``` Browser → Cloudflare Tunnel (cloudflared) → nginx CT116 → OpenCode :4000 ``` ## Checkliste ### Schritt 1: OpenCode installieren - [ ] OpenCode Web-Modus in Docs prüfen (opencode.ai/docs) - [ ] Binary auf CT 116 herunterladen und installieren (`/usr/local/bin/opencode`) - [ ] `opencode --version` verifizieren ### Schritt 2: Konfiguration & API-Keys - [ ] `/opt/opencode/` Verzeichnis anlegen - [ ] `.env` mit `OPENROUTER_API_KEY` erstellen - [ ] Modell-Konfiguration festlegen - [ ] Manueller Test-Start: `opencode --web --port 4000` ### Schritt 3: systemd-Service - [ ] `/etc/systemd/system/opencode-webui.service` erstellen - [ ] `systemctl enable --now opencode-webui` - [ ] Logs prüfen: `journalctl -u opencode-webui -n 30` ### Schritt 4: Nginx Reverse-Proxy - [ ] `/etc/nginx/sites-available/opencode` erstellen - [ ] Symlink nach `sites-enabled` setzen - [ ] `nginx -t && systemctl reload nginx` ### Schritt 5: Cloudflare Tunnel Route - [ ] Route `opencode.orbitalo.net → http://localhost:4000` anlegen - [ ] DNS CNAME prüfen - [ ] Externaler Zugriff testen ### Schritt 6: Absicherung - [ ] Cloudflare Access Policy (Zero Trust) einrichten ODER nginx Basic Auth - [ ] Zugriff auf eigenen Account beschränken ## Offene Fragen 1. Unterstützt OpenCode aktuell `--web` / Server-Modus? → Docs prüfen! 2. Authentifizierung: Cloudflare Access oder Basic Auth? 3. Welches Workspace-Verzeichnis soll default sein? ## Referenz - Plan-Datei: `PLAN-opencode-webui.md` im Repo - Docs: https://opencode.ai/docs - Bestehende Tunnel-Config: CT 116 `/etc/systemd/system/cloudflared.service`

orbitalo commented

2026-04-10 16:05:25 +00:00

Author

Owner

Update nach Docs-Prüfung (10.04.2026)

Erkenntnisse ✅

Befehl: opencode web (nicht opencode serve)
opencode web = vollständige Web-UI + API-Server, stabil und dokumentiert (Stand 07.04.2026)
opencode serve = nur headless API, kein UI — für uns nicht relevant
Eingebaute Basic-Auth via OPENCODE_SERVER_PASSWORD / OPENCODE_SERVER_USERNAME
nginx braucht WebSocket/SSE-Support (Upgrade-Header) — sonst bricht die UI ab
Config via /opt/opencode/opencode.json möglich

Architektur (final)

Browser → Cloudflare (opencode.orbitalo.net)
       → cloudflared CT 116 (läuft bereits)
       → nginx proxy_pass http://127.0.0.1:4000  (mit Upgrade-Header!)
       → opencode web --hostname 127.0.0.1 --port 4000
         (OPENCODE_SERVER_PASSWORD gesetzt)

Konfigurationsdateien (Entwurf)

/opt/opencode/opencode.json

{
  "server": {
    "port": 4000,
    "hostname": "127.0.0.1"
  }
}

/opt/opencode/.env

OPENCODE_SERVER_PASSWORD=<sicheres-passwort>
OPENCODE_SERVER_USERNAME=orbitalo
OPENROUTER_API_KEY=<key-aus-openrouter>

/etc/systemd/system/opencode-webui.service

[Unit]
Description=OpenCode Web-UI
After=network-online.target
Wants=network-online.target

[Service]
Type=simple
WorkingDirectory=/root/homelab-brain
EnvironmentFile=/opt/opencode/.env
ExecStart=/usr/local/bin/opencode web --port 4000 --hostname 127.0.0.1
Restart=on-failure
RestartSec=5s

[Install]
WantedBy=multi-user.target

/etc/nginx/sites-available/opencode

server {
    listen 80;
    server_name opencode.orbitalo.net;

    location / {
        proxy_pass http://127.0.0.1:4000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_read_timeout 86400;
    }
}

Checkliste

Schritt 1: OpenCode installieren

curl -fsSL https://opencode.ai/install | bash auf CT 116
which opencode und opencode --version prüfen

Schritt 2: Konfiguration & Secrets

/opt/opencode/ anlegen
opencode.json mit Port 4000 und hostname 127.0.0.1 erstellen
.env mit OPENROUTER_API_KEY und OPENCODE_SERVER_PASSWORD erstellen
Passwort generieren: openssl rand -base64 24
Manueller Test: cd /opt/opencode && source .env && opencode web --port 4000
Health-Check: curl -u orbitalo:<pw> http://127.0.0.1:4000/global/health

Schritt 3: systemd-Service

Service-Datei erstellen
systemctl daemon-reload && systemctl enable --now opencode-webui
Logs: journalctl -u opencode-webui -n 30 --no-pager

Schritt 4: Nginx Reverse-Proxy (mit WebSocket-Support!)

/etc/nginx/sites-available/opencode erstellen
ln -s /etc/nginx/sites-available/opencode /etc/nginx/sites-enabled/
nginx -t && systemctl reload nginx

Schritt 5: Cloudflare Tunnel Route

Route opencode.orbitalo.net → http://localhost:4000 im Dashboard anlegen
DNS CNAME prüfen
systemctl restart cloudflared
Externer Test: curl -u orbitalo:<pw> https://opencode.orbitalo.net/global/health

Schritt 6: Absicherung & Dokumentation

Passwort in OpenMemory speichern
Auto-Sync-Hinweis: sync_state.py stoppen wenn OpenCode aktiv im Repo arbeitet!

Hinweise / Risiken

sync_state.py macht git reset --hard FETCH_HEAD alle 15 Min → Auto-Sync stoppen bevor OpenCode Änderungen macht
Port 4000 vor Deploy prüfen: ss -tlnp | grep 4000
WebSocket zwingend in nginx, sonst bricht die UI-Verbindung ab

Detaillierter Plan: PLAN-opencode-webui.md im Repo.

## Update nach Docs-Prüfung (10.04.2026) ### Erkenntnisse ✅ - Befehl: **`opencode web`** (nicht `opencode serve`) - `opencode web` = vollständige Web-UI + API-Server, stabil und dokumentiert (Stand 07.04.2026) - `opencode serve` = nur headless API, kein UI — für uns nicht relevant - Eingebaute Basic-Auth via `OPENCODE_SERVER_PASSWORD` / `OPENCODE_SERVER_USERNAME` - nginx braucht **WebSocket/SSE-Support** (`Upgrade`-Header) — sonst bricht die UI ab - Config via `/opt/opencode/opencode.json` möglich ### Architektur (final) ``` Browser → Cloudflare (opencode.orbitalo.net) → cloudflared CT 116 (läuft bereits) → nginx proxy_pass http://127.0.0.1:4000 (mit Upgrade-Header!) → opencode web --hostname 127.0.0.1 --port 4000 (OPENCODE_SERVER_PASSWORD gesetzt) ``` ### Konfigurationsdateien (Entwurf) **/opt/opencode/opencode.json** ```json { "server": { "port": 4000, "hostname": "127.0.0.1" } } ``` **/opt/opencode/.env** ``` OPENCODE_SERVER_PASSWORD=<sicheres-passwort> OPENCODE_SERVER_USERNAME=orbitalo OPENROUTER_API_KEY=<key-aus-openrouter> ``` **/etc/systemd/system/opencode-webui.service** ```ini [Unit] Description=OpenCode Web-UI After=network-online.target Wants=network-online.target [Service] Type=simple WorkingDirectory=/root/homelab-brain EnvironmentFile=/opt/opencode/.env ExecStart=/usr/local/bin/opencode web --port 4000 --hostname 127.0.0.1 Restart=on-failure RestartSec=5s [Install] WantedBy=multi-user.target ``` **/etc/nginx/sites-available/opencode** ```nginx server { listen 80; server_name opencode.orbitalo.net; location / { proxy_pass http://127.0.0.1:4000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_read_timeout 86400; } } ``` ### Checkliste **Schritt 1: OpenCode installieren** - [ ] `curl -fsSL https://opencode.ai/install | bash` auf CT 116 - [ ] `which opencode` und `opencode --version` prüfen **Schritt 2: Konfiguration & Secrets** - [ ] `/opt/opencode/` anlegen - [ ] `opencode.json` mit Port 4000 und hostname 127.0.0.1 erstellen - [ ] `.env` mit `OPENROUTER_API_KEY` und `OPENCODE_SERVER_PASSWORD` erstellen - [ ] Passwort generieren: `openssl rand -base64 24` - [ ] Manueller Test: `cd /opt/opencode && source .env && opencode web --port 4000` - [ ] Health-Check: `curl -u orbitalo:<pw> http://127.0.0.1:4000/global/health` **Schritt 3: systemd-Service** - [ ] Service-Datei erstellen - [ ] `systemctl daemon-reload && systemctl enable --now opencode-webui` - [ ] Logs: `journalctl -u opencode-webui -n 30 --no-pager` **Schritt 4: Nginx Reverse-Proxy (mit WebSocket-Support!)** - [ ] `/etc/nginx/sites-available/opencode` erstellen - [ ] `ln -s /etc/nginx/sites-available/opencode /etc/nginx/sites-enabled/` - [ ] `nginx -t && systemctl reload nginx` **Schritt 5: Cloudflare Tunnel Route** - [ ] Route `opencode.orbitalo.net → http://localhost:4000` im Dashboard anlegen - [ ] DNS CNAME prüfen - [ ] `systemctl restart cloudflared` - [ ] Externer Test: `curl -u orbitalo:<pw> https://opencode.orbitalo.net/global/health` **Schritt 6: Absicherung & Dokumentation** - [ ] Passwort in OpenMemory speichern - [ ] Auto-Sync-Hinweis: sync_state.py stoppen wenn OpenCode aktiv im Repo arbeitet! ### Hinweise / Risiken - **sync_state.py** macht `git reset --hard FETCH_HEAD` alle 15 Min → Auto-Sync stoppen bevor OpenCode Änderungen macht - **Port 4000** vor Deploy prüfen: `ss -tlnp | grep 4000` - **WebSocket** zwingend in nginx, sonst bricht die UI-Verbindung ab Detaillierter Plan: `PLAN-opencode-webui.md` im Repo.

orbitalo commented

2026-04-10 16:09:49 +00:00

Author

Owner

Update nach Docs-Prüfung (10.04.2026)

Erkenntnisse ✅

Befehl: opencode web (nicht opencode serve)
opencode web = vollständige Web-UI + API-Server, stabil und dokumentiert (Stand 07.04.2026)
opencode serve = nur headless API, kein UI — für uns nicht relevant
Eingebaute Basic-Auth via OPENCODE_SERVER_PASSWORD / OPENCODE_SERVER_USERNAME
nginx braucht WebSocket/SSE-Support (Upgrade-Header) — sonst bricht die UI ab
Config via /opt/opencode/opencode.json möglich

Architektur (final)

Browser → Cloudflare (opencode.orbitalo.net)
       → cloudflared CT 116 (läuft bereits)
       → nginx proxy_pass http://127.0.0.1:4000  (mit Upgrade-Header!)
       → opencode web --hostname 127.0.0.1 --port 4000
         (OPENCODE_SERVER_PASSWORD gesetzt)

Konfigurationsdateien (Entwurf)

/opt/opencode/opencode.json

{
  "server": {
    "port": 4000,
    "hostname": "127.0.0.1"
  }
}

/opt/opencode/.env

OPENCODE_SERVER_PASSWORD=<sicheres-passwort>
OPENCODE_SERVER_USERNAME=orbitalo
OPENROUTER_API_KEY=<key-aus-openrouter>

/etc/systemd/system/opencode-webui.service

[Unit]
Description=OpenCode Web-UI
After=network-online.target
Wants=network-online.target

[Service]
Type=simple
WorkingDirectory=/root/homelab-brain
EnvironmentFile=/opt/opencode/.env
ExecStart=/usr/local/bin/opencode web --port 4000 --hostname 127.0.0.1
Restart=on-failure
RestartSec=5s

[Install]
WantedBy=multi-user.target

/etc/nginx/sites-available/opencode

server {
    listen 80;
    server_name opencode.orbitalo.net;

    location / {
        proxy_pass http://127.0.0.1:4000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_read_timeout 86400;
    }
}

Checkliste

Schritt 1: OpenCode installieren

curl -fsSL https://opencode.ai/install | bash auf CT 116
which opencode und opencode --version prüfen

Schritt 2: Konfiguration & Secrets

/opt/opencode/ anlegen
opencode.json mit Port 4000 und hostname 127.0.0.1 erstellen
.env mit OPENROUTER_API_KEY und OPENCODE_SERVER_PASSWORD erstellen
Passwort generieren: openssl rand -base64 24
Manueller Test: cd /opt/opencode && source .env && opencode web --port 4000
Health-Check: curl -u orbitalo:<pw> http://127.0.0.1:4000/global/health

Schritt 3: systemd-Service

Service-Datei erstellen
systemctl daemon-reload && systemctl enable --now opencode-webui
Logs: journalctl -u opencode-webui -n 30 --no-pager

Schritt 4: Nginx Reverse-Proxy (mit WebSocket-Support!)

/etc/nginx/sites-available/opencode erstellen
ln -s /etc/nginx/sites-available/opencode /etc/nginx/sites-enabled/
nginx -t && systemctl reload nginx

Schritt 5: Cloudflare Tunnel Route

Route opencode.orbitalo.net → http://localhost:4000 im Dashboard anlegen
DNS CNAME prüfen
systemctl restart cloudflared
Externer Test: curl -u orbitalo:<pw> https://opencode.orbitalo.net/global/health

Schritt 6: Absicherung & Dokumentation

Passwort in OpenMemory speichern
Auto-Sync-Hinweis: sync_state.py stoppen wenn OpenCode aktiv im Repo arbeitet!

Hinweise / Risiken

sync_state.py macht git reset --hard FETCH_HEAD alle 15 Min → Auto-Sync stoppen bevor OpenCode Änderungen macht
Port 4000 vor Deploy prüfen: ss -tlnp | grep 4000
WebSocket zwingend in nginx, sonst bricht die UI-Verbindung ab

Detaillierter Plan: PLAN-opencode-webui.md im Repo.

## Update nach Docs-Prüfung (10.04.2026) ### Erkenntnisse ✅ - Befehl: **`opencode web`** (nicht `opencode serve`) - `opencode web` = vollständige Web-UI + API-Server, stabil und dokumentiert (Stand 07.04.2026) - `opencode serve` = nur headless API, kein UI — für uns nicht relevant - Eingebaute Basic-Auth via `OPENCODE_SERVER_PASSWORD` / `OPENCODE_SERVER_USERNAME` - nginx braucht **WebSocket/SSE-Support** (`Upgrade`-Header) — sonst bricht die UI ab - Config via `/opt/opencode/opencode.json` möglich ### Architektur (final) ``` Browser → Cloudflare (opencode.orbitalo.net) → cloudflared CT 116 (läuft bereits) → nginx proxy_pass http://127.0.0.1:4000 (mit Upgrade-Header!) → opencode web --hostname 127.0.0.1 --port 4000 (OPENCODE_SERVER_PASSWORD gesetzt) ``` ### Konfigurationsdateien (Entwurf) **/opt/opencode/opencode.json** ```json { "server": { "port": 4000, "hostname": "127.0.0.1" } } ``` **/opt/opencode/.env** ``` OPENCODE_SERVER_PASSWORD=<sicheres-passwort> OPENCODE_SERVER_USERNAME=orbitalo OPENROUTER_API_KEY=<key-aus-openrouter> ``` **/etc/systemd/system/opencode-webui.service** ```ini [Unit] Description=OpenCode Web-UI After=network-online.target Wants=network-online.target [Service] Type=simple WorkingDirectory=/root/homelab-brain EnvironmentFile=/opt/opencode/.env ExecStart=/usr/local/bin/opencode web --port 4000 --hostname 127.0.0.1 Restart=on-failure RestartSec=5s [Install] WantedBy=multi-user.target ``` **/etc/nginx/sites-available/opencode** ```nginx server { listen 80; server_name opencode.orbitalo.net; location / { proxy_pass http://127.0.0.1:4000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_read_timeout 86400; } } ``` ### Checkliste **Schritt 1: OpenCode installieren** - [ ] `curl -fsSL https://opencode.ai/install | bash` auf CT 116 - [ ] `which opencode` und `opencode --version` prüfen **Schritt 2: Konfiguration & Secrets** - [ ] `/opt/opencode/` anlegen - [ ] `opencode.json` mit Port 4000 und hostname 127.0.0.1 erstellen - [ ] `.env` mit `OPENROUTER_API_KEY` und `OPENCODE_SERVER_PASSWORD` erstellen - [ ] Passwort generieren: `openssl rand -base64 24` - [ ] Manueller Test: `cd /opt/opencode && source .env && opencode web --port 4000` - [ ] Health-Check: `curl -u orbitalo:<pw> http://127.0.0.1:4000/global/health` **Schritt 3: systemd-Service** - [ ] Service-Datei erstellen - [ ] `systemctl daemon-reload && systemctl enable --now opencode-webui` - [ ] Logs: `journalctl -u opencode-webui -n 30 --no-pager` **Schritt 4: Nginx Reverse-Proxy (mit WebSocket-Support!)** - [ ] `/etc/nginx/sites-available/opencode` erstellen - [ ] `ln -s /etc/nginx/sites-available/opencode /etc/nginx/sites-enabled/` - [ ] `nginx -t && systemctl reload nginx` **Schritt 5: Cloudflare Tunnel Route** - [ ] Route `opencode.orbitalo.net → http://localhost:4000` im Dashboard anlegen - [ ] DNS CNAME prüfen - [ ] `systemctl restart cloudflared` - [ ] Externer Test: `curl -u orbitalo:<pw> https://opencode.orbitalo.net/global/health` **Schritt 6: Absicherung & Dokumentation** - [ ] Passwort in OpenMemory speichern - [ ] Auto-Sync-Hinweis: sync_state.py stoppen wenn OpenCode aktiv im Repo arbeitet! ### Hinweise / Risiken - **sync_state.py** macht `git reset --hard FETCH_HEAD` alle 15 Min → Auto-Sync stoppen bevor OpenCode Änderungen macht - **Port 4000** vor Deploy prüfen: `ss -tlnp | grep 4000` - **WebSocket** zwingend in nginx, sonst bricht die UI-Verbindung ab Detaillierter Plan: `PLAN-opencode-webui.md` im Repo.

orbitalo closed this issue

2026-04-10 17:09:01 +00:00

Rows
Columns

OpenCode Web-UI mit Cloudflare Tunnel auf CT 116 einrichten #73

Ziel

Systemkontext

Architektur

Checkliste

Schritt 1: OpenCode installieren

Schritt 2: Konfiguration & API-Keys

Schritt 3: systemd-Service

Schritt 4: Nginx Reverse-Proxy

Schritt 5: Cloudflare Tunnel Route

Schritt 6: Absicherung

Offene Fragen

Referenz

Update nach Docs-Prüfung (10.04.2026)

Erkenntnisse ✅

Architektur (final)

Konfigurationsdateien (Entwurf)

Checkliste

Hinweise / Risiken

Update nach Docs-Prüfung (10.04.2026)

Erkenntnisse ✅

Architektur (final)

Konfigurationsdateien (Entwurf)

Checkliste

Hinweise / Risiken