示例工程【免费下载链接】awesome-composeAwesome Docker Compose samples项目地址https://gitcode.com/gh_mirrors/aw/awesome-compose点击查看免费下载本指南以 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写法# syntaxdocker/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 HOST0.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 --fromgloursdocker/docker / / CMD [yarn, run, serve]关键实现点基础镜像与平台node:14.4.0-alpine提供 Node.js 14 运行时--platform$BUILDPLATFORM配合# syntaxdocker/dockerfile:1.4的 BuildKit 语法支持跨平台构建。阶段一developmentWORKDIR /project与 Compose 卷挂载目标/project严格对应RUN yarn global add vue/cli安装 Vue CLIRUN yarn install依据 package.json 安装项目依赖ENV HOST0.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过程要点-ddetach表示后台运行命令执行后容器持续在后台提供服务首次执行会自动创建默认网络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 logoHelloWorld.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目录下的源码、按需调整端口映射即可。赞分享示例工程【免费下载链接】awesome-composeAwesome Docker Compose samples项目地址https://gitcode.com/gh_mirrors/aw/awesome-compose点击查看免费下载相关推荐Awesome Compose一站式Docker Compose示例集合Awesome Compose一站式Docker Compose示例集合 项目介绍 Awesome Compose https://github.com/do示例工程如何优化Krea-2-Turbo-GGUF提示词10个实用技巧提升图像质量如何优化Krea 2 Turbo GGUF提示词10个实用技巧提升图像质量 Krea 2 Turbo GGUF是一款强大的文本到图像扩散模型能够根据自然语言freecodecamp.cn后端容器化部署Docker Compose的应用freecodecamp.cn后端容器化部署Docker Compose的应用 你是否还在为复杂的后端部署流程感到困扰服务器配置不一致、依赖冲突、部署步骤繁教育后端前端上一篇Diablo Edit2暗黑破坏神II角色存档编辑工具全解析下一篇Diablo Edit2开源暗黑破坏神II角色编辑工具全解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 使用 Docker Compose 部署 Vue.js 前端应用：awesome-compose 示例深度解析
示例工程【免费下载链接】awesome-composeAwesome Docker Compose samples项目地址https://gitcode.com/gh_mirrors/aw/awesome-compose点击查看免费下载本指南以 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写法# syntaxdocker/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 HOST0.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 --fromgloursdocker/docker / / CMD [yarn, run, serve]关键实现点基础镜像与平台node:14.4.0-alpine提供 Node.js 14 运行时--platform$BUILDPLATFORM配合# syntaxdocker/dockerfile:1.4的 BuildKit 语法支持跨平台构建。阶段一developmentWORKDIR /project与 Compose 卷挂载目标/project严格对应RUN yarn global add vue/cli安装 Vue CLIRUN yarn install依据 package.json 安装项目依赖ENV HOST0.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过程要点-ddetach表示后台运行命令执行后容器持续在后台提供服务首次执行会自动创建默认网络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 logoHelloWorld.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目录下的源码、按需调整端口映射即可。赞分享示例工程【免费下载链接】awesome-composeAwesome Docker Compose samples项目地址https://gitcode.com/gh_mirrors/aw/awesome-compose点击查看免费下载相关推荐Awesome Compose一站式Docker Compose示例集合Awesome Compose一站式Docker Compose示例集合 项目介绍 Awesome Compose https://github.com/do示例工程如何优化Krea-2-Turbo-GGUF提示词10个实用技巧提升图像质量如何优化Krea 2 Turbo GGUF提示词10个实用技巧提升图像质量 Krea 2 Turbo GGUF是一款强大的文本到图像扩散模型能够根据自然语言freecodecamp.cn后端容器化部署Docker Compose的应用freecodecamp.cn后端容器化部署Docker Compose的应用 你是否还在为复杂的后端部署流程感到困扰服务器配置不一致、依赖冲突、部署步骤繁教育后端前端上一篇Diablo Edit2暗黑破坏神II角色存档编辑工具全解析下一篇Diablo Edit2开源暗黑破坏神II角色编辑工具全解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考