Dockerfile Templates for Node.js Frameworks

This guide helps you create suitable Dockerfiles for Node.js-based projects. We provide templates for popular frameworks such as Vue.js, React.js, Next.js, and Nuxt.js.

Key Points for All Dockerfiles

1. Use official Node.js images
2. Create a non-root user for enhanced security
3. Use environment variables for greater flexibility
4. Optimize for each specific framework

NextJS

FROM node:$node_version

ARG UID=1000
ARG GID=1000

ENV PORT=3000
ENV HOSTNAME=0.0.0.0

RUN groupadd -g $GID -o app && \
useradd -g $GID -u $UID -mr -d /home/app -o -s /bin/bash app

USER app
WORKDIR /home/app
COPY --chown=app:app app/ /home/app/

RUN npm install
CMD [ "npx", "next", "start", "--hostname", "0.0.0.0", "-p", "$PORT" ]

info

• This Dockerfile uses a single stage for Next.js, as Next.js requires Node.js at runtime.
• The command npx next start is used to run the application.

caution

• Make sure to replace $node_version with the appropriate Node.js version.
• Set the PORT variable, which can be replaced in the advanced settings or project dashboard in the PaaS.

NuxtJS

FROM node:$node_version

ARG UID=1000
ARG GID=1000

ENV PORT=3000
ENV HOSTNAME=0.0.0.0

RUN groupadd -g $GID -o app && \
useradd -g $GID -u $UID -mr -d /home/app -o -s /bin/bash

USER app
WORKDIR /home/app
COPY --chown=app:app app/ /home/app/

RUN npm install

# RUN generate
# CMD [ "HOSTNAME=0.0.0.0", "PORT=$PORT", "npm", "run", "start" ]
#or
# RUN npm run build
# CMD [ "node", ".output/server/index.mjs" ]

info

• This Dockerfile is designed for Nuxt.js and is very similar to the Next.js version.
• Two options for execution are provided: using npm run start or directly executing the server output file.
• Set the PORT variable, which can be replaced in the advanced settings or project dashboard in the PaaS.

caution

• Replace $node_version with the appropriate Node.js version.
• Depending on the project needs, choose one of the two CMD options and uncomment it.
• If using static mode, uncomment the RUN generate command.

ReactJS

FROM node:$node_version as build

ARG UID=1000
ARG GID=1000
RUN groupadd -g $GID -o app && \
useradd -g $GID -u $UID -mr -d /home/app -o -s /bin/bash app

USER app
WORKDIR /home/app
COPY --chown=app:app app/ /home/app/

RUN npm install
#CMD [ "npm", "run", "build" ] or CMD [ "npm", "run", "start" ]


FROM nginx:$nginx_version as production

COPY --from=build /home/app/build/ /usr/share/nginx/html/

RUN echo 'server {\n\
listen 3000;\n\
server_name _;\n\
location / {\n\
root /usr/share/nginx/html;\n\
try_files $uri $uri/ /index.html;\n\
}\n\
location /index.html {\n\
root /usr/share/nginx/html;\n\
expires 0d;\n\
}\n\
}' > /etc/nginx/conf.d/default.conf

info

• The structure of this Dockerfile is very similar to the Vue.js version.
• The main difference is in the build output path: React uses /home/app/build.
• The Nginx configuration is similar, optimized for SPA applications.

caution

• Ensure that you replace $node_version and $nginx_version with the appropriate versions.
• Note that the React build output path (/home/app/build) is different from Vue.js.

VueJS

FROM node:$node_version as build

ARG UID=1000
ARG GID=1000
RUN groupadd -g $GID -o app && \
useradd -g $GID -u $UID -mr -d /home/app -o -s /bin/bash app

USER app
WORKDIR /home/app
COPY --chown=app:app app/ /home/app/

RUN npm install
#CMD [ "npm", "run", "build" ] or CMD [ "npm", "run", "start" ]

FROM nginx:$nginx_version as production

COPY --from=build /home/app/dist/ /usr/share/nginx/html/

RUN echo 'server {\n\
listen 3000;\n\
server_name _;\n\
location / {\n\
root /usr/share/nginx/html;\n\
try_files $uri $uri/ /index.html;\n\
}\n\
location /index.html {\n\
root /usr/share/nginx/html;\n\
expires 0d;\n\
}\n\
}' > /etc/nginx/conf.d/default.conf

info

• This Dockerfile uses a multi-stage structure: build stage and production stage.
• In the build stage, we compile the Vue.js project.
• In the production stage, the built files are transferred to an Nginx server.
• The Nginx configuration is set up for the proper execution of the Vue.js application (SPA).

caution

• Replace the $node_version variable with the desired Node.js version.
• Replace the $nginx_version variable with the desired Nginx version.
• Depending on the project needs, you can choose between npm run build and npm run start.

Building and Running the Dockerfile

To build the Dockerfile and create an image, use the command:

docker build -t [ProjectName] .

• -t: Assign a specific tag and name for the project

Then, to run it:

docker run -p outport:inport[3000] --name=container-name -d [ProjectName]

• -p: Specify the port for running the project
• outport: External port
• inport: Internal port of the project specified in the Dockerfile
• --name: Specify the container name
• -d: Run the container in detached mode

caution

1. Security: Always use the latest stable versions of Node.js and Nginx.
2. Testing: Before deploying to production, make sure to test your Docker image in a production-like environment.