docker-compose-network-detachment

Answer

Fix 1 — Network detachment (diagnose → remediate → make it structural)

Diagnose (never trust up -d silently):

docker compose ps -a
docker inspect "$(docker compose ps -q server)" \
  --format '{{json .NetworkSettings.Networks}}'
# healthy:   {"myapp_default":{"NetworkID":"...","IPAddress":"<ip-address>",...}}
# detached:  {}

Immediate remediation — reattach or force a clean recreate:

# Option A: reconnect the live container (no downtime for others)
NET=$(docker network ls --format '{{.Name}}' | grep "${COMPOSE_PROJECT_NAME:-myapp}_default")
docker network connect "$NET" "$(docker compose ps -q server)"
docker restart "$(docker compose ps -q server)"   # refresh /etc/hosts + DNS cache

# Option B (preferred): never trust the stale container
docker compose up -d --force-recreate server

Structural fix — make the network explicit and add a guard so a detached container can never serve a 502 again:

# docker-compose.yml
services:
  server:
    build:
      context: .
      dockerfile: apps/server/Dockerfile
    networks: [default]
    restart: unless-stopped
    healthcheck:
      test: ["CMD", "node", "-e",
             "require('http').get('http://<ip-address>:3000/health',
              r=>process.exit(r.statusCode===200?0:1)).on('error',()=>process.exit(1))"]
      interval: 10s
      timeout: 3s
      retries: 5

  nginx:
    image: nginx:alpine
    ports: ["80:80"]
    depends_on:
      server:
        condition: service_healthy     # nginx only starts once server is reachable
    networks: [default]
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro

networks:
  default:
    name: ${COMPOSE_PROJECT_NAME:-myapp}_default   # pin the name so `inspect` is predictable

# Guard script that catches detachment before it reaches production:
#!/usr/bin/env bash
set -euo pipefail
cid="$(docker compose ps -q server)"
if [ -z "$cid" ] || [ "$(docker inspect "$cid" -f '{{len .NetworkSettings.Networks}}')" = "0" ]; then
  echo "server detached/absent -> force recreate"
  docker compose up -d --force-recreate server
fi
docker compose up -d          # normal idempotent bring-up afterwards

Fix 2 — .dockerignore (kill the leak at the context root)

A bare node_modules/ only matches the context root. A pnpm workspace has node_modules/, apps/web/node_modules/, packages/shared/node_modules/ (and .pnpm store), so the nested ones leaked, got copied over the in-image pnpm install, and replaced its symlinks with host files (vite's binary vanished). .tsbuildinfo from the host made tsc -b skip emit.

# BROKEN (root-only match):
# node_modules/

# FIXED — match at any depth:
**/node_modules
**/*.tsbuildinfo        # also covers root tsconfig.tsbuildinfo (** matches zero dirs)

# belt-and-braces:
**/dist
**/.vite
.git
.gitignore
*.log
.env
.env.*
Dockerfile*
.dockerignore
docker-compose*.yml

Fix 3 — build args so the bundle is proxy-relative, and a correct Dockerfile

# docker-compose.yml (build section)
  web:
    build:
      context: .
      dockerfile: apps/web/Dockerfile
      args:
        VITE_API_URL: ${VITE_API_URL:-/api}   # default proxy-relative

# apps/web/Dockerfile
# syntax=docker/dockerfile:1
FROM node:20-alpine AS build
WORKDIR /app

# 1) manifests only -> cached layer
COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
COPY apps/web/package.json         apps/web/package.json
COPY packages/shared/package.json  packages/shared/package.json
RUN corepack enable && pnpm install --frozen-lockfile

# 2) sources — node_modules/tsbuildinfo are already excluded by .dockerignore
COPY . .

# 3) ARG -> ENV so Vite inlines it at build time
ARG VITE_API_URL=/api
ENV VITE_API_URL=$VITE_API_URL

# 4) composite project: build deps first, then the app
RUN pnpm --filter shared build && pnpm --filter web build

# 5) runtime (nginx)
FROM nginx:alpine
COPY --from=build /app/apps/web/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': { target: process.env.API_PROXY_TARGET ?? 'http://localhost:3000', changeOrigin: true },
    },
  },
})

// app code — same-origin, proxy-relative
const api = import.meta.env.VITE_API_URL ?? '/api'
const res = await fetch(`${api}/health`)

# nginx.conf
server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  location /api/ {
    proxy_pass http://server:3000/api/;      # compose DNS — only works if server is on the network
    proxy_set_header Host $host;
  }
  location / { try_files $uri $uri/ /index.html; }
}