如何优雅地将Docker镜像从1.43G瘦身到22.4MB？
我要评论Docker镜像的何优大小对于系统的CI/CD等都有影响，尤其是雅地云部署场景。我们在生产实践中都会做瘦身的将Dr镜操作，尽最大的瘦身可能使用Size小的镜像完成功能。下文是何优一个简单的ReactJS程序上线的瘦身体验，希望可以帮助大家找到镜像瘦身的雅地方向和灵感。
如果你正在做Web开发相关工作，将Dr镜那么你可能已经知道容器化的瘦身概念，以及知道它强大的何优功能等等。
但在使用Docker时，雅地镜像大小至关重要。将Dr镜我们从create-react-app(https://reactjs.org/docs/create-a-new-react-app.html)获得的瘦身样板项目通常都超过1.43 GB。
今天，何优我们将容器化一个ReactJS应用程序，雅地并学习一些关于如何减少镜像大小并提高性能的将Dr镜技巧。
我们将以ReactJS为例，但它适用于任何类型的NodeJS应用程序。
步骤1：创建项目1)借助脚手架通过命令行模式创建React项目：
npx create-react-app docker-image-test2)命令执行成功后将生成一个基础React应用程序架构。
3)我们可以进入项目目录安装依赖并运行项目：
cd docker-image-test
yarn install
yarn start4)通过访问http://localhost:3000可以访问已经启动的IT技术网应用程序：
1)在项目的根目录中创建一个名为Dockerfile的文件，并粘贴以下代码：
FROM node:12
WORKDIR /app
COPY package.json ./
RUN yarn install
COPY . .
EXPOSE 3000
CMD ["yarn", "start"]2)注意，这里我们从Docker仓库获得基础镜像Node:12，然后安装依赖项并运行基本命令。(我们不会在这里讨论Docker命令的细节)
3)现在可以通过终端为容器构建镜像：
docker build -t docker-image-test .4)Docker构建镜像完成之后，你可以使用此命令查看已经构建的镜像：
docker images在查询结果列表的顶部，是我们新创建的图像，在最右边，我们可以看到图像的大小。目前是1.43GB。
5)我们使用以下命令运行镜像：
docker run --rm -it -p 3000:3000/tcp docker-image-test:latest打开浏览器并且刷新页面验证其可以正常运行。
步骤3：修改基础镜像1)先前的配置中我们用node:12作为基础镜像。但是传统的Node镜像是基于Ubuntu的，对于我们简单的React应用程序来说这大可不必。
2)从DockerHub(官方Docker镜像注册表)中我们可以看到，基于alpine-based的Node镜像比基于Ubuntu的镜像小得多，云服务器而且它们的依赖程度非常低。
3)下面显示了这些基本图像的大小比较：
现在我们将使用node:12-alpine作为我们的基础镜像，看看会发生什么。
FROM node:12-alpine
WORKDIR /app
COPY package.json ./
RUN yarn install
COPY . .
EXPOSE 3000
CMD ["yarn", "start"]然后我们以此构建我们的镜像，并与之前做对比。
哇!我们的镜像大小减少到只有580MB，这是一个很大的进步。但还能做得更好吗?
步骤4：多级构建1)在之前的配置中，我们会将所有源代码也复制到工作目录中。
2)但这大可不必，因为从发布和运行来看我们只需要构建好的运行目录即可。因此，现在我们将引入多级构建的概念，以减少不必要的代码和依赖于我们的最终镜像。
3)配置是这样的：
# STAGE 1
FROM node:12-alpine AS build
WORKDIR /app
COPY package.json ./
RUN yarn install
COPY . /app
RUN yarn build
# STAGE 2
FROM node:12-alpine
WORKDIR /app
RUN npm install -g webserver.local
COPY --from=build /app/build ./build
EXPOSE 3000
CMD webserver.local -d ./build4)在第一阶段，安装依赖项并构建我们的项目。
5)在第二阶段，我们复制上一阶段构建产物目录，站群服务器并使用它来运行应用程序。
6)这样我们在最终的镜像中就不会有不必要的依赖和代码。
接下来，构建镜像成功后并从列表中查看镜像：
现在我们的镜像大小只有97.5MB。这简直太棒了。
步骤5：使用Nginx1)我们正在使用Node服务器运行ReactJS应用程序的静态资源，但这不是静态资源运行的最佳选择。
2)我们尝试使用Nginx这类更高效、更轻量级的服务器来运行资源应用程序，也可以尽可能提高其性能，并且减少镜像的量。
3)我们最终的Docker配置文件看起来像这样：
# STAGE 1
FROM node:12-alpine AS build
WORKDIR /app
COPY package.json ./
RUN yarn install
COPY . /app
RUN yarn build
# STAGE 2
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]4)我们正在改变Docker配置的第二阶段，以使用Nginx来服务我们的应用程序。
5)然后使用当前配置构建镜像。
6)镜像大小减少到只有22.4MB!
7)同时，我们正在使用一个性能更好的服务器来服务我们出色的应用程序。
8)我们可以使用以下命令验证应用程序是否仍在工作。
docker run --rm -it -p 3000:80/tcp docker-image-test:latest9)注意，我们将容器的80端口暴露给外部，因为默认情况下，Nginx将在容器内部的80端口上可用。
所以这些是一些简单的技巧，你可以应用到你的任何NodeJS项目，以大幅减少镜像大小。
现在，您的容器确实更加便携和高效了。
相关文章
酒店电脑客房配置教程（为客房提供完善电脑设备，让客户享受便利与舒适）
摘要：在现代社会，人们对于在酒店入住期间的舒适度和便利性有着越来越高的期望。作为一个酒店业主或经理，提供一流的客房体验是至关重要的。而其中，电脑设备的配置对于满足客户的需求起着至关重要的...2025-11-05惠普便携打印机（便携、高效、卓越品质，打印随身携带从未如此简单）
摘要：在现代社会中，打印已经成为人们工作生活中不可或缺的一部分。然而，传统的打印机却往往笨重且难以携带，给人们的工作和生活带来了很多不便。为了解决这一问题，惠普公司推出了惠普便携打印机，...2025-11-05- 摘要：国富光启作为光电行业的重要企业，以科技创新为驱动力，不断引领着光电行业的发展。本文将从多个角度探讨国富光启的优势和创新举措，并展望其在未来的发展前景。1.光电行业现状与...2025-11-05
探秘腾达遥控器（了解腾达遥控器的特点与优势，让你的操控体验更加畅快）
摘要：在现代科技发展的时代，遥控器已经成为我们日常生活中不可或缺的一部分。而作为遥控器行业的领导者之一，腾达遥控器以其强大的功能和便捷的操作受到了广大用户的青睐。本文将深入探讨腾达遥控器...2025-11-05HTCOneMax拍照表现如何？（探索HTCOneMax相机的功能与性能）
摘要：HTCOneMax作为HTC旗下一款知名智能手机，其相机表现一直备受关注。本文将深入探讨HTCOneMax相机的功能与性能，从而帮助读者更好地了解和利用这一强大的拍摄工具。...2025-11-05Dell电脑安装XP系统教程（简易操作让您轻松安装XP系统）
摘要：随着WindowsXP系统的淘汰，许多用户选择将其替换为更先进的操作系统。然而，仍有一些用户或特定需求下需要在Dell电脑上安装XP系统。本文将为您提供一份简易操作的教程，让您轻松...2025-11-05
最新评论