If there are top ten buzzwords in the technology circle in 2019, containerization will definitely have a place. With the popularity of Docker, more and more scenarios are applied to Docker in the front-end field. This article mainly describes the open source distributed graph database Nebula Graph is The practical experience of how to apply Docker to the visual interface and optimize the 1.3G Docker image to 0.3G.
Why use Docker
For the daily development of the front-end, Docker is sometimes used, and the use of Docker in combination with Nebula Graph Studio (a graphical interface tool for the distributed graph database Nebula Graph) is mainly based on the following considerations:
- Unified operating environment : There are several services combined behind our tools, such as existing services of different technology stacks, and pure front-end static resources.
- Low cost for users : At present, the cloud service is still under development, so that users can directly start the application and use it locally with one key without feeling the service combination.
- Rapid deployment : The team already provided the Nebula mirror version practice, which gave us some reference and reference for the front end.
Docker image build
Since we want to use Docker to host our application, we have to image the project. Similar to all build images, a file named Dockerfile needs to be configured . The file is a description of some steps. In short, copy the project to the image and set the startup method:
# 选择基础镜像
FROM node:10
# 设置工作目录
WORKDIR /nebula-web-console
# 把当前项目内容拷贝到镜像中的 /nebula-web-console 目录下
ADD . /nebula-web-console
# 在镜像中下载前端依赖
RUN npm install
# 执行构建
RUN npm run build
EXPOSE 7001
# 镜像启动时执行的部署命令
CMD ["npm", "run", "docker-start"]
Docker image size optimization
If you build a Docker image according to the above configuration file, taking our project as an example, an image with a volume of about 1.3GB will be generated, which seems a bit scary, because even on a user's computer with a fast network, it is necessary to download the image. Waiting for a long time is unacceptable.
After investigating the corresponding information, I learned that the Docker image size can be reduced from the following aspects for optimization:
Selection of base image source
node:10 The so-called basic image source is a basic environment (as above ) that we choose when we are in the construction step. When we look at the basic environment image of Node.js on Dockerhub , we will find that there are multiple versions , although they are all Node.js. Related basic images, but different versions, in addition to the Node.js version, they have different internal integration environments , such as the version with alpine , which is equivalent to a relatively sophisticated Linux system image, in the container running in this version You will find that there are no tools that come with our regular system, such as bash, curl, etc., thereby reducing the size.
According to the actual needs of the project, when I changed the base image to the alpine version and built it again, the image size has been greatly reduced from 1.3GB to 500+MB. The volume optimization effect is obvious, so when you find yourself When the size of the built image is too large, you can consider replacing the basic image source to see if an overly bloated image source is used.
Multi-stage build image
The so- called multi-stage is the strategy adopted when the Docker image is built. For details, please click on the information provided by the link.
Docker build rules
In short, the rules provided by the Docker build are used: Dockerfile operations will add a "layer" of so-called images, each layer will increase the size of the image, by adopting a multi-step strategy, each step contains a series of operations with the same meaning ( For example, build, deploy), and the steps are referenced by the product image, thereby reducing the number of layers required for the final image construction. The specific operations are:
# 设置第一步骤产生的镜像，并命名为builder
FROM node:10-alpine as builder
WORKDIR /nebula-web-console
# 复制当前项目内容至镜像中
ADD . /nebula-web-console
# 进行相应的构建
RUN npm install
RUN npm run build
....
# 进行第二步骤构建
FROM node:10-alpine
WORKDIR /nebula-web-console
# 复制第一步构建镜像的产物内容至当前镜像，只用到了一层镜像层从而节约了之前构建步骤的镜像层数
COPY --from=builder . /nebula-web-console
CMD ["npm", "run", "docker-start"]
.dockerignore
Similar to what we are familiar with .gitignore , when we are performing COPYor ADDfile copying operations, we ignore unnecessary files (such as documentation files, git files, node_modules, and some non-essential files, etc.), thereby reducing the size of the image. More detailed content Please refer to the documentation link: .dockerignore .
operation merge
Based on the process of building an image in the Dockerfile mentioned above, each operation will add a "layer" to the previous image. You can use &to combine multiple operations and reduce the number of layers, such as:
# 以下两个操作分别代表两层
RUN npm install
RUN npm run build
Change it to:
# 使用 & 后变了为一层
RUN npm install && npm run build
Thereby we reduce the increase in the number of layers, that is, reduce the volume of the mirror image. At the same time, in the process of building an image, we can also reduce the addition of "layers" by minimizing unnecessary operations on the premise of achieving the same purpose.
Front-end routine volume optimization
- Compress and uglify code, remove source code This operation can be placed in the build step, which will further reduce the file size of the image.
- node_modules Download only the code required by the production environment. This operation can be placed in the deployment phase, and only download the third-party dependent code required by the production environment:
npm install --production. - Put public resources on CDN If the image is expected to run in a networked environment, you can consider putting some relatively large public files (images, third-party libraries, etc.) on the CDN server, and stripping out some resources will further reduce the size. .
- ...
The above is only a clue for reference. More conventional front-end optimization steps can be migrated to the mirror. After all, like our local development, mirror construction is also an environment for running code.
summary
The above are some of the methods I used to optimize the image size using Docker image to run our Nebula Studio . I hope to give some help and reference to those who need it. There may be some inaccurate understandings. Welcome to point out that the same You are welcome to try Nebula Graph Studio: https://github.com/vesoft-inc/nebula-web-docker
