0Pricing
Vue Academy · Lesson

Deploying Full-Stack Vue to Production

Docker Compose for Vue + Fastify, nginx reverse proxy, SSL with Let's Encrypt, CI/CD.

The Production Topology

A full-stack Vue + Fastify app in production typically runs as two containers: an nginx container serving the built Vue static files, and a Fastify API container. nginx also reverse-proxies /api to the API.

Building the Vue App

Build the SPA with Vite to produce optimized static assets in dist. This is what nginx will serve.

# package.json script
npm run build
# produces dist/ with hashed JS/CSS and index.html

All lessons in this course

  1. Fastify Backend for Vue SPAs
  2. JWT Authentication: Login and Refresh
  3. Authenticated API Calls with Axios Interceptors
  4. Deploying Full-Stack Vue to Production
← Back to Vue Academy