嗨~大家好，最近对公司的前端工程 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
主要优化的地方有：
-
将项目添加到 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个镜像，第一个 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";
}
}
