Deploying a Nuxt.js App with Docker

Let's check out how you can deploy your Nuxt.js app, including server side rendering, with Docker. You can also view this post as a video:

The versions at the time of writing are:

• nuxt: 2.6
• Docker 18.09.3

Nuxt.js installation

For this tutorial I'll create a new nuxt app

npx create-nuxt-app my_app

Hitting ENTER will work for us, but you can customise your app as you wish.

? Project name my_app
? Project description My shining Nuxt.js project
? Use a custom server framework none
? Choose features to install Prettier, Axios
? Use a custom UI framework none
? Use a custom test framework none
? Choose rendering mode Universal
? Author name Jonathan M. Hethey
? Choose a package manager npm

  To get started:

    cd my_app
    npm run dev

  To build & start for production:

    cd my_app
    npm run build
    npm start

Now let's verify that our app works with:

cd my_app
npm run dev

If we access http://localhost:3000 now we should see:

Which is exactly like it should be.

Nuxt.js Dockerfile

Next, we're going to write the Dockerfile for your Nuxt.js app.

FROM node:11.13.0-alpine

# create destination directory
RUN mkdir -p /usr/src/nuxt-app
WORKDIR /usr/src/nuxt-app

# update and install dependency
RUN apk update && apk upgrade
RUN apk add git

# copy the app, note .dockerignore
COPY . /usr/src/nuxt-app/
RUN npm install

# build necessary, even if no static files are needed,
# since it builds the server as well
RUN npm run build

# expose 5000 on container
EXPOSE 5000

# set app serving to permissive / assigned
ENV NUXT_HOST=0.0.0.0
# set app port
ENV NUXT_PORT=5000

# start the app
CMD [ "npm", "start" ]

This Dockerfile is based on the node alpine Linux image and then moves on to install git, the npm dependencies and finally builds and starts the Nuxt project.

Note that the NUXT_HOST and NUXT_PORT are set to Bind to any IP at port 5000, this might change depending on how you deploy your docker container.

My .dockerignore file contains the following to prevent using my local dependencies and builds:

node_modules
npm-debug*
.nuxt

Building your docker container can be done with, while in the repository with the Dockerfile present:

docker build -t my_app .

The output should be something along the lines of:

Removing intermediate container 7e9f607fb06e
 ---> c5b57739f412
Step 9/12 : EXPOSE 5000
 ---> Running in a326b4f25052
Removing intermediate container a326b4f25052
 ---> 796e335481fb
Step 10/12 : ENV NUXT_HOST=0.0.0.0
 ---> Running in 9aa3b799df0b
Removing intermediate container 9aa3b799df0b
 ---> 12f905ccb574
Step 11/12 : ENV NUXT_PORT=5000
 ---> Running in d9e9e111a32c
Removing intermediate container d9e9e111a32c
 ---> 0eab950732ab
Step 12/12 : CMD [ "npm", "start" ]
 ---> Running in 211496606e04
Removing intermediate container 211496606e04
 ---> 54779de7e817
Successfully built 54779de7e817
Successfully tagged my_app:latest

Next, to run the container:

docker run -it -p 5000:5000 my_app```

<p>Which should show this or similar:</p>

╭────────────────────────────────────────────╮ │ │ │ Nuxt.js v2.6.1 │ │ Running in production mode (universal) │ │ Memory usage: 20.8 MB (RSS: 54.9 MB) │ │ │ │ Listening on: http://172.17.0.2:5000 │ │ │ ╰────────────────────────────────────────────╯

<p>and also display the app again when accessing the stated listening URL.</p>

<h2 id="summary">Summary</h2>

<p>Setting Nuxt.js up with a Dockerfile couldn't be much easier than it is already, so you know you have a reliable way of distributing your app after writing it.</p>

<p>I'm still new to <a href="https://nuxtjs.org/">Nuxt.js</a>, but I suggest you give it a shot, since it's amazing.</p>