前端项目 Docker 镜像构建性能优化

嗨~大家好，最近对公司的前端工程 Docker 打包流程进行了一些优化，打包时间从一开始每次需要十多二十分钟到现在的一两分钟，取得了良好的效果，因此做一个简单的总结。

有什么用？

• 加快 Docker 镜像打包的速度
• 减少 Docker 镜像的体积
• 加快镜像上传速度

优化思路

• 项目的 npm 依赖很少会发生改变，因此只需要在 package.json 文件发生改变的时候执行 npm intall，其他时候都复用之前安装好的 node_module，不再重复安装；
• 我们只需要前端构建生成的静态文件，再用 Nginx 进行代理，因此最终的镜像中，除了这两者之外的模块应该能少则少。

优化分析

假设我们的前端工程构建命令是 npm run build，那么最终的 Dockerfile 长这样：

FROM node:12.15.0 AS builder
WORKDIR /home/node/app
ADD package.json package-lock.json /home/node/app/
RUN npm install
ADD . /home/node/app
RUN npm run build

FROM nginx:alpine
COPY default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /home/node/app/dist /usr/share/nginx/html
EXPOSE 8080

主要优化的地方有：

1. 将项目添加到 Docker 中分成了2步，首先只拷贝 package.json 和 package-lock.json，然后执行 npm install 装包，紧接着才是把整个工程的代码拷贝进去，这样做的好处是，当 package.json 和 package-lock.json 的内容没有发生变化的时候，第4步 npm install 将不会执行，这是因为对一个 Docker 镜像来说，Dockerfile 中的每一个步骤都是一个分层，从第一个步骤开始，只有当其中一个步骤的操作发生了变化，这之后的每一个分层才会重新生成，而之前的分层都会被复用，这个能从构建的过程输出中看到：

   Sending build context to Docker daemon     37MB
   Step 1/10 : FROM node:12.15.0 AS builder
    ---> b6f455933a97
   Step 2/10 : WORKDIR /home/node/app
    ---> Using cache
    ---> ab720696eb7b
   Step 3/10 : ADD package.json package-lock.json /home/node/app/
    ---> Using cache
    ---> 272488848fb7
   Step 4/10 : RUN npm install
    ---> Using cache
    ---> 60c57b0b15e9
   Step 5/10 : ADD . /home/node/app
    ---> 29ac75b71907
   Step 6/10 : RUN npm run build
    ---> Running in 4aa5cf14edbf
   

2. 整个打包流程用到了2个镜像，第一个 NodeJS 镜像只是用于前端项目的构建并生成静态文件，然后把这些静态文件放到了一个 nginx 的 alpine 镜像中，生成最后的镜像，这个镜像因为不需要 NodeJS 的环境，因此非常轻量，它只有3层，当我们把这个镜像上传到镜像仓库的时候，第二次开始每次就只需要上传最后一层，也就是前端的静态文件。实现这个操作的代码在第一行和倒数第二行，第一行中用 AS builder 声明了第一个镜像的别名为 builder，然后倒数第二行 COPY --from=builder 意思是从别名为 builder 的镜像中拷贝静态文件到 nginx 代理的目录。

其他

在编写 nginx 配置的时候也遇到一些问题，对于一个使用前端路由的 SPA 而言，除了资源文件外的所有子路径都需要重定向到 index.html，但是资源文件如果找不到的时候只能返回404，因为如果重定向到 index.html 会导致 CDN 使用 index.html 的缓存策略，然后会带来一些麻烦，因此也顺带附上我们的 nginx 配置：

server {
  listen 8080 default_server;
  listen [::]:8080 default_server;

  root /usr/share/nginx/html;

  index index.html;

  server_name localhost;

  location / {
    try_files $uri $uri/ @rewrites;
  }

  location @rewrites {
    rewrite ^(.+)$ /index.html last;
  }

  location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
    expires max;
    add_header Pragma public;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
  }
}