0%

使用 Docker 构建前端项目

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

解决

在项目文件夹下新建 Dockerfile

1
2
3
4
5
6
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. 执行构建命令

运行下面命令

1
2
3
4
## 构建容器
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

1
2
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 其他常见命令

列出运行的容器

1
2
3
4
5
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 容器中的文件

1
docker cp cc72747c1eb9:/app/dist ./out

参考文章

特别鸣谢

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