visit
If there are top ten buzzwords in the technology industry in the year of 2019, container is sure to be one of them. With the popularity of Docker, more and more scenarios are using Docker in the front-end field. This article shows how do we use Docker in the visualization interface of Nebula Graph, a distributed open source graph database.
Docker is widely used in daily front-end development. (A visualization tool for Nebula Graph) uses Docker based on the following considerations:
# Select base image
FROM node:10
# Set work directory
WORKDIR /nebula-web-console
# Copy the current project to the /nebula-web-console directory of the image
ADD . /nebula-web-console
# Download front-end dependency in the image
RUN npm install
# Run the building
RUN npm run build
EXPOSE 7001
# Deployment commands executed when the image starts
CMD ["npm", "run", "docker-start"]
1. Using Smaller Base Image
Docker base image (for example, the above mentioned node:10) is the basic image on which you add layers and create a final image containing your applications. There are multiple versions of the Node.js image on , and each of them share a different internal environment. For example, the version is a more simplified Linux system image that removes some tools like bash, curl etc. to decrease size.
Based on our needs, we change the base image to and rebuild to reduce the docker image from 1.3GB to 500MB+. So if the docker image you are building is too large, you can replace the basic image.
2. Multi-stage Build
build in docker is a new feature introduced in docker 17.05. It is a method to reduce the image size, create a better organization of docker commands, and improve the performance while keeping the dockerfile easy to read and understand.3. Docker Building Principle
In short, multi-stage build is dividing the dockerfile into multiple stages to pass the required artifact from one stage to another and eventually deliver the final artifact in the last stage. This way, our final image won’t have any unnecessary content except our required artifact. Let’s consider an example:# Set up the image generated in the first step and name it builder
FROM node:10-alpine as builder
WORKDIR /nebula-web-console
# Copy the current project to the image
ADD . /nebula-web-console
# Start building
RUN npm install
RUN npm run build
....
# Start the second step build
FROM node:10-alpine
WORKDIR /nebula-web-console
# Copy the product of the first step image to the current image. Only one image layer is used here, which saves the number of image layers in the previous building step.
COPY --from=builder . /nebula-web-console
CMD ["npm", "run", "docker-start"]
4. .dockerignore
Similar to the well known .gitignore that ignores unnecessary (such as document files, git files, node_modules, etc) files when using COPY or ADD command to copy or add files, we can use to specify files to be ignored.5. Merging Multiple Layers Into One
When building a Docker image with a Dockerfile, each operation adds a new layer based on the previous step image. We can use & to merge multiple operations to reduce layers. For example:# The two operations represent two layers
RUN npm install
RUN npm run build
# It becomes a single layer with &
RUN npm install && npm run build
6. Regular Front-End Optimization
npm install --production
Also published .