构建 Vue3 Docker 镜像

背景

构建 Vue3 程序的 Docker 镜像
Vue3 程序例子参考：https://www.cnblogs.com/klvchen/articles/18030081

编写 Dockerfile

vi Dockerfile 

# 第一阶段：安装依赖
FROM node:16.19.1 AS builder
WORKDIR /app
COPY package.json package-lock.json ./

# 使用 --mount=type=cache 来缓存 npm 的依赖库
RUN --mount=type=cache,target=/root/.npm \
    npm install --registry=https://mirrors.tuna.tsinghua.edu.cn/npm/

# 第二阶段：复制应用代码并构建
COPY . .
RUN npm run build-only

# 最终阶段：创建运行时镜像
FROM nginx:1.27.0-alpine

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

# 复制构建阶段生成的文件
COPY --from=builder /app/dist/ /usr/share/nginx/html/

构建与验证

把 Dockerfile 与程序代码放在同一个目录下 (注意：程序上不能有 node_modules 目录)

docker build -t mytest:0.0.1 .

# 可以使用下面命令确认哪些使用了缓存
docker buildx build --progress plain -t mytest:0.0.1 .

docker run --name mytest --network=host -d mytest:0.0.1

使用浏览器访问