Implementation of Docker deployment of Nuxt.js project

Docker official documentation: https://docs.docker.com/

Docker is an open source application container engine that allows developers to package their applications and dependencies into a portable image and then publish it to any popular Linux or Windows machine, and can also achieve virtualization. Containers use a complete sandbox mechanism and do not have any interfaces with each other.

Deploy nuxt.js project using docker

1. Build a node image

FROM node:alpine

Why use the alpine version?

Compared to other Docker images, its capacity is very small, only about 5 MB (compared to nearly 200 MB for Ubuntu series images), and it has a very friendly package management mechanism. The official image comes from the docker-alpine project. Currently, Docker officially recommends using Alpine to replace Ubuntu as the base image environment. This has several benefits. These include faster image download speeds, improved image security, easier switching between hosts, and less disk space usage.

2. Set the project save directory

RUN mkdir -p /app/src

3. Copy the project code to the image

COPY ./src /app/src

4. Specify the directory where the command is executed

WORKDIR /app/src

5. Set up the host

ENV HOST 0.0.0.0

6. Execute project installation and compilation

RUN npm install RUN npm run build RUN npm cache clean --force

7. Set external access port

EXPOSE 3000

8. Execute the nuxt project run command

CMD ["npm", "start"]

Complete Dockerfile

FROM node:alpine

RUN mkdir -p /app/src
COPY ./src /app/src
WORKDIR /app/src

ENV HOST "0.0.0.0"

RUN sed -i "s/dl-cdn.alpinelinux.org/${ALPINE_REPOSITORIES}/g" /etc/apk/repositories

RUN apk add --no-cache make gcc g++ python

RUN npm install
RUN npm run build
RUN npm cache clean --force

RUN apk del make gcc g++ python

EXPOSE 3000
CMD ["npm", "start"]

When using sass or scss in a project, you need to rely on the python environment, so you need to install python. Of course, after compiling the relevant resources, you can delete the corresponding dependencies to reduce the image size.

Run Docker

1. Build an image

docker build -t nuxt-demo

2. Start the container

docker run -dt -p 3000:3000 nuxt-demo

3. Access

Open your browser and access 127.0.0.1:3000

1. You can use Docker Compose to orchestrate containers and quickly deploy multi-container applications.
2. You can use nginx to proxy the container to avoid directly accessing the container in the form of a port.

This is the end of this article about the implementation of Docker deployment of Nuxt.js project. For more relevant Docker deployment of Nuxt.js content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!