I’m working to create a production Next.js static docker image after successfully setting up a dev docker environment. I’m having a growing list of challenges working through the build. I’ve followed other related posts that I could find with no luck yet.
Currently, when I run:
# clean out related images for a fresh start
docker rmi -f $(docker images -a -q)
# build and run
docker-compose -f docker-compose.prod.yaml up --build
I see this error:
=> ERROR [ui builder 6/6] RUN npm run build 3.0s
------
> [ui builder 6/6] RUN npm run build:
0.458
0.458 > [email protected] build
0.458 > next build
0.458
0.803 Attention: Next.js now collects completely anonymous telemetry regarding usage.
0.803 This information is used to shape Next.js' roadmap and prioritize features.
0.803 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
0.803 https://nextjs.org/telemetry
0.803
0.841 ▲ Next.js 14.2.4
0.841
0.872 Creating an optimized production build ...
2.913 Failed to compile.
2.913
2.913 src/app/layout.tsx
2.913 An error occurred in `next/font`.
2.913
2.913 Error: Cannot find module 'tailwindcss'
2.913 Require stack:
2.913 - /home/node/app/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
2.913 - /home/node/app/node_modules/next/dist/build/webpack/config/blocks/css/index.js
2.913 - /home/node/app/node_modules/next/dist/build/webpack/config/index.js
2.913 - /home/node/app/node_modules/next/dist/build/webpack-config.js
2.913 - /home/node/app/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js
2.913 - /home/node/app/node_modules/next/dist/build/collect-build-traces.js
2.913 - /home/node/app/node_modules/next/dist/build/index.js
2.913 - /home/node/app/node_modules/next/dist/cli/next-build.js
2.913 at Module._resolveFilename (node:internal/modules/cjs/loader:1090:15)
2.913 at /home/node/app/node_modules/next/dist/server/require-hook.js:55:36
2.913 at Function.resolve (node:internal/modules/helpers:125:19)
2.913 at loadPlugin (/home/node/app/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:49:32)
2.913 at /home/node/app/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:157:56
2.913 at Array.map (<anonymous>)
2.913 at getPostCssPlugins (/home/node/app/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:157:47)
2.913 at async /home/node/app/node_modules/next/dist/build/webpack/config/blocks/css/index.js:124:36
2.913 at async /home/node/app/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:86:33
2.913 at async Span.traceAsyncFn (/home/node/app/node_modules/next/dist/trace/trace.js:154:20)
2.913
2.914
2.914 > Build failed because of webpack errors
------
failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1
This reads as a permissions issue to me or files not getting copied over, yet I’m not quite understanding what I need to do for this build yet.
Here’s /ui/Dockerfile.prod:
# Build app
FROM node:19 AS builder
# Set working directory
WORKDIR /home/node/app
# Copy package.json and package-lock.json and install dependencies
COPY package.json package-lock.json* ./
RUN npm ci
# Copy the rest of the application files
COPY . .
# Build the Next.js app
RUN npm run build
# Prod image
FROM node:19 AS runner
# Set working directory
WORKDIR /home/node/app
# Copy built files from builder stage
COPY --from=builder /home/node/app/.next ./.next
COPY --from=builder /home/node/app/public ./public
COPY --from=builder /home/node/app/node_modules ./node_modules
COPY --from=builder /home/node/app/package.json ./package.json
# Set environment variables
ENV NODE_ENV=production
ENV PORT=3000
# Expose the port
EXPOSE 3000
# Start the Next.js app
CMD ["npm", "start"]
docker-compose.prod.yaml:
version: '3.8'
services:
postgres:
container_name: postgres-prod
image: postgres:16
ports:
- '5432:5432'
volumes:
- ./postgresdata:/var/lib/postgresql/data
- ./src/migrations/dbinit.sql:/docker-entrypoint-initdb.d/dbinit.sql
restart: always
environment:
POSTGRES_USER: ${POSTGRES_USER}
POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
POSTGRES_DB: ${POSTGRES_DB}
networks:
- app-network
api:
container_name: api-prod
image: 'node:19'
build:
context: ./server
dockerfile: Dockerfile.prod
user: 'node'
working_dir: /home/node/app
environment:
- 'NODE_ENV=${NODE_ENV}'
- 'PORT=3000'
- 'DATABASE_URL=${DATABASE_URL}'
expose:
- '3000'
ports:
- '3000:3000'
command: 'npm run dev:migrate:start'
networks:
- app-network
depends_on:
- postgres
ui:
container_name: ui-prod
build:
context: ./ui
dockerfile: Dockerfile.prod
user: 'node'
working_dir: /home/node/app
environment:
- 'NODE_ENV=production'
- 'NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}'
- 'NEXT_PUBLIC_SOCKET_URL=${NEXT_PUBLIC_SOCKET_URL}'
ports:
- '8080:8080'
command: 'npm start'
networks:
- app-network
depends_on:
- api
nginx:
build:
context: ./nginx
dockerfile: Dockerfile.prod
container_name: nginx-prod
restart: always
tty: true
ports:
- '80:80'
networks:
- app-network
depends_on:
- api
- ui
networks:
app-network:
driver: bridge
/ui/package.json:
{
"name": "ui",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 8080",
"build": "next build",
"start": "next start -p 8080",
"lint": "next lint"
},
"dependencies": {
"@auth0/auth0-react": "^2.2.4",
"next": "14.2.4",
"react": "^18",
"react-dom": "^18",
"socket.io-client": "^4.7.5"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.4",
"next-image-export-optimizer": "^1.14.1",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}
I’m running Windows 11 Home, Docker Desktop, initiating build via WSL/Ubuntu.
(note: I noticed that I need to adjust ports, yet that’s unrelated).
How do I resolve the Next.js static app Dockerfile build error, “Error: Cannot find module ‘tailwindcss'” error?