如何将 Docker 镜像大小从 1.43 GB 缩减到 22.4 MB

要阅读更多类似的文章，请访问我的博客

如果您从事 Web 开发工作，那么您可能已经了解容器化的概念以及它的优点等等。

但是使用Docker镜像时，大小是一个大问题。仅从create-react-app获得的样板项目，镜像大小通常就超过 1.43 GB。

今天，我们将容器化一个 ReactJS 应用程序，并学习一些关于如何减小图像大小并同时提高性能的技巧。

这些技巧将针对 ReactJS 进行展示，但它适用于任何 NodeJS 应用程序。

步骤 1.创建您的项目

• 只需转到您的终端并输入

npx create-react-app docker-image-test

• 然后create-react-app将为您提供基本的 React 应用程序

• 然后，进入根目录并运行项目。

cd docker-image-test
yarn install
yarn start

• 然后转到http://localhost:3000查看您的应用程序是否已启动并正在运行。

步骤 2. 构建您的第一个图像

• 在项目的根目录中，创建一个名为Dockerfile的文件并将以下代码粘贴到那里。

FROM node:12

WORKDIR /app

COPY package.json ./

RUN yarn install

COPY . .

EXPOSE 3000

CMD ["yarn", "start"]

• 请注意，我们正在从 Docker Hub 获取基础镜像节点：12，安装依赖项，并运行基本命令。（这里我们不会详细介绍 Docker 命令）

• 现在从您的终端为您的容器构建图像。

docker build -t docker-image-test .

• Docker 将构建你的镜像。完成后，你可以使用此命令查看你的镜像。

docker images

列表顶部是我们新创建的镜像，最右侧可以看到镜像的大小。目前大小为1.43GB 。

• 我们可以使用以下命令运行该图像

docker run --rm -it -p 3000:3000/tcp docker-image-test:latest

您可以转到浏览器并刷新页面以验证它是否仍在运行。

步骤3.更改基础镜像

• 在之前的配置中，我们使用了node:12作为基础镜像。但传统上，node 镜像是基于Ubuntu的，这对于我们这个简单的React应用程序来说，负担过重。

• 从 DockerHub（官方 Docker 镜像仓库）中我们可以看到，基于 Alpine 的镜像比基于 Ubuntu 的镜像小得多，并且只打包了最少的依赖项。

• 这些基础图像的大小比较如下所示。

• 现在我们将使用node:12-alpine作为我们的基础图像并观察会发生什么。

FROM node:12-alpine

WORKDIR /app

COPY package.json ./

RUN yarn install

COPY . .

EXPOSE 3000

CMD ["yarn", "start"]

• 然后我们构建图像并查看其大小，就像我们之前所做的那样。

哇！我们的镜像大小缩小到只有580MB。这是一个很大的进步。但我们还能做得更好吗？

步骤 4. 多阶段构建

• 在我们之前的配置中，我们将所有源代码复制到工作目录中。

• 但这是不必要的，因为我们只需要 build 文件夹来服务我们的网站。所以现在，我们将使用多阶段构建的概念来减少最终镜像中不必要的代码和依赖项。

• 配置看起来会像这样。

# 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 ./build

• 在第一阶段，我们安装依赖项并构建我们的项目

• 在第二阶段，我们复制上一阶段的构建文件夹的内容并使用它来为我们的应用程序提供服务。

• 这样，我们的最终图像中就没有不必要的依赖和代码。

接下来，我们构建图像并像以前一样从列表中查看图像

现在我们的镜像大小只有97.5MB。这多棒啊！

步骤 5.使用 NGINX

• 我们正在使用节点服务器来提供ReactJS应用程序的静态资产，这不是提供静态内容的最佳选择。

• 我们可以使用更高效、更轻量级的服务器（如**Nginx **）来服务我们的应用程序，看看它是否能提高我们的性能并减少尺寸。

• 我们的最终 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;"]

• 我们正在更改 docker 配置的第二阶段，以使用 Nginx 为我们的应用程序提供服务。

• 然后我们使用当前配置来构建我们的图像。

• 图像大小缩小至仅22.4MB！

• 同时，我们正在使用性能更强大的服务器来为我们出色的应用程序提供服务。

• 我们可以使用以下命令验证我们的应用程序是否仍在运行。

docker run --rm  -it -p 3000:80/tcp docker-image-test:latest

• 请注意，我们将容器的 80 端口暴露到外部，因为Nginx默认在容器内的 80 端口上可用。

以上这些简单的技巧可以应用到你的任何NodeJS项目中，大幅缩减镜像大小。现在你的容器真的更加轻便高效了。

今天就到这里。祝你编码愉快！

有话要说吗？

通过LinkedIn与我联系