Dockerfile node Vue.js 项目的分阶段构建的案例

# ---- Dependencies ----
FROM node:16-alpine AS dependencies
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# ---- Build ----
FROM dependencies AS build
WORKDIR /app
COPY . .
RUN yarn build

# ---- Release ----
FROM nginx:1.23-alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD [ "nginx", "-g", "daemon off;" ]

这个 Dockerfile 文件使用了多阶段构建。第一阶段使用了 node:16-alpine 作为基础镜像，创建了一个名为 dependencies 的阶段。在这个阶段中，我们设置了工作目录为 /app，并将 package.json 和 yarn.lock 文件复制到了工作目录中。然后，我们使用 yarn install --frozen-lockfile 命令安装了依赖。

这个命令会根据 yarn.lock 文件安装依赖，并且会锁定依赖的版本，以保证在不同的机器上安装的依赖版本一致。安装依赖完成后，我们创建了一个名为 build 的阶段。

在这个阶段中，我们将当前目录下的所有文件复制到了 /app 目录中，并运行了 yarn build 命令来构建项目。最后，我们创建了一个名为 Release 的阶段，使用了 nginx:1.23-alpine 作为基础镜像。在这个阶段中，我们将 build 阶段构建好的文件复制到了 /usr/share/nginx/html 目录下，并暴露了 80 端口。

这样，我们就可以使用 Docker 构建出一个包含 Vue.js 项目的镜像，并且可以通过 Nginx 服务器来访问这个项目。