使用 Docker 构建前端项目

公司的流水线服务器因为一些原因无法升级 nodojs，无法安装 nvm，故使用 Docker 构建前端项目。

解决

在项目文件夹下新建 Dockerfile

FROM node:latest
WORKDIR /app
COPY . .
RUN npm i --legacy-peer-deps --registry=https://registry.npm.taobao.org
RUN npm rebuild esbuild
RUN npm run build:test

解释 Dockerfile

1. 容器使用 Node ，版本为最新版本
2. 指定工作目录 /app
3. 将项目文件夹拷贝到 /app 下
4. 运行 npm i 安装依赖
5. 重新构建 esbuild 模块
6. 执行构建命令

运行下面命令

## 构建容器
docker build -t docker/web:v1.0 .
## 运行容器
docker run -v /path/to/dist:/app/dist docker/web:v1.0  npm run build:test

踩坑

报错 Could not resolve entry module (index.html).

这就是为什么要用上面 COPY . . 的原因了，字面意思，vite 找不到这个 index.html 文件，所以需要复制到 Dokcer 容器中

报错 You installed esbuild on another platform than the one you're currently using.

我使用的是 Macbook Pro M1 Pro，但是容器中使用的是 Ubuntu，所以需要运行 npm rebuild esbuild 来解决这个问题

报错 Unable to resolve dependency tree

npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps

根据报错提示，可以执行 `npm i –legacy-peer-deps 来解决这个问题

Docker 拉取依赖失败

报错信息如下

Cannot read property 'pickAlgorithm' of null

网上说运行 npm cache clear --force

但是很明显，不好使，后来发现去掉 package-lock.json 文件，重新 npm i 就好了

Docker 其他常见命令

列出运行的容器

docker ps -a

返回结果
CONTAINER ID   IMAGE             COMMAND                  CREATED       STATUS                   PORTS     NAMES
de8f85fbfa70   docker/web:v1.0   "docker-entrypoint.s…"   2 hours ago   Exited (0) 2 hours ago             infallible_clarke

复制 Docker 容器中的文件

docker cp cc72747c1eb9:/app/dist ./out

参考文章

• https://yeasy.gitbook.io/docker_practice/
• https://javamana.com/2022/129/202205091409102801.html
• https://zhuanlan.zhihu.com/p/39241059
• https://www.yixuebiancheng.com/article/96571.html
• https://shanyue.tech/frontend-engineering/docker.html#%E5%88%A9%E7%94%A8%E9%95%9C%E5%83%8F%E7%BC%93%E5%AD%98
• https://www.cnblogs.com/liuheng/p/16249022.html
• https://juejin.cn/post/7022815091305218078
• https://segmentfault.com/a/1190000040857630

特别鸣谢

感谢微信群 Go语言中文网-孙膑 的 @混沌摆 @李李很穷十二点必睡觉 @Zero 这几位大佬的指点。