企业官网建设流程全解析

• 示例工程

本指南以 awesome-compose 仓库中的 VueJS 示例为主体，讲解如何借助 Docker Compose 一键构建、启动一个基于 Vue CLI 的 Vue.js 开发环境，并深入剖析其compose.yaml与多阶段Dockerfile的底层实现。读完本文，你将掌握 Compose 文件的服务编排、端口映射、匿名卷与源码热重载机制，并能够独立复现、验证与清理这套 Vue.js 容器化开发流程。

示例概览与项目结构

该示例位于仓库的 vuejs 目录，核心目标是用一条docker compose up -d命令，把 Vue CLI 脚手架项目跑进容器，同时通过挂载卷让宿主机上的源码改动实时反映到浏览器中（hot-reload）。整体项目结构如下：

. ├── compose.yaml ├── README.md └── vuejs ├── Dockerfile ├── babel.config.js ├── package.json ├── yarn.lock ├── public/ │ └── index.html └── src/ ├── App.vue ├── main.js └── components/ └── HelloWorld.vue

其中 compose.yaml 负责定义容器服务，vuejs/Dockerfile 负责构建带 Vue CLI 的开发镜像，vuejs/src/下则是标准的 Vue 单文件组件源码。

解读 compose.yaml：一个服务的完整编排

compose.yaml 是整个示例的核心配置文件，全文如下：

services: web: build: context: vuejs target: development ports: - 8080:8080 volumes: - ./vuejs:/project - /project/node_modules

逐项拆解其含义：

• services.web：定义一个名为web的服务。Compose 文件声明了应用包含一个服务web，即 Vue.js 前端开发服务器。
• build.context: vuejs：构建上下文指向vuejs目录，Docker 会在该目录下寻找Dockerfile并打包构建所需文件。
• build.target: development：指定多阶段构建的目标阶段为development（对应 Dockerfile 中的第一个阶段），确保镜像只包含开发环境所需内容。
• ports: 8080:8080：将容器内 Vue CLI 开发服务器监听的 8080 端口映射到宿主机 8080 端口。需要注意：仓库内 vuejs/README.md 中给出的示例为80:8080，而实际生效的 compose.yaml 使用的是8080:8080，两者存在版本差异，部署时请以 compose.yaml 为准，并确保宿主机对应端口（8080）未被其他进程占用。若端口被占用，可修改ports左侧的宿主机端口号后重新启动。
• volumes：
  • ./vuejs:/project：把宿主机上的 Vue 源码目录挂载到容器内的/project，源码在宿主机上编辑后，容器内立即同步，配合热重载实现"改完即刷新"。
  • /project/node_modules：这是匿名卷（anonymous volume），作用是让容器内的node_modules目录与宿主机隔离。宿主机未必安装了对应版本的 Node 依赖，此卷保证容器使用镜像构建时安装的依赖，同时避免宿主机目录内容覆盖容器内依赖。

多阶段 Dockerfile：开发镜像的构建原理

构建行为由 vuejs/vuejs/Dockerfile 决定，它采用多阶段（multi-stage）写法：

# syntax=docker/dockerfile:1.4 FROM --platform=$BUILDPLATFORM node:14.4.0-alpine AS development RUN mkdir /project WORKDIR /project COPY . . RUN yarn global add @vue/cli RUN yarn install ENV HOST=0.0.0.0 CMD ["yarn", "run", "serve"] FROM development as dev-envs RUN <<EOF apk update apk add git EOF RUN <<EOF addgroup -S docker adduser -S --shell /bin/bash --ingroup docker vscode EOF # install Docker tools (cli, buildx, compose) COPY --from=gloursdocker/docker / / CMD ["yarn", "run", "serve"]

关键实现点：

• 基础镜像与平台：node:14.4.0-alpine提供 Node.js 14 运行时；--platform=$BUILDPLATFORM配合# syntax=docker/dockerfile:1.4的 BuildKit 语法，支持跨平台构建。
• 阶段一development：WORKDIR /project与 Compose 卷挂载目标/project严格对应；RUN yarn global add @vue/cli安装 Vue CLI，RUN yarn install依据 package.json 安装项目依赖；ENV HOST=0.0.0.0让开发服务器监听所有网络接口，否则容器外无法访问；CMD ["yarn", "run", "serve"]启动vue-cli-service serve开发服务器（对应 package.json 中scripts.serve）。
• 阶段二dev-envs：在开发镜像之上追加 git、创建vscode用户，并复制gloursdocker/docker镜像中的 Docker CLI 工具，便于在容器内调试或使用 Docker 相关命令；该阶段同样以yarn run serve作为默认命令。

与 Dockerfile 呼应的 package.json 表明这是一个基于Vue 2.6.14与@vue/cli-service5.x 的项目，提供serve、build、lint三个 npm/yarn 脚本，并内置 ESLint 与 Babel 插件配置。

一键部署：docker compose up

在vuejs目录下执行部署命令：

$ docker compose up -d Creating network "vuejs_default" with the default driver Building web Step 1/8 : FROM node:13.10.1-alpine ... Successfully tagged vuejs_web:latest WARNING: Image for service web was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up --build`. Creating vuejs_web_1 ... done

过程要点：

• -d（detach）表示后台运行，命令执行后容器持续在后台提供服务；
• 首次执行会自动创建默认网络vuejs_default，并基于vuejs目录中的 Dockerfile 构建镜像；
• 日志中Step 1/8 : FROM node:13.10.1-alpine是构建过程示例输出，实际步骤以当前 Dockerfile 为准；
• 提示信息说明：若镜像已存在但源码或 Dockerfile 有变更，需要显式执行docker compose build或docker compose up --build才会重新构建镜像。

预期结果与访问验证

部署完成后，用docker ps检查容器状态与端口映射：

$ docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 701c02bb97b1 vuejs_web "docker-entrypoint.s…" 49 seconds ago Up 46 seconds 0.0.0.0:8080->8080/tcp vuejs_web_1

应看到一个Up状态的vuejs_web容器，端口映射为0.0.0.0:8080->8080/tcp。随后在浏览器中访问http://localhost:8080，即可看到 Vue 应用界面：

页面由 App.vue 与 components/HelloWorld.vue 渲染：App.vue作为根组件引入 HelloWorld 并显示 Vue logo，HelloWorld.vue通过props.msg接收并展示"Welcome to Your Vue.js App"文案；应用入口为 src/main.js，它创建 Vue 实例并以render: h => h(App)挂载到#app。由于源码通过卷挂载进容器，修改这些.vue文件后页面会自动热更新。

停止与清理

需要停止并移除容器与网络时，执行：

$ docker compose down Stopping vuejs_web_1 ... done Removing vuejs_web_1 ... done Removing network vuejs_default

该命令会依次停止并删除web容器、移除自动创建的vuejs_default网络。注意：匿名卷/project/node_modules默认不会被删除，若需连同数据卷一并清理，可补充-v参数（docker compose down -v）。

在容器外复现本地开发工作流

compose.yaml 将源码目录直接暴露给宿主机，因此不依赖容器也能在本地复现同一套开发流程。参照 vuejs/vuejs/README.md：

# 安装依赖 yarn install # 开发模式：编译并热重载 yarn serve # 生产构建：编译并压缩 yarn build # 代码检查并自动修复 yarn lint

这些命令与容器内 Dockerfile 执行的步骤（yarn install、yarn run serve）完全一致，本质上是同一套 Vue CLI 工作流分别在"宿主机直跑"与"容器内运行"两种形态下的体现，也解释了为何 Compose 卷设计能让两种方式无缝切换。

小结

通过本示例可以提炼出一套可复用的 Vue.js 容器化开发范式：用compose.yaml声明构建上下文与目标阶段、用多阶段Dockerfile固化 Node 与 Vue CLI 环境、用"源码挂载 + 依赖匿名卷"实现热重载且不污染宿主机，最后用docker compose up -d与docker compose down完成一键启停。如需基于此改造自己的项目，只需替换vuejs目录下的源码、按需调整端口映射即可。

• 示例工程