软件技术学习笔记

使用Docker构建前端工程时，按照常规方法从node:tls镜像开始下载依赖包，构建的大部分时间都耗在npm依赖包下载了。为了提高前端的构建速度，我们可以把工程的依赖包先缓存到镜像中，再构建工程时就不需要从远程下载。因yarn可以锁定依赖包的版本，我们使用yarn代替npm工具，避免npm工具每次下载底层依赖包的版本可能不同。

本文代码: https://github.com/kinsprite/react-my-app-ts

常规Dockerfile构建速度慢

从干净的node:tls镜像开始构建，yarn下载的依赖包都是从远程下载。完成构建之后，再使用nginx提供微服务。expires.conf主要功能是禁用入口文件index.html的Cache-Control，其他文件使用长期缓存策略。常规的Dockerfile可以干活，但是开发人员经常提交代码时就难以接受，CI跑太慢了。 构建命令：docker build --pull --rm -f "Dockerfile" -t myappts:latest .。

# file: Dockerfile

# build
FROM node:lts as build

RUN mkdir /app
ADD . /app

WORKDIR /app
RUN yarn
RUN yarn build

# release
FROM nginx:stable-alpine
COPY --from=build  /app/build  /usr/share/nginx/html
COPY --from=build  /app/nginx-expires.conf  /etc/nginx/conf.d/expires.conf

使用Yarn缓存加速的Docker镜像

第一步，先构建Yarn缓存加速镜像

# file: Dockerfile-react-yarn-cache

# react yarn cache
FROM node:lts

RUN mkdir /app
ADD . /app

WORKDIR /app
RUN yarn

WORKDIR /
RUN rm -Rf /app

使用命令docker build --pull --rm -f "Dockerfile-react-yarn-cache" -t kinsprite/react-yarn-cache:latest .构建缓存镜像。原理是yarn会把依赖包缓存到容器中，下次使用yarn命令获取相同hash的依赖包时，先从本地复制。

我们可以到容器中确认，执行docker run --rm -it kinsprite/react-yarn-cache:latest bash 与 yarn cache list 可看得很多包已经被缓存到容器中。

第二步，使用新的缓存镜像做构建容器

# file: Dockerfile-build-fast

# build
FROM kinsprite/react-yarn-cache:latest as build

RUN mkdir /app
ADD . /app

WORKDIR /app
RUN yarn
RUN yarn build

# release
FROM nginx:stable-alpine
COPY --from=build  /app/build  /usr/share/nginx/html
COPY --from=build  /app/nginx-expires.conf  /etc/nginx/conf.d/expires.conf

执行docker build --rm -f "Dockerfile-build-fast" -t myappts:latest .的速度比常规的速度快了许多。

验证前端工程的发布镜像，执行docker run --rm --name myappts-nginx -p 8080:80 myappts:latest，使用浏览器打开http://your_ip_address:8080/即可看见React样例界面在运行。

其他

使用Docker镜像的可靠性比共享卷的方式要高，各个CI任务完全相互隔离，不会出现共享卷同时读写的现象。