Docker镜像的大小对系统的CI/CD有影响，尤其是在云部署场景下。我们在生产实践中会做瘦身操作，尽量用最小尺寸的图片来完成功能。下面是一个简单的ReactJS程序在线瘦身体验，希望能帮助大家找到镜像瘦身的方向和灵感。如果你是做web开发相关的工作，那么你可能已经知道容器化的概念，它的强大功能等等。但是在使用Docker时，图像大小很重要。我们从create-react-app(https://reactjs.org/docs/create-a-new-react-app.html)获得的样板项目通常超过1.43GB。今天，我们将容器化一个ReactJS应用程序，并学习一些关于如何减小图像大小和提高性能的技巧。我们将以ReactJS为例，但它适用于任何类型的NodeJS应用程序。第一步：创建项目1）借助脚手架，通过命令行方式创建一个React项目：npxcreate-react-appdocker-image-test2）命令执行成功后，一个基本的React应用架构如下产生。3)我们可以进入项目目录安装依赖，运行项目：cddocker-image-testyarninstallyarnstart4)可以通过访问http://localhost:3000访问启动的应用程序：Step2:Buildthefirstimage1)在项目根目录下创建一个名为Dockerfile的文件，粘贴如下代码：FROMnode:12WORKDIR/appCOPYpackage.json./RUNyarninstallCOPY。.EXPOSE3000CMD["yarn","start"]2)注意这里我们从Docker仓库获取基础镜像Node:12，然后安装依赖并运行基本命令。（这里不讨论Docker命令的细节）3）现在可以通过终端构建容器的镜像：dockerbuild-tdocker-image-test。4）Docker构建镜像完成后，可以使用这个命令查看构建好的镜像：dockerimages在查询结果列表的最上方是我们新建的镜像，在最右边我们可以看到大小图片。目前是1.43GB。5）我们用以下命令运行镜像：dockerrun--rm-it-p3000:3000/tcpdocker-image-test:latest打开浏览器刷新页面验证是否正常。第三步：修改基础镜像1）在之前的配置中，我们使用node:12作为基础镜像。但是传统的Node镜像是基于Ubuntu的，这对于我们简单的React应用来说是不必要的。2）从DockerHub（Docker官方镜像注册中心）可以看出，基于alpine的Node镜像比基于Ubuntu的镜像小很多，依赖性也非常低。3)这些基本图像的大小比较如下所示：现在我们将使用node:12-alpine作为我们的基本图像，看看会发生什么。FROMnode:12-alpineWORKDIR/appCOPYpackage.json./RUNyarninstallCOPY。.EXPOSE3000CMD["yarn","start"]然后我们用它来构建我们的镜像，并与之前的进行比较。哇！我们的图像大小已经减小到只有580MB，这是一个很大的改进。但是可以做得更好吗？第4步：多阶段构建1)在之前的配置中，我们会将所有源代码也复制到工作目录中。2）但这不是必须的，因为从发布和运行的角度来说，我们只需要搭建好运行目录即可。所以现在我们将介绍多阶段构建的概念，以减少不必要的代码和对我们最终图像的依赖。3）配置是这样的：#STAGE1FROMnode:12-alpineASbuildWORKDIR/appCOPYpackage.json./RUNyarninstallCOPY./appRUNyarnbuild#STAGE2FROMnode:12-alpineWORKDIR/appRUNnpminstall-gwebserver.localCOPY--from=build/app/build./buildEXPOSE3000CMDwebserver.local-d./build4)在第一阶段，我们安装依赖项并构建我们的项目。5）在第二阶段，我们复制上一阶段构建的产品目录，并用它来运行应用程序。6)这样我们就不会在最终图像中有不必要的依赖项和代码。接下来，构建镜像成功后，从列表中查看镜像：现在我们的镜像大小只有97.5MB。这简直太棒了。第五步：使用Nginx1)我们正在使用Node服务器来运行ReactJS应用程序的静态资源，但这并不是静态资源运行的最佳选择。2）我们尽量使用Nginx等更高效、更轻量级的服务器来运行资源应用，也可以尽可能提高它们的性能，减少镜像量。3)我们最终的Docker配置文件如下所示：#STAGE1FROMnode:12-alpineASbuildWORKDIR/appCOPYpackage.json./RUNyarninstallCOPY./appRUNyarnbuild#STAGE2FROMnginx:stable-alpineCOPY--from=build/app/build/usr/share/nginx/htmlEXPOSE80CMD["nginx","-g","daemonoff;"]4)我们正在更改Docker配置的第二阶段，以使用Nginx为我们的应用程序提供服务.5)然后使用当前配置构建镜像。6)图像大小减少到只有22.4MB！7)同时，我们正在使用性能更好的服务器来为我们出色的应用程序提供服务。8)我们可以使用以下命令验证应用程序是否仍在运行。dockerrun--rm-it-p3000:80/tcpdocker-image-test:latest9)注意我们对外暴露了容器的80端口，因为默认情况下，Nginx会在容器内部的80端口可用。因此，这些是您可以应用于任何NodeJS项目以显着减小图像大小的一些简单技巧。现在您的容器确实更加便携和高效。
