成品网站 免费,网站广告轮播代码,山东潍坊新闻,平面设计培训网Docker 镜像的大小对于系统的 CI/CD 等都有影响#xff0c;尤其是云部署场景。我们在生产实践中都会做瘦身的操作#xff0c;尽最大的可能使用 Size 小的镜像完成功能。下文是一个简单的 ReactJS 程序上线的瘦身体验#xff0c;希望可以帮助大家找到镜像瘦身的方向和灵感。 …Docker 镜像的大小对于系统的 CI/CD 等都有影响尤其是云部署场景。我们在生产实践中都会做瘦身的操作尽最大的可能使用 Size 小的镜像完成功能。下文是一个简单的 ReactJS 程序上线的瘦身体验希望可以帮助大家找到镜像瘦身的方向和灵感。
如果你正在做Web开发相关工作那么你可能已经知道容器化的概念以及知道它强大的功能等等。
但在使用Docker时镜像大小至关重要。我们从create-react-apphttps://reactjs.org/docs/create-a-new-react-app.html获得的样板项目通常都超过1.43 GB。
今天我们将容器化一个 ReactJS 应用程序并学习一些关于如何减少镜像大小并提高性能的技巧。
我们将以 ReactJS 为例但它适用于任何类型的 NodeJS 应用程序。
1步骤1创建项目
1、借助脚手架通过命令行模式创建 React 项目
$ npx create-react-app docker-image-test2、命令执行成功后将生成一个基础 React 应用程序架构
3、我们可以进入项目目录安装依赖并运行项目
$ cd docker-image-test
$ yarn install
$ yarn start4、通过访问 http://localhost:3000 可以访问已经启动的应用程序 2步骤2构建第一个镜像
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步骤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步骤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 --frombuild /app/build ./build
EXPOSE 3000
CMD webserver.local -d ./build4、在第一阶段安装依赖项并构建我们的项目
5、在第二阶段我们复制上一阶段构建产物目录并使用它来运行应用程序。
6、这样我们在最终的镜像中就不会有不必要的依赖和代码。
接下来构建镜像成功后并从列表中查看镜像 现在我们的镜像大小只有 97.5MB。这简直太棒了。
5步骤5使用Nginx
1、我们正在使用 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 --frombuild /app/build /usr/share/nginx/html
EXPOSE 80
CMD \[nginx, -g, daemon off;\]
4、我们正在改变 Docker 配置的第二阶段以使用 Nginx 来服务我们的应用程序。
5、然后使用当前配置构建镜像。 6、镜像大小减少到只有 22.4 MB
7、同时我们正在使用一个性能更好的服务器来服务我们出色的应用程序。
8、我们可以使用以下命令验证应用程序是否仍在工作。
$ docker run --rm -it -p 3000:80/tcp docker-image-test:latest9、注意我们将容器的 80 端口暴露给外部因为默认情况下Nginx 将在容器内部的 80端口上可用。
所以这些是一些简单的技巧你可以应用到你的任何 NodeJS 项目以大幅减少镜像大小。
现在您的容器确实更加便携和高效了。
