Docker Configuration Design

Goal

Add Docker support for both production deployment and local development of the Vite React app, while making the default production path minimize Docker downloads.

Architecture

Production builds the static app on the host using the already-installed npm dependencies, then uses a single-stage nginx:stable-alpine3.23-slim Dockerfile to copy and serve dist on port 80. This avoids downloading a Node image and reinstalling npm packages during the Docker deployment.

Development remains an optional separate Dockerfile and compose file. It installs dependencies, runs npm run dev, exposes Vite on port 3000, and mounts source files from the host while keeping node_modules inside the container. It is not the low-download production path.

Files

.dockerignore excludes dependencies, unrelated build output, logs, and local env files from Docker build context, while retaining dist for the production image.
Dockerfile creates a small production image from the host-built static output.
nginx.conf serves static assets and falls back to index.html for React Router routes.
docker-compose.yml runs the production image on host port 8080.
Dockerfile.dev runs the Vite dev server.
docker-compose.dev.yml runs the development container on host port 3000.
README.md documents the Docker commands.

Environment

The current Vite config injects GEMINI_API_KEY during build. Production therefore reads .env.local during the host-side npm run build command and copies the resulting static bundle into the container. Development reads environment values from .env.local when present.

Verification

Run npm run lint.
Run npm run build.
Build the production Docker image after a host-side npm run build.
Optionally run the compose services if Docker is available.

1.8 KiB Raw Blame History