docker-compose部署Vue项目

最新推荐文章于 2025-04-28 08:47:48 发布
最新推荐文章于 2025-04-28 08:47:48 发布
阅读量6.5k 收藏 9
点赞数
分类专栏： docker 文章标签： docker
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u013068184/article/details/107478618
版权
本文详细介绍了如何使用docker-compose来部署Vue项目。首先，通过打包Vue项目并上传到服务器进行解压。接着，编辑Nginx配置文件和docker-compose.yml文件，设置反向代理。最后，探讨了其他启动方式，如使用Dockerfile构建镜像。在部署过程中可能会遇到Nginx配置或版本问题，文中也给出了相应的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本文说下怎么使用 docker-compose 部署 Vue 项目！

（一）打包 Vue 项目，并上传至服务器解压

在前端 Vue 工程项目中执行打包命令：

>npm run build

然后可看到在工程项目中生成了一个zip包：
在这里插入图片描述

在 Linux 服务器的某个统一目录下使用sz命令上传该zip包，之后执行解压命令：

unzip -o dise.zip -d dist/

说明：

  • -o 表示覆盖存在的文件
  • -d 表示解压到指定该路径下
（二）编辑 Nginx 配置文件以及 docker-compose.yml 文件

因为需要用到Nginx做反向代理，而Nginx的配置文件会包含 default.conf 以及 nginx.conf ；二者的联系为 default.conf 会被 nginx.conf 引入，所以实际上我们只需要配置 default.conf ，然后挂载到 Nginx 容器中即可！
以下可看出两者的关系：
在这里插入图片描述

最低0.47元/天 解锁文章
使用docker-compose部署一个springboot项目(包含Postgres edisMongoNginx等环境)
洛阳泰山的博客
10-24 540
这是所有服务的开始标签，每个服务都是一个独立运行的应用程序或数据库实例。ports:networks:- mongo- postgres- redisimage: 使用的镜像是。: 容器启动后，其名称将设置为。ports: 将容器内的端口12000映射到宿主机的端口12000。networks: 容器将连接到名为的网络。depends_on: 指定了依赖的服务列表，这些服务在启动之前会被先启动。restart: 设置为always。
docker+docker-compose部署 vue+SpringBoot项目
qq_47899239的博客
08-13 262
docker+docker-compose实现云端部署java项目
【Docker】使用docker-compose搭建django＋vue工程文章
wjianwei666的专栏
12-11 1061
比较有意思的点在于一份Dockerfile是可以分阶段构建的，也就是可以编写多个FROM并且用as给一个别名，后面的镜像可以通过这个别名获取该镜像的一些内容，比如COPY --from等方式。另一种是将初始化脚本拷贝进/docker-entrypoint-initdb.d/ 中，镜像在初始化的时候会执行文件夹下的所有脚本，我们可以在脚本中创建数据库和用户。另外，静态文件的处理笔者采用的是 whitenoise 的方案进行处理，所以需要在中间件中配置一下whitenoise的处理中间件。
docker-compose部署vue项目
GG_Gao的博客
09-22 2944
一、前言 本文将通过docker-compose来部署前端Vue项目到Nginx中 服务器基本环境： CentOS Linux release 7.6.1810 (Core) Docker version 18.03.0-ce, build 0520e24 docker-compose version 1.18.0, build 8dd22a9 二、docker-compose部署 项目目录结构 Dockerfile 和 nginx配置文件都存放在项目docker文件夹下。 .dockerigno
Vue 部署全流程：静态文件 / Docker 部署实践
最新发布
前端开发探索之旅
04-28 857
Docker 是一个开源的容器化平台，它可以将应用程序及其依赖项打包成一个独立的容器，从而实现应用程序的快速部署和迁移。使用 Docker 部署 Vue 项目可以提高部署的效率和可重复性。静态文件部署和 Docker 部署是两种常见的 Vue 项目部署方式，各有优缺点。在实际应用中，需要根据项目的规模、复杂度和团队的技术水平等因素选择合适的部署方式。通过本文的介绍，希望能够帮助开发者顺利完成 Vue 项目的部署。到这里，这篇文章就和大家说再见啦！
Docker基础、利用Docker Compose部署Vue项目
m0_52043522的博客
04-10 5935
Docker入门学习及常用命令
Docker-compose简单部署vue前后端分离项目
EnlightenedNet的博客
05-19 955
一，安装Doker 要使用docker-compose前必须安装docker #下载Docker依赖的环境,想安装Docker，需要先将依赖的环境全部下载，就像Maven依赖JDK一样 yum -y install yum-utils device-mapper-persistent-data lvm2 #指定Docker镜像源,默认下载Docker会去国外服务器下载，速度较慢，我们可以设置为阿里云镜像源，速度更快 yum-config-manager --add-repo http://mirror
使用 Docker 和 Docker Compose 部署 Vue
让梦想疯狂
05-31 1103
使用 Docker 和 Docker Compose 部署 Vue 项目有两种方式：直接使用 Docker 和使用 Docker Compose。
若依/RuoYi-Vue使用docker-compose部署
yz2322944912的博客
03-09 3715
将打包好的后端代码目录中的 jar包拷贝到ruoyi目录下的Java目录下 并创建Dockerfile文件。这里还需要拷贝一份nginx的配置文件到当前目录方便挂载到nginx容器中，内容为下。#对应docker-compose.ym文件中java的容器名。将之前创建的java目录和后端RuoYi-Vue目录移动到其中。运行映射若依页面显示的目录到容器的opt目录下。运行映射若依后端目录到容器的vue目录下。进入容器的/vue目录构建打包后端。在ruoyi目录下创建java目录。创建目录ruoyi并进入。
用docker compose部署vue+springboot最简单教程
程序员柚子的博客
08-12 627
简单快速教学用docker compose部署vue+springboot网站
使用Docker容器部署RuoYi-Vue前后端分离项目
06-20
此次部署项目是我亲身经历，而且是一次性部署成功，没有部署超过两次甚至多次的情况，过程虽然很艰难，但结果还是很满意的，我希望大家用心去部署这个项目，你会发现部署这个项目其实不难
docker-compose 部署 vue 项目
gyt_b的博客
03-25 824
编写Dockerfie文件 vi Dockerfile 文件内容如下： # ======================== 上：npm打包 下：nginx运行 ======================== # nginx镜像 FROM nginx # 维护者信息 MAINTAINER gaoyt "1619149796@qq.com" # 移除nginx容器的default.conf文件、nginx配置文件 # RUN rm /etc/nginx/conf.d/default.conf # RU
Docker Compose一键部署Spring Boot + Vue项目
大头皮鞋的博客
10-29 2323
Docker Compose一键部署Spring Boot + Vue项目。
docker-compose安装nginx实现vue项目部署
weixin_43224069的博客
06-19 454
【代码】docker-compose安装nginx实现vue项目部署。
docker-compose采用前后端分离部署vue和springboot项目
进击的豌豆的博客
09-09 1208
docker-compose采用前后端分离部署vue和springboot项目
利用docker-compose部署项目（vue、nginx、springBoot、mysql）
weixin_47049334的博客
10-13 2412
一、环境搭建 系统环境 ：CentOS7 1、docker安装 1、删除旧版本 yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-logrotate \
前后端入门-django vue 项目使用docker compose部署（完整）
wisdom_lp的博客
04-14 1653
django vue 项目使用docker compose部署
docker-compose部署vue
04-18
<think>好的，我现在需要帮助用户解决如何使用docker-compose部署Vue项目，并修改Nginx配置文件的问题。用户之前已经询问过关于Docker部署Nginx和Vue的问题，现在想了解如何用docker-compose来实现。首先，我应该回顾之前的对话和用户提供的引用，确保回答一致并覆盖所有关键点。 首先，用户提供的引用中提到使用docker-compose build和up命令启动服务，以及如何复制dist文件和配置Nginx。引用[4]还提到了使用Dockerfile多阶段构建，这可能是一个优化的方法。用户现在明确提到要使用docker-compose，所以需要整合这些步骤到一个docker-compose.yml文件中。 接下来，我需要考虑用户可能的实际需求。他们可能希望有一个简单的一键部署流程，同时能够灵活地修改Nginx配置，特别是处理Vue的路由问题，比如history模式导致的404错误。此外，用户可能关心如何管理不同环境（开发、生产）的配置，以及如何处理静态资源缓存等问题。 在之前的回答中，我已经提到了Nginx配置中的try_files指令，这一点需要再次强调，因为它是解决Vue路由问题的关键。同时，用户可能需要了解如何通过docker-compose管理多个服务，比如同时运行Vue前端和后端API，但根据当前问题，重点应放在Vue和Nginx上。 现在需要整理步骤：构建Vue项目、准备Dockerfile、编写docker-compose.yml、配置Nginx，最后启动服务。用户可能需要一个结构清晰的目录，比如将dist、nginx配置、docker-compose文件放在合适的目录结构中。此外，权限问题和缓存配置也是需要注意的细节。 还要考虑用户是否希望将构建过程集成到Docker中，这样可以在部署时自动构建Vue项目，而不是手动构建后再复制。引用[4]中的Dockerfile示例使用了多阶段构建，这可以简化流程，适合在docker-compose中使用。因此，在docker-compose.yml中可能需要指定构建上下文和Dockerfile的位置。 另外，用户可能希望修改Nginx配置后能够方便地重新加载，而不需要重新构建整个镜像。因此，在docker-compose中挂载配置文件作为卷是一个好方法，这样可以实时修改生效。需要确保Nginx配置文件的路径正确，并且容器内的路径正确映射。 最后，常见问题如路由404、静态资源加载失败等，应该在回答中提到解决方案，确保用户部署后能够顺利运行。同时，提供相关问题，帮助用户扩展知识，比如环境变量配置、Docker Compose编排多服务、缓存优化等。 总结步骤： 1. 构建Vue项目生成dist。 2. 创建Dockerfile进行多阶段构建（可选）。 3. 编写Nginx配置文件，处理路由和静态资源。 4. 编写docker-compose.yml，定义服务和卷挂载。 5. 启动服务并验证。 6. 处理常见问题和优化配置。 需要确保所有步骤清晰，命令准确，特别是路径和挂载点正确。同时，提醒用户注意路径权限和配置文件的正确性，避免常见错误。</think>以下是使用Docker Compose部署Vue项目并配置Nginx的完整方案，整合了**多阶段构建**和**动态配置挂载**技术： --- ### **一、项目结构准备** ```bash project-root/ ├── docker-compose.yml # Docker Compose主文件 ├── frontend/ # Vue项目目录 │ ├── Dockerfile # 前端多阶段构建文件 │ └── nginx/ # Nginx配置目录 │ └── vue-app.conf # 自定义Nginx配置 └── backend/ # 后端服务目录（可选） ``` --- ### **二、核心配置文件** #### 1. **Nginx配置** (`frontend/nginx/vue-app.conf`) ```nginx server { listen 80; server_name localhost; # 静态资源缓存优化 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 365d; add_header Cache-Control "public, immutable"; } # Vue路由配置 location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; # 关键配置[^1][^3] } # API反向代理示例 location /api { proxy_pass http://backend:8000; # 后端服务名需与docker-compose中一致 proxy_set_header Host $host; } } ``` #### 2. **Dockerfile** (`frontend/Dockerfile`) ```dockerfile # 构建阶段 FROM node:16 as builder WORKDIR /app COPY package*.json ./ RUN npm install --registry=https://registry.npmmirror.com COPY . . RUN npm run build # 运行阶段 FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html COPY nginx/vue-app.conf /etc/nginx/conf.d/default.conf ``` #### 3. **docker-compose.yml** ```yaml version: '3.8' services: frontend: build: context: ./frontend dockerfile: Dockerfile ports: - "80:80" volumes: - ./frontend/nginx:/etc/nginx/conf.d # 动态挂载配置目录 - static_volume:/usr/share/nginx/html # 持久化静态文件 environment: - TZ=Asia/Shanghai backend: # 示例后端服务（可选） image: backend-service:latest ports: - "8000:8000" volumes: static_volume: ``` --- ### **三、部署操作流程** 1. **构建镜像并启动服务** ```bash docker-compose build # 首次构建 docker-compose up -d # 后台运行 ``` 2. **动态修改配置** ```bash # 修改本地frontend/nginx/vue-app.conf后执行 docker-compose exec frontend nginx -s reload ``` 3. **查看实时日志** ```bash docker-compose logs -f frontend ``` --- ### **四、高级配置技巧** #### 1. **环境变量注入** 在`docker-compose.yml`中添加： ```yaml environment: - API_BASE_URL=${API_BASE_URL} ``` 通过`.env`文件传递变量： ```bash # .env文件 API_BASE_URL=http://api.example.com ``` #### 2. **多环境部署** 创建不同配置目录： ```yaml volumes: - ./frontend/nginx/${ENV:-dev}:/etc/nginx/conf.d ``` 启动时指定环境： ```bash ENV=prod docker-compose up -d ``` #### 3. **性能优化参数** 在`docker-compose.yml`中添加资源限制： ```yaml deploy: resources: limits: cpus: '0.5' memory: 512M ``` --- ### **五、故障排查指南** | 现象 | 解决方案 | |----------------------|------------------------------------------------------------------------| | 路由404 | 检查`try_files`配置，确保Vue路由模式为history[^1] | | 静态资源加载失败 | 检查`vue.config.js`中的`publicPath`设置，验证Nginx的`root`路径是否正确 | | API代理失败 | 使用`docker-compose exec frontend curl http://backend:8000`测试容器间通信 | | 配置文件未生效 | 执行`docker-compose exec frontend nginx -T`查看最终生效配置 | --- ### **六、典型应用场景** 1. **CI/CD流水线集成** 在GitLab CI中配置： ```yaml deploy: stage: deploy script: - docker-compose -f docker-compose.prod.yml up --build -d ``` 2. **蓝绿部署实现** 通过双容器方案滚动更新： ```bash docker-compose up -d --scale frontend=2 --no-recreate docker-compose exec frontend nginx -s reload ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值