This article will guide you on how to create an optimized Docker image for a full-stack project combining Prisma and Nuxt.js, and use pnpm as the package manager.
The final image size of my project was reduced from 1.12GB to 160.21MB.
My Project Composition#
Nuxt.js is a server-side rendering application framework based on Vue.js, which is perfect for building modern web applications.
My project directly uses Nuxt to build a full-stack project.
- Nuxt3
- Prisma
- PNPM
Getting Started#
First, we will use the node:20-alpine base image, which is lighter, to reduce the final image size. Alpine Linux is popular for its security, simplicity, and small size.
Multi-stage building is an effective strategy to reduce Docker image size. We will use three stages to build our image.
Stage 1: Build Dependencies#
ARG NODE_VERSION=node:20-alpine
FROM $NODE_VERSION AS dependency-base
WORKDIR /app
RUN npm install -g pnpm
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile`
This stage is responsible for installing the dependencies of our project. We use pnpm instead of npm because pnpm is more efficient in terms of caching and disk usage.
Most projects now use pnpm as the package manager instead of npm.
Stage 2: Build the Application#
FROM dependency-base AS production-base
COPY . .
RUN pnpm run build
In this stage, we copy the project code and execute the build command. Here, the build refers to the Nuxt.js build process, which generates static files and resources required for server-side rendering.
Stage 3: Generate Production Image#
FROM $NODE_VERSION AS production
COPY --from=production-base /app/.output /app/.output
ENV NUXT_HOST=0.0.0.0 \
NUXT_APP_VERSION=latest \
DATABASE_URL=file:./db.sqlite \
NODE_ENV=production
WORKDIR /app
EXPOSE 3000
CMD ["node", "/app/.output/server/index.mjs"]
Finally, we create an image for production environment. This image only includes necessary files to run the application, reducing unnecessary layers and keeping the image as minimal as possible.
We also define some environment variables, such as NUXT_HOST and DATABASE_URL, which are required by the Nuxt.js application and Prisma. Among them, DATABASE_URL is set to use the SQLite file in the project root directory as the database.
Finally, we run the Nuxt.js application by exposing port 3000 and specifying the startup command.
Image Size Comparison for Different Build Approaches#
They are:
- 3-step build
- 2-step build
- Direct build
Dockerfile Overview#
# Use a smaller base image
ARG NODE_VERSION=node:20-alpine
# Stage 1: Build dependencies
FROM $NODE_VERSION AS dependency-base
# Create app directory
WORKDIR /app
# Install pnpm
RUN npm install -g pnpm
# Copy the package files
COPY package.json pnpm-lock.yaml ./
# Install dependencies using pnpm
RUN pnpm install --frozen-lockfile
# Stage 2: Build the application
FROM dependency-base AS production-base
# Copy the source code
COPY . .
# Build the application
RUN pnpm run build
# Stage 3: Production image
FROM $NODE_VERSION AS production
# Copy built assets from previous stage
COPY --from=production-base /app/.output /app/.output
# Define environment variables
ENV NUXT_HOST=0.0.0.0 \
NUXT_APP_VERSION=latest \
DATABASE_URL=file:./db.sqlite \
NODE_ENV=production
# Set the working directory
WORKDIR /app
EXPOSE 3000
# Start the app
CMD ["node", "/app/.output/server/index.mjs"]