Docker Compose企业实战系列三Vue/React前端项目容器化完整部署前言前面两篇我们搞定了LNMP建站环境、SpringBootMySQLRedis后端部署。一套完整的项目还差最后一块前端容器化。传统前端部署坑非常多打包路径问题、刷新404、跨域、部署环境不一致、每次上传文件麻烦。本篇给你企业通用、全站可复制、零修改即用的 Vue/React 容器化方案基于 Nginx 部署静态资源、自动代理后端接口、解决 history 路由404、和 SpringBoot 后端统一 Compose 编排实现前后端一键上线。一、整套项目最终目录结构和上一篇后端项目完美衔接目录统一规范full-stack-docker/ ├── .env ├── docker-compose.yml # 全局编排文件 ├── app/ # SpringBoot后端 │ ├── Dockerfile │ └── app.jar └── web/ # Vue/React前端 ├── Dockerfile ├── nginx.conf └── dist/ # 前端打包产物二、前端 Nginx 配置解决404跨域代理新建web/nginx.conf直接全量复制已适配 Vue/React history 模式server { listen 80; server_name localhost; # 静态资源根目录 root /usr/share/nginx/html; index index.html; # 解决前端history路由刷新404 location / { try_files $uri $uri/ /index.html; } # 所有/api请求转发到后端SpringBoot服务 # 重点springboot-service 是compose中的后端服务名 location /api/ { proxy_pass http://springboot-service:8080/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }三、前端通用 Dockerfile新建web/Dockerfile轻量 Nginx 镜像生产通用模板# 轻量nginx基础镜像 FROM nginx:alpine # 删除默认配置 RUN rm /etc/nginx/conf.d/default.conf # 拷贝自定义nginx配置 COPY nginx.conf /etc/nginx/conf.d/ # 拷贝前端打包产物 COPY dist /usr/share/nginx/html # 暴露80端口 EXPOSE 80 # 启动nginx CMD [nginx, -g, daemon off;]四、环境变量 .env 文件沿用后端配置统一管理# MySQL MYSQL_ROOT_PASSWORDroot123456 MYSQL_DATABASEspring_db MYSQL_USERappuser MYSQL_PASSWORDapp123456 # Redis REDIS_PASSWORDredis123456 # 镜像版本 MYSQL_VERSION8.0 REDIS_VERSION7.0-alpine五、完整版 docker-compose.yml前后端全套终极整合版包含前端后端MySQLRedis直接复制即用version:3.8services:# MySQLmysql:image:mysql:${MYSQL_VERSION}ports:-3306:3306volumes:-./mysql/data:/var/lib/mysqlenvironment:MYSQL_ROOT_PASSWORD:${MYSQL_ROOT_PASSWORD}MYSQL_DATABASE:${MYSQL_DATABASE}MYSQL_USER:${MYSQL_USER}MYSQL_PASSWORD:${MYSQL_PASSWORD}restart:alwaysnetworks:-full-net# Redisredis:image:redis:${REDIS_VERSION}ports:-6379:6379volumes:-./redis/data:/datacommand:redis-server--requirepass ${REDIS_PASSWORD}--appendonly yesrestart:alwaysnetworks:-full-net# SpringBoot后端springboot-service:build:./appports:-8080:8080depends_on:-mysql-redisrestart:alwaysnetworks:-full-net# Vue/React前端web:build:./webports:-80:80depends_on:-springboot-servicerestart:alwaysnetworks:-full-net# 统一自定义网络容器名互访networks:full-net:driver:bridge六、后端 app/Dockerfile复用完整版FROM openjdk:17-jdk-slim WORKDIR /app COPY app.jar app.jar EXPOSE 8080 ENTRYPOINT [java,-jar,app.jar]七、前端项目打包关键配置必看1. Vite 项目新增打包路径vite.config.jsexportdefaultdefineConfig({base:./,// 其他配置...})2. 打包命令npmrun build打包完成将dist文件夹放入web/目录。八、一键部署全套前后端项目进入项目根目录执行# 构建镜像 后台启动全部服务dockercompose up-d--build# 查看运行状态dockercomposeps# 实时查看日志dockercompose logs-f九、访问地址前端页面http://服务器IP后端接口http://IP:8080十、高频踩坑总结已帮你避坑页面刷新404已在 nginx.conf 配置 try_files 兜底前端跨域报错通过 Nginx 代理彻底解决跨域接口连不上后端同一 compose 网络使用服务名通信无需IP更新前端不生效必须重新 build 重新构建镜像--build页面空白Vite 打包必须配置base: ./相对路径本期总结本期我们完成了Vue/React前端 SpringBoot后端 MySQL Redis全站容器化部署。至此完整前后端分离项目实现一行命令部署、环境统一、开箱即用完全满足毕业设计、个人项目、中小企业上线需求。下期预告Docker Compose企业实战系列四Redis持久化、密码配置与集群实战详解 Redis 生产级部署、持久化策略、密码安全、防止缓存数据丢失。