Document production Docker setup

[msmsimondean]

Is your feature request related to a problem? Please describe.

It's difficult to find an example of how to deploy a nuxt.js app as a Docker container. It would be great if there was official documentation for this.

It might be worth highlighting in the documentation that hosting a nuxt.js app as a Docker container might not always be an ideal solution. E.g. Blue/Green deployments can lead to blank pages during deployments. Combining a Docker container with assets on a CDN can be a good solution.

Additional context

Here's the Dockerfile I'm using:

FROM library/node:12.19.1

ENV APP_DIR=/opt/app
ENV PORT=3000
ARG VERSION
ENV VERSION=$VERSION

RUN mkdir -p $APP_DIR
WORKDIR $APP_DIR
COPY . $APP_DIR
RUN npm install
RUN npm run build

EXPOSE $PORT

HEALTHCHECK --interval=60s --timeout=15s \
  CMD curl --fail "http://localhost:$PORT" || exit 1

ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=$PORT

CMD ["npm", "start"]

Suggestions for improvements welcome

[pi0]

Hi. Actually there is a good example here: https://github.com/nuxt/nuxt.js/blob/dev/examples/docker-build/Dockerfile

Still some parts like package manager are dependent on deployment/project requirements.

Moving this issue to docs but still worth documenting there.

[atinux]

Would love to get some help regarding how to deploy using Docker 😊

[math280h]

We currently deploy applications using docker-compose where we use both nginx as a proxy and a node server. I've added some examples of what we do below, however I've had to remove some information for privacy purposes.

Production

Folder Structure

• docker-compose.yml
• docker
  • nginx
    • templates
      • default.conf.template
  • Dockerfile
  • entrypoint.sh

docker-compose.yml

version: '3.8'

networks:
  nuxt:

services:
  nginx:
    image: nginx:1.19.10
    container_name: nginx
    networks:
      - nuxt
    depends_on:
      - node
    ports:
    - "80:80"
    - "443:443"
    volumes:
      - ./docker/nginx/templates:/etc/nginx/templates
  node:
    image: {We use this to store the docker image in our own docker reg using docker-compose push}
    build:
      context: ./
      dockerfile: docker/Dockerfile
      target: node
    container_name: node
    networks:
      - nuxt
    volumes:
      - ./static/data/:/app/static/data

Dockerfile

FROM node:14.16.0 as node

WORKDIR /app/

# Copy application
COPY assets assets
COPY components components
COPY layouts layouts
COPY pages pages
COPY static static
COPY tests tests
COPY modules modules
COPY plugins plugins
COPY utils utils
COPY .eslintrc.json .eslintrc.json
COPY jest.config.js jest.config.js
COPY nuxt.config.js nuxt.config.js
COPY tailwind.config.js tailwind.config.js
COPY package.json package.json
COPY yarn.lock yarn.lock

# Install Node Deps + Build Nuxt
RUN yarn
RUN yarn build

# Entrypoint
COPY docker/entrypoint.sh /usr/local/bin/docker-entrypoint.sh
RUN chmod +x /usr/local/bin/docker-entrypoint.sh
ENTRYPOINT ["docker-entrypoint.sh"]

We use an ENTRYPOINT file instead of directly just writing RUN yarn run directly in the dockerfile since that would cause the nginx container to wait forever on the node container to be done. - ENTRYPOINT files run whenever the actual container is started.
entrypoint.sh

#!/bin/bash
set -e

yarn start

default.conf.template (NGINX Default Config Template) - Notice in the proxy_pass parameter we directly just reference the name of our node container.

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    default                     off;
}

server {
    listen          80;
    server_name     _;

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    location / {
        expires $expires;

        proxy_redirect                      off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://node:3000;
    }
}

CI/CD

For our CI/CD pipeline we modify it a bit since we don't want docker to use the entrypoint file and we don't need it to spin up an nginx proxy for unit testing. For that we use the following simple script to build for testing.

Building

#!/bin/bash

cp docker/Dockerfile ./Dockerfile
head -n -4 Dockerfile > tmpDockerfile
mv tmpDockerfile Dockerfile

docker build -t nuxt_test .

rm ./Dockerfile

Starting the container

docker run -d --name nuxt_test_container -it nuxt_test

Executing Tests*

docker exec nuxt_test_container yarn test

Hope that gives a bit of insight @atinux

[danielroe]

Let's track in unjs/nitro#54.