Run Docker web container with nginx (#721)

* WIP

* Allow running docker web independently, update docs

* Move return later

* Remove graphql nginx

Author: markmiro

DOCKER.md

@@ -1,10 +1,14 @@
 # Docker Build and Run Guide
 
-This guide explains how to build and run the In the Loop frontend using Docker.
+This guide explains how to build and run In the Loop services using Docker.
 
 ## Overview
 
-The Docker image builds the production frontend and serves it using Vite's preview server.
+In the Loop consists of three Docker services:
+
+- **web**: Production frontend served via nginx
+- **sync**: Backend API and WebSocket sync service (Cloudflare Worker)
+- **iframe-outputs**: Sandboxed output rendering service
 
 ## Prerequisites
 
@@ -51,9 +55,7 @@ The services communicate via the `intheloop-network` Docker network:
 
 ## Testing Images Individually
 
-The main issue is the `web` Docker image needing access to `localhost:8787`. Docker won't be able to access ports on the host machine. If you want to run it, the easiest way is to also run the `sync` image in Docker.
-
-Otherwise, you can test these images individually to make sure they're working.
+You can build and run individual services for testing. The `web` service requires the `sync` service to be accessible.
 
 ### Building and Running Individual Images
 
@@ -65,13 +67,30 @@ Build the web image:
 docker build -f Dockerfile.web -t intheloop-web:latest .
 ```
 
-Run the web service:
+**Running with docker-compose (recommended):**
+
+The web service automatically connects to the `sync` service via Docker network DNS:
 
 ```shell
-docker run -p 5173:5173 intheloop-web:latest
+docker compose up web
 ```
 
-The web service will be available at `http://localhost:5173`. Note that it expects the sync service to be available at `http://sync:8787` (when running in docker-compose) or you'll need to configure the `VITE_API_TARGET` environment variable.
+**Running standalone:**
+
+When running standalone, you need to specify where the sync service is located using the `SYNC_HOST` environment variable:
+
+```shell
+# If sync is running on host machine (Mac/Windows)
+docker run -p 5173:5173 -e SYNC_HOST=host.docker.internal intheloop-web:latest
+
+# If sync is running on host machine (Linux)
+docker run -p 5173:5173 -e SYNC_HOST=172.17.0.1 intheloop-web:latest
+
+# If sync is running in another Docker container with a known IP
+docker run -p 5173:5173 -e SYNC_HOST=<container-ip> intheloop-web:latest
+```
+
+The web service will be available at `http://localhost:5173`. By default, `SYNC_HOST` is set to `sync` (for docker-compose usage).
 
 #### Iframe Outputs Service
 
@@ -104,3 +123,29 @@ docker run -p 8787:8787 intheloop-sync:latest
 ```
 
 The sync service will be available at `http://localhost:8787`.
+
+## Environment Variables
+
+### Web Service
+
+- `SYNC_HOST` (default: `sync`): Hostname or IP address of the sync service. Used by nginx to proxy API requests. Set to `sync` for docker-compose, or override for standalone runs.
+
+### Sync Service
+
+The sync service uses environment variables from `.dev.vars` file. See `.dev.vars.example` for configuration options.
+
+## Troubleshooting
+
+### "host not found in upstream 'sync'"
+
+This error occurs when running the web container standalone without setting `SYNC_HOST`. Either:
+
+1. Use docker-compose to run all services together, or
+2. Set `SYNC_HOST` environment variable when running the web container standalone
+
+### Web service can't connect to sync service
+
+- Verify the sync service is running and accessible
+- Check that `SYNC_HOST` is set correctly for your environment
+- On Linux, you may need to use the Docker bridge IP (`172.17.0.1`) instead of `host.docker.internal`
+- Ensure both containers are on the same Docker network if running separately

Dockerfile.web

@@ -1,53 +1,52 @@
-# Single-stage Dockerfile for In the Loop
-# Copies source files and runs the dev server
-
-FROM node:23-alpine
+# syntax=docker/dockerfile:1.4
+# Build stage
+FROM node:23-alpine AS builder
 RUN apk add --no-cache bash git && corepack enable && corepack prepare pnpm@latest --activate
 WORKDIR /app
 
-# ---
-# Install dependencies
-# ---
-
-# Copy package files first
+# Copy workspace files
 COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+
+# Copy package.json files for all packages
 COPY packages/agent-core/package.json ./packages/agent-core/
 COPY packages/ai-core/package.json ./packages/ai-core/
 COPY packages/pyodide-runtime/package.json ./packages/pyodide-runtime/
 COPY packages/schema/package.json ./packages/schema/
 
-# Install dependencies
-RUN pnpm install --no-frozen-lockfile
-
-# ---
-# Copy source files
-# ---
-
-# Copy everything else (filtered by .dockerignore)
-COPY . .
-
-# Override env files from examples
-COPY .env.example .env
-COPY .dev.vars.example .dev.vars
+# Install dependencies with cache mount
+RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store \
+    pnpm install --frozen-lockfile
 
-# ---
-# Set environment variables
-# ---
+# Copy source files needed for build
+COPY packages ./packages
+COPY src ./src
+COPY public ./public
+COPY vite.config.ts tsconfig.json tsconfig.node.json ./
+COPY index.html ./
+COPY vite-plugins ./vite-plugins
 
 # Set git commit hash to avoid git commands in container
 ENV VITE_GIT_COMMIT_HASH=docker-build
 ENV VITE_API_TARGET=http://sync:8787
-ENV VITE_HOST=0.0.0.0
 
-# ---
-# Run server
-# ---
+# Build the web app
+RUN pnpm build
 
-# Expose port
-EXPOSE 5173
+# Production stage
+FROM nginx:alpine
+
+# Copy built files from builder stage
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY nginx-main.conf /etc/nginx/nginx.conf
+# Copy as template - nginx:alpine automatically processes templates in /etc/nginx/templates/
+COPY nginx.conf /etc/nginx/templates/default.conf.template
 
-# Keep container running for debugging/SSH access
-# CMD ["tail", "-f", "/dev/null"]
+# Set default SYNC_HOST (can be overridden at runtime)
+ENV SYNC_HOST=sync
+
+# Expose port 5173
+EXPOSE 5173
 
-# Run dev server
-CMD ["pnpm", "run", "dev:web", "--port", "5173"]
+# nginx:alpine entrypoint automatically processes templates and starts nginx

README.md

@@ -149,11 +149,32 @@ Learn more about [what works today](./docs/what-works-today.md).
 
 You can help make it better by contributing. We welcome code contributions and ideas! See the documentation links below for more information.
 
+## Docker
+
+In the Loop can be run using Docker Compose for a complete production-like setup:
+
+```bash
+# Build all services
+docker compose build
+
+# Start all services
+docker compose up
+```
+
+This starts three services:
+
+- **Web** (http://localhost:5173) - Frontend application
+- **Sync** (http://localhost:8787) - Backend API and WebSocket sync
+- **Iframe Outputs** (http://localhost:8000) - Sandboxed output rendering
+
+See **[Docker Guide](./DOCKER.md)** for detailed instructions on building and running individual services.
+
 ## Documentation
 
 - **[Developing](./DEVELOPMENT.md)** - Developing in this repo
 - **[Contributing](./CONTRIBUTING.md)** - Contribute to this project
 - **[Deployment Guide](./DEPLOYMENT.md)** - Production deployment instructions
+- **[Docker Guide](./DOCKER.md)** - Docker build and run instructions
 - **[Roadmap](./ROADMAP.md)** - Development priorities and future plans
 
 - **[AI Development Context](./AGENTS.md)** - An AGENTS.md file for contributors and AI agents.

nginx-main.conf

@@ -0,0 +1,17 @@
+# Main nginx configuration for In the Loop web app
+# The default nginx configuration causes this warning in the logs when running in hub:
+# nginx: [warn] the "user" directive makes sense only if the master process runs with super-user privileges, ignored in /etc/nginx/nginx.conf:2
+# So we're overriding it here.
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    sendfile on;
+    keepalive_timeout 65;
+
+    include /etc/nginx/conf.d/*.conf;
+}

nginx.conf

@@ -0,0 +1,36 @@
+server {
+    listen 5173;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/javascript application/json;
+
+    # Health check endpoint
+    location /healthz {
+        access_log off;
+        add_header Content-Type text/plain;
+        return 200 "healthy\n";
+    }
+
+    # Proxy API requests to backend
+    location /api {
+        proxy_pass http://${SYNC_HOST}:8787;
+        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_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_cache_bypass $http_upgrade;
+    }
+
+    # Serve static files
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
+