如何优雅的将 Docker 镜像从 1.43G 瘦身到 22.4MB

Docker 镜像的大小对于系统的 CI/CD 等都有影响，尤其是云部署场景。在生产实践中都会做瘦身的操作，尽最大的可能使用 Size 小的镜像完成功能。下文是一个简单的 ReactJS 程序上线的瘦身体验，希望可以帮助大家找到镜像瘦身的方向和灵感。

如果正在做Web开发相关工作，那么你可能已经知道容器化的概念，以及知道它强大的功能等等。

但在使用Docker时，镜像大小至关重要。从create-react-app（https://reactjs.org/docs/create-a-new-react-app.html）获得的样板项目通常都超过1.43 GB。

将容器化一个 ReactJS 应用程序，并学习一些关于如何减少镜像大小并提高性能的技巧。

以 ReactJS 为例，但它适用于任何类型的 NodeJS 应用程序。

步骤1：创建项目

$ npx create-react-app docker-image-test

$ cd docker-image-test  
$ yarn install  
$ yarn start

步骤2：构建第一个镜像

FROM node:12  
WORKDIR /app  
COPY package.json ./  
RUN yarn install  
COPY . .  
EXPOSE 3000  
CMD \["yarn", "start"\]

$ docker build -t docker-image-test .

$ docker images

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

步骤3：修改基础镜像

FROM node:12-alpine  
WORKDIR /app  
COPY package.json ./  
RUN yarn install  
COPY . .  
EXPOSE 3000  
CMD \["yarn", "start"\]

步骤4：多级构建

# 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

步骤5：使用Nginx

# 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 run --rm  -it -p 3000:80/tcp docker-image-test:latest