Docker image optimization (from 1.16GB to 22.4MB)

Docker is a platform for software developers and system administrators to build, run, and share applications using containers. A container is a process that runs in an isolated environment, on its own file system, which is built using a Docker image. An image contains everything needed to run your application (compiled code, dependencies, libraries, etc.). Images are defined using Dockerfile files.

The terms dockerization or containerization are often used to define the process of creating a Docker container.

Containers are popular because they have the following advantages:

• Flexibility: Even the most complex applications can be containerized.
• Lightweight: Containers share the host kernel, making them far more efficient than virtual machines.
• Portability: Can be compiled locally and run anywhere.
• Loose coupling: Containers are self-encapsulated, and replacing or upgrading one container will not interrupt other containers.
• Security: Containers strictly restrict and isolate processes without requiring any configuration by the user.

In this article, I will focus on how to optimize Docker images to make them lightweight.

Let's start with an example where we build a React application and containerize it. After running the npx command and creating the Dockerfile, we get the file structure shown in Figure 1.

npx create-react-app app --template typescript 

Figure 1: File structure

If we build a basic Dockerfile (shown below), we end up with a 1.16 GB image:

FROM node:10
WORKDIR /appCOPY app /appRUN npm install -g webserver.localRUN npm install && npm run build
EXPOSE 3000CMD webserver.local -d ./build 

Figure 2: The initial size of the image is 1.16GB

The first step of optimization: using a lightweight base image

In Docker Hub (a public Docker repository), there are several images available for download, each with different characteristics and sizes.

Typically, images based on Alpine or BusyBox are very small compared to images based on other Linux distributions (such as Ubuntu). This is because Alpine images and similar images are optimized to include only the minimum necessary packages. In the image below, you can see a size comparison between Ubuntu, Alpine, Node, and the Alpine-based Node image.

Figure 3: Different sizes of base images

By modifying the Dockerfile and using Alpine as the base image, our image ends up being 330MB in size:

FROM node:10-alpine
WORKDIR /appCOPY app /appRUN npm install -g webserver.localRUN npm install && npm run build
EXPOSE 3000CMD webserver.local -d ./build 

Figure 4: After the first step of optimization, the image size is 330MB

Second step optimization: multi-stage construction

With multi-stage builds, we can use multiple base images in our Dockerfile and copy compiled products, configuration files, etc. from one stage to another, so we can discard what we don’t need.

In this case, we need the compiled code to deploy the React application. We don't need the source files, node_modules directory, package.json file, etc. Follow the public account Nifengqibi, reply pdf, and download all the learning materials you need.

By modifying the Dockerfile to the following content, we finally get an image size of 91.5MB. Remember that the image from the first stage (lines 1-4) is not automatically deleted, Docker keeps it in cache, which can make the image build faster if we execute the same stage in another image build process. So you have to delete the first stage image manually.​​​​​​​​

FROM node:10-alpine AS buildWORKDIR /appCOPY app /appRUN npm install && npm run build
FROM node:10-alpineWORKDIR /appRUN npm install -g webserver.localCOPY --from=build /app/build ./buildEXPOSE 3000CMD webserver.local -d ./build 

Figure 5: The image size after the second step of optimization is 91.5MB

Now we have a Dockerfile with two stages: in the first stage, we compile the project, and in the second stage, we deploy the application on the web server. However, Node containers are not the best choice for serving web pages (HTML, CSS and JavaScript files, images, etc.), the best option is to use a service like Nginx or Apache. In this example, I will use Nginx.

By modifying the Dockerfile to the following, our image will end up being 22.4MB in size. If we run this container, we can see that the web page works fine without any issues (Figure 7)

FROM node:10-alpine AS buildWORKDIR /appCOPY app /appRUN npm install && npm run build

FROM nginx:stable-alpineCOPY --from=build /app/build /usr/share/nginx/htmlEXPOSE 80CMD ["nginx", "-g", "daemon off;"] 

Figure 6: The image size after the third step of optimization is 22.4MB

Figure 7: Final container running result

This is the end of this article about Docker image optimization (from 1.16GB to 22.4MB). For more relevant Docker image optimization content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!