Creating dockerized NextJS Application

Resources:

• Create NextJS docker container

Table of content:

• Create NextJS app
• Dockerize NextJS app
• Deploy dockerized app to AWS EB - next part
• Add custom domain - part 3
• Set up redirects - part 4

Hello everyone.

I assume that you already have Docker, NodeJS and YARN installed.

Create NextJS app

To create a new Nextjs app execute yarn create next-app app-name or you can pick an example app from there and create a new app with supplied command.

I'm going to pick blog starter example.
In the How to use section copy command

yarn create next-app --example blog-starter-typescript blog-starter-typescript-app

paste it in your terminal and hit enter.

Dockerize NextJS app

Open this awesome post and copy the final version of docker configuration.

Inside the root folder of your project (where package.json file is) create a new file named Dockerfile, paste copied configuration into it.

We need to tweak it a little (otherwise AWS will complain - try out yourself without deleting if you're curious):

1. delete image aliases (AS %alias_name% part of FROM statement)
2. replace used aliases with image indices (--from=deps becomes --from=0 and --from=BUILD_IMAGE becomes --from=1)

Our final Dockerfile:

# dependencies image
FROM node:14-alpine
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# build image
FROM node:14-alpine
WORKDIR /app
COPY --from=0 /app/node_modules ./node_modules
COPY . .
RUN yarn build
RUN rm -rf node_modules
RUN yarn install --production --frozen-lockfile --ignore-scripts --prefer-offline

# build output image
FROM node:14-alpine

ENV NODE_ENV production

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
WORKDIR /app
COPY --from=1 --chown=nextjs:nodejs /app/package.json /app/yarn.lock ./
COPY --from=1 --chown=nextjs:nodejs /app/node_modules ./node_modules
COPY --from=1 --chown=nextjs:nodejs /app/public ./public
COPY --from=1 --chown=nextjs:nodejs /app/.next ./.next

USER nextjs

EXPOSE 3000

CMD [ "yarn", "start" ]

Also create .dockerignore file near Dockerfile and insert two directory names into it:

node_modules
.next

To make sure it works run the following commands:

• docker build -t example-nextjs-app . - builds our image
• docker run -p 3000:3000 example-nextjs-app - runs our image

Now open localhost:3000 in your browser - you should see your app up and running. Yay =)

To stop docker image either kill (close) the terminal or stop the image:

1. execute command docker ps
2. copy container id
3. execute command docker stop container id

In the next part we are going to deploy our application to AWS Elastic Beanstalk. Hope to see you in the =)

Thanks for reading.