减少响应静态应用程序的构建时间

Question

我试图减少建立一个对接图像的反应应用程序所需的时间，反应应该是静态的，没有服务器呈现。

现在创建一个图像大约需要5-10分钟，本地机器上的图像大小大约为1.5GB！问题是，在第二次创建图像之后，即使我在代码中更改了smth，它也不使用任何缓存，我正在寻找一个解决方案来减少大小的时间，下面是经过大量更改后的停靠文件

# Producation and dev build 

FROM node:14.2.0-alpine3.10 AS test1
RUN apk update
RUN apk add \
        build-base \
        libtool \
        autoconf \
        automake \
        jq \
        openssh \
        libexecinfo-dev


ADD package.json package-lock.json /app/

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./
COPY package-lock.json ./

ADD . /app/

RUN rm -rf node_modules

RUN npm install --production

# copy production node_modules aside, to prevent collecting them
RUN cp -R node_modules prod_node_modules

# install ALL node_modules, including 'devDependencies'
RUN npm install
RUN npm install react-scripts@3.4.1 -g --silent
RUN npm run build

RUN rm -rf node_modules
RUN cp -R prod_node_modules node_modules
 
#FROM node:13.14.0
FROM test1

# copy app sources
COPY --from=test1 /app/build .
COPY --from=test1 /app/env-config.js .

# serve is what we use to run the web application
RUN npm install -g serve
# remove the sources & other needless stuff
RUN rm -rf ./src
RUN rm -rf ./prod_node_modules

# Add bash
RUN apk add --no-cache bash

CMD ["/bin/bash", "-c", "serve -s build"]

Answer 1

这里有两种基本的动力。首先，您的映像包含相当多的构建时内容，至少包括C工具链的某些部分；因为运行时“阶段”是按原样构建的FROM，所以它带来了所有的构建工具链。第二个问题是，每个RUN命令都生成一个与前一层不同的新的Docker层，因此RUN命令只会使容器更大。更具体地说，RUN rm -rf ...使图像稍微变大，不会节省空间。

您可以使用多级建造来改进这一点。每一行FROM都会使docker build从某个指定的基本映像重新开始，您可以对以前的构建阶段进行COPY --from=...。我会分两个阶段完成，第一阶段构建应用程序，第二阶段运行应用程序。

# Build stage:
FROM node:14.2.0-alpine3.10 AS build

# Install OS-level dependencies (including C toolchain)
RUN apk update \
 && apk add \
        build-base \
        libtool \
        autoconf \
        automake \
        jq \
        openssh \
        libexecinfo-dev

# set working directory
WORKDIR /app

# install app dependencies
# (copy _just_ the package.json here so Docker layer caching works)
COPY package.json package-lock.json ./
RUN npm install

# build the application
COPY . ./
RUN npm run build

# Final stage:
FROM node:14.2.0-alpine3.10

# set working directory
WORKDIR /app

# install dependencies
COPY package.json package-lock.json ./
RUN npm install --production

# get the build tree
COPY --from=build /app/build/ ./build/

# explain how to run the application
ENTRYPOINT ["npx"]
CMD ["serve", "-g", "build"]

注意，当我们进入第二阶段时，我们在一个干净的节点安装上运行npm install --production；我们不尝试在dev和prod依赖项之间来回切换。与其尝试RUN rm -rf src，我们只是不把它放到最后的图像中。

这还需要确保您有一个包含.dockerignore的node_modules文件(这将减少构建时间并避免一些潜在冲突；RUN npm install将在目录中重新创建它)。如果您需要react-scripts或serve，则应该在package.json文件中列出这些内容。