Vue Docker and CI

Introduction

Ship the Vue dist/ folder behind Nginx in a small Docker image, optionally alongside a FastAPI API in docker compose. Add GitHub Actions to run npm run build and npm run test on every push—linked to the Git CI chapter.

Prerequisites

Multi-Stage Dockerfile

Dockerfile (project root):

Build:

bash
docker build -t hello-vue --build-arg VITE_API_URL=/api .
docker run -p 8080:80 hello-vue

Open http://localhost:8080.

Nginx SPA Fallback

nginx/default.conf:

Code explanation:

  • try_files fixes 404 on refresh for Vue Router history mode
  • /api/ proxy avoids browser CORS in production when API runs in Compose

Full Nginx topics: What Is Nginx.

.dockerignore

dockerignore
node_modules/
dist/
.git/
.env
.env.*
*.md
coverage/

docker compose (Frontend + API)

docker-compose.yml:

Tip

VITE_* variables are baked in at build time. Change API URL → rebuild the web image, or use relative /api paths and proxy.

GitHub Actions CI

.github/workflows/vue-ci.yml:

Adjust working-directory if the Vue app lives at repo root.

Environment Matrix

EnvironmentAPI URL strategy
Local devVite server.proxy
Docker ComposeNginx proxy_pass + VITE_API_URL=/api
Netlify/VercelEnv var in dashboard + backend CORS

Health Check (Optional)

Nginx container:

yaml
healthcheck:
  test: ["CMD", "wget", "-qO-", "http://127.0.0.1/"]
  interval: 10s
  timeout: 3s
  retries: 3

Deliverables Checklist

  • docker build produces image under ~50 MB (nginx stage)
  • Direct URL /dashboard loads (not 404)
  • CI runs npm run build without errors
  • Secrets not copied into image (.dockerignore, no .env in COPY)

FAQ

Why nginx
not node in production?

Runtime only serves static files—no Node.js needed after npm run build.

Preview with npm run preview in Docker?

Possible but not typical for production; use Nginx.

Separate frontend repo CI?

Same workflow—set working-directory or run at root.

E2E in CI?

Add Playwright job after build—see Testing E2E note.

Compose with PostgreSQL?

Stack pattern in FastAPI Docker—Vue web service adds static layer.