Introduction
In this post we will see:
- How to prepare a docker image for your next.js application
- Pass API url
Assumption Setup
We have:
- An API backend to configure
- Nextauth URL
Challenge
We have to pass URLs at build time, not run time. This is the point I struggled a lot with. So either you are building your Next.js build with docker or not, you need to pass variables at build time.
Code To receive URLs from Environment
First of all your code needs to use URLs from environment.
Whatever API you are calling, you need a base url. Your code needs to use url as below:
process.env.NEXT_PUBLIC_API_URL
# Example GET API
await axios.get(
`${process.env.NEXT_PUBLIC_API_URL}/emails/count`
)How to Pass URL from Environment
I have two variables to pass:
- NEXT_PUBLIC_API_URL
- NEXTAUTH_URL
From .env.local file
You can either place a file with name env.local and pass the values there.
NEXTAUTH_URL=YOUR_HOST:3000
NEXT_PUBLIC_API_URL=BACKEND_HOST:1337
# Do remember to use your host and portUse next.config.js
Create a file named next.config.js at the root directory of your Next.js project.
module.exports = {
env: {
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337',
NEXTAUTH_URL: process.env.NEXTAUTH_URL || 'http://localhost:3000',
},
}Here, First I’m expecting these variables to come from environment. If not present in environment, I’m usin using the default one. So, those default one will be used during development.
Prepare Docker Image
Lets have a look at docker file:
# Install dependencies only when needed
FROM node:alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
# Rebuild the source code only when needed
FROM node:alpine AS builder
ARG NEXT_PUBLIC_API_URL
ARG NEXTAUTH_URL
ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
ENV NEXTAUTH_URL=$NEXTAUTH_URL
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN npm run build && npm install --production --ignore-scripts --prefer-offline
# Production image, copy all the files and run next
FROM node:alpine AS runner
WORKDIR /app
ENV NODE_ENV production
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
USER nextjs
EXPOSE 3000
# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry.
ENV NEXT_TELEMETRY_DISABLED 1
CMD ["npm", "start"]Here, I’m passing those environment variables here as:
ARG NEXT_PUBLIC_API_URL
ARG NEXTAUTH_URL
ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
ENV NEXTAUTH_URL=$NEXTAUTH_URLBuild Docker Image
docker build
--build-arg NEXT_PUBLIC_API_URL=<YOUR_PUBLIC_HOST>
--BUILD-ARG NEXTAUTH_URL=<YOUR_API_BACKEND>
-t <IMAGE_NAME_YOU_WANT> .Deployment
I will post about Nginx Load Balancer and docker-compose in next post soon.
