Static site generation with Nuxt2 + Nginx + Docker

Hello there!

In this article, we will guide you through building and launching a basic Nuxt.js 2 project with a static target. We will also show you how to host the project using an Nginx server. Follow along for a straightforward tutorial on getting your Nuxt.js project up and running.

We have two simple pages in the pages directory: index.vue and description.vue.

index page:

<template>
  <div>
    this page is index page
    <NuxtLink to="/description">
      go to description
    </NuxtLink>
  </div>
</template>

description page

<template>
  <div>
    this page is description page
    <NuxtLink to="/">
      go to index
    </NuxtLink>
  </div>
</template>

your nuxt.config.js file will resemble the following:

export default {
  target: 'static',
  
  // app other configs
}

By selecting this option, you can configure your Nuxt application to statically render, allowing you to enjoy the advantages of a universal app without the need for a server.

Now it’s time to dive into our Dockerfile (app.dockerfile).

FROM node as builder

WORKDIR /app/
COPY . .
RUN yarn install
RUN yarn generate

FROM nginx

COPY ./default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/dist /usr/share/nginx/html/

In our Dockerfile, we utilize multiple FROM arguments. The first one generates our website by building static files for hosting. The subsequent argument sets up our nginx server, configuring the root site using the default.conf file and copying the generated results from the builder image. It’s worth mentioning that the output of nuxt generate is placed in the dist directory.

As mentioned earlier, the content of default.conf looks like this.

server {
    listen 80;

    location / {
        charset utf-8;
        root /usr/share/nginx/html;
    }
}

Afterwards, we will build our image using this command:

docker build --tag nuxt2-static -f app.dockerfile .

It’s time to run our image as a container.

docker run -p 5050:80 nuxt2-static

Now let’s open it in our browser:

Well it has worked successfully! hope you enjoy!