Docker Compose企业实战系列（三）：Vue/React前端项目容器化完整部署

前言

前面两篇我们搞定了LNMP建站环境 、SpringBoot+MySQL+Redis后端部署。

一套完整的项目还差最后一块：前端容器化。

传统前端部署坑非常多：打包路径问题、刷新404、跨域、部署环境不一致、每次上传文件麻烦。

本篇给你企业通用、全站可复制、零修改即用的 Vue/React 容器化方案：

基于 Nginx 部署静态资源、自动代理后端接口、解决 history 路由404、和 SpringBoot 后端统一 Compose 编排，实现前后端一键上线。

一、整套项目最终目录结构

plain 复制代码

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 模式：

nginx 复制代码

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 镜像，生产通用模板：

dockerfile 复制代码

# 轻量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 文件

沿用后端配置，统一管理：

env 复制代码

# MySQL
MYSQL_ROOT_PASSWORD=root123456
MYSQL_DATABASE=spring_db
MYSQL_USER=appuser
MYSQL_PASSWORD=app123456

# Redis
REDIS_PASSWORD=redis123456

# 镜像版本
MYSQL_VERSION=8.0
REDIS_VERSION=7.0-alpine

五、完整版 docker-compose.yml（前后端全套）

终极整合版，包含：前端+后端+MySQL+Redis，直接复制即用：

yaml 复制代码

version: '3.8'

services:
  # MySQL
  mysql:
    image: mysql:${MYSQL_VERSION}
    ports:
      - "3306:3306"
    volumes:
      - ./mysql/data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
    restart: always
    networks:
      - full-net

  # Redis
  redis:
    image: redis:${REDIS_VERSION}
    ports:
      - "6379:6379"
    volumes:
      - ./redis/data:/data
    command: redis-server --requirepass ${REDIS_PASSWORD} --appendonly yes
    restart: always
    networks:
      - full-net

  # SpringBoot后端
  springboot-service:
    build: ./app
    ports:
      - "8080:8080"
    depends_on:
      - mysql
      - redis
    restart: always
    networks:
      - full-net

  # Vue/React前端
  web:
    build: ./web
    ports:
      - "80:80"
    depends_on:
      - springboot-service
    restart: always
    networks:
      - full-net

# 统一自定义网络，容器名互访
networks:
  full-net:
    driver: bridge

六、后端 app/Dockerfile（复用完整版）

dockerfile 复制代码

FROM openjdk:17-jdk-slim
WORKDIR /app
COPY app.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java","-jar","app.jar"]

七、前端项目打包关键配置（必看）

1. Vite 项目新增打包路径

vite.config.js

javascript 复制代码

export default defineConfig({
  base: "./",
  // 其他配置...
})

2. 打包命令

bash 复制代码

npm run build

打包完成，将 dist 文件夹放入 web/ 目录。

八、一键部署全套前后端项目

进入项目根目录执行：

bash 复制代码

# 构建镜像 + 后台启动全部服务
docker compose up -d --build

# 查看运行状态
docker compose ps

# 实时查看日志
docker compose 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 生产级部署、持久化策略、密码安全、防止缓存数据丢失。