Deploying a Nuxt application can be a breeze — especially when you use Docker to package your app and all its dependencies into a lightweight, portable container. In this article, we’ll walk through how to build and serve a static Nuxt app using Docker and Nginx.
Whether you’re deploying to AWS, DigitalOcean, or your own VPS, this setup ensures consistency between development and production environments, reduces “works on my machine” issues, and makes your build process repeatable and predictable.
We build the docker image in two steps.
Stage 1 — Builder:
We start from a lightweight Node.js image (node:23-alpine
). It's usually good to start off with -alpine
base images as they are much smaller in size, thus speeding up build times and reducing the final image size.
Install dependencies using npm ci
which ensures a clean, reproducible install, since it only installes packages according to the package.json
.
Copy the application code and run npm run generate
, which creates a static version of your Nuxt site inside .output/public
.
Stage 2 — Nginx:
In this step we switch to a fresh, minimal Nginx image and copy over the generated static files from the builder stage to /usr/share/nginx/html
which Nginx serves static files from by default.
The final image only contains Nginx and your built files — no Node, no dev dependencies, keeping it small and secure.
Here’s the complete Dockerfile:
# Stage 1: Build the Nuxt app
FROM node:23-alpine as builder
WORKDIR /app
COPY package\*.json ./
RUN npm ci
COPY . .
RUN npm run generate
# Stage 2: Serve with Nginx
FROM nginx:1.29.1-alpine
COPY --from=builder /app/.output/public/ /usr/share/nginx/html
You can build and run your image like this:
docker build -t my-nuxt-app .
docker run -p 8080:80 my-nuxt-app
Then open your browser to http://localhost:8080 — your Nuxt app should be live!