Docker and Nuxt 3
Tags: nuxt3, docker, nuxt, webdev
Published: 2023-01-03 23:17:00

---
title: Docker and Nuxt 3
published: true
description: running your nuxt 3 project in a docker container
tags: nuxt3, docker, nuxt, webdev
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2023-01-03 23:17 +0000
---

Lets start by creating a Dockerfile in the root of the project 

`Dockerfile`
```Docker
# use node 16 alpine image
FROM node:16-alpine

# create work directory in app folder
WORKDIR /app

# install required packages for node image
RUN apk --no-cache add openssh g++ make python3 git

# copy over package.json files
COPY package.json /app/
COPY package-lock.json /app/

# install all depencies
RUN npm ci && npm cache clean --force

# copy over all files to the work directory
ADD . /app

# build the project
RUN npm run build

# expose the host and port 3000 to the server
ENV HOST 0.0.0.0
EXPOSE 3000

# run the build project with node
ENTRYPOINT ["node", ".output/server/index.mjs"]
```
now lets make a docker-compose file

`docker-compose.yml`
```yaml
version: "3"

services:
  nuxt-docker-example:
    container_name: nuxt-docker-example
    build:
      context: .
      dockerfile: DockerFile
    ports:
      - "3000:3000"
```

build the docker image

`docker compose up --build` you can add `-d` at the end to run it in the background

if everything went alright, open `localhost:3000` and we can see the project running.

### Docker image size

If we look over at the docker desktop and see the image size its over 850MB 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfmpo4j18hye0ess9r0v.png)

We can reduce the size of the image by adjusting the `Dockerfile` using multi-stage builds

### Docker multi stage

Multistage builds make use of one Dockerfile with multiple FROM instructions. Each of these FROM instructions is a new build stage that can COPY artifacts from the previous stages. By going and copying the build artifact from the build stage, you get rid of all the unnecessary packages and files. All these steps create additional layers, and you want to eliminate them from the final image. thus reducing the size of the final image


lets adjust the  dockerfile

```Dockerfile
# use node 16 alpine image as build image
FROM node:16-alpine as builder

# create work directory in app folder
WORKDIR /app

# install required packages for node image
RUN apk --no-cache add openssh g++ make python3 git

# copy over package.json files
COPY package.json /app/
COPY package-lock.json /app/

# install all depencies
RUN npm ci && npm cache clean --force

# copy over all files to the work directory
ADD . /app

# build the project
RUN npm run build

# start final image
FROM node:16-alpine


WORKDIR /app

# copy over build files from builder step
COPY --from=builder /app/.output  app/.output
COPY --from=builder /app/.nuxt  app/.nuxt

# expose the host and port 3000 to the server
ENV HOST 0.0.0.0
EXPOSE 3000

# run the build project with node
ENTRYPOINT ["node", ".output/server/index.mjs"]
```

the first line of code in the file changed to 

`FROM node:16-alpine as builder`

this tells docker that this stage is just for building our application

after `npm run build` command we added another FROM command
`FROM node:16-alpine` because this is a new stage we specified a `WORKDIR` again, then we copied over the files from the build stage to the final stage.

And that's it, the image size is now 364MB!  A big difference from the previous 886MB

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frjfg9z3le6761rtl10w.png)
)