docker-compose部署前后端项目

字数: 0 字 时长: 0 分钟

概述：

在这个部署方案中，我们将使用 docker-compose 来实现前后端分离的项目部署。前端是用 Vue 3 和 Vite 构建的，后端使用 Spring Boot。我们将通过 nginx 来作为反向代理，管理前后端的请求。你已经安装好了 Docker，MySQL，Redis 等中间件，所以我们只需要关注前端、后端和 nginx 的部署。

步骤：

1. 准备 Vue 3 项目（前端）

首先，确保你已经完成了 Vue 3 + Vite 项目的开发。

• 步骤：

  • 在你的 Vue 3 项目目录中，执行 npm run build 或 yarn build，这将会打包项目，生成静态文件。

  • 打包完成后，dist/ 目录中会包含最终的静态资源文件。

2. 准备 Spring Boot 项目（后端）

确保你的 Spring Boot 项目能够在 Docker 容器中运行，通常需要通过 Dockerfile 来构建后端应用。

• 步骤：

  • 在 Spring Boot 项目的根目录下创建 Dockerfile 文件：

FROM openjdk:11-jre-slim
VOLUME /tmp
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java", "-jar", "/app.jar"]

1. 使用 Maven 或 Gradle 构建项目，然后运行以下命令来构建 Spring Boot 应用的 Docker 镜像：

docker build -t my-springboot-app .

3. 准备 nginx 配置

nginx 需要作为反向代理来转发前端和后端请求，下面是一个基本的 nginx.conf 配置。

• nginx.conf:

server {
    listen 80;

    # 前端静态资源
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    # 后端接口代理
    location /api/ {
        proxy_pass http://springboot:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

解释：

• / 路径下的请求都会由 nginx 提供静态资源，指向 dist/ 目录。

• /api/ 路径下的请求会被转发到后端 Spring Boot 服务。

4. 创建 docker-compose.yml文件

docker-compose.yml 文件将会用来定义所有服务的容器，包括 nginx，Spring Boot 应用以及前端静态资源。

• docker-compose.yml：

version: '3'
services:
  # 后端服务 (Spring Boot)
  springboot:
    image: my-springboot-app
    container_name: springboot
    ports:
      - "8080:8080"
    environment:
      - SPRING_DATASOURCE_URL=jdbc:mysql://mysql:3306/dbname
      - SPRING_REDIS_HOST=redis
    depends_on:
      - mysql
      - redis
    networks:
      - backend

  # 前端服务 (nginx + Vue 3 静态资源)
  nginx:
    image: nginx:alpine
    container_name: nginx
    ports:
      - "80:80"
    volumes:
      - ./frontend/dist:/usr/share/nginx/html
      - ./nginx.conf:/etc/nginx/nginx.conf
    depends_on:
      - springboot
    networks:
      - frontend

  # MySQL 服务
  mysql:
    image: mysql:8
    container_name: mysql
    environment:
      MYSQL_ROOT_PASSWORD: rootpassword
      MYSQL_DATABASE: dbname
    ports:
      - "3306:3306"
    networks:
      - backend

  # Redis 服务
  redis:
    image: redis:alpine
    container_name: redis
    ports:
      - "6379:6379"
    networks:
      - backend

networks:
  backend:
    driver: bridge
  frontend:
    driver: bridge

解释：

• springboot 服务：构建 Spring Boot 应用的 Docker 容器，配置了环境变量连接 MySQL 和 Redis。

• nginx 服务：负责提供前端静态资源和反向代理请求到后端 Spring Boot 服务。

• mysql 服务：运行 MySQL 数据库。

• redis 服务：运行 Redis 缓存服务。

• networks 定义了 backend 和 frontend 两个网络，用于不同服务之间的通信。

5. 构建并启动服务

使用 docker-compose 启动所有服务。

1. 构建项目：

在前端项目目录中执行以下命令，确保前端的 dist/ 目录已经生成。

npm run build   # 或 yarn build

1. 启动服务：

在 docker-compose.yml 所在目录下运行以下命令：

docker-compose up --build

1. 检查服务状态：

启动后，你可以访问 http://localhost 来查看前端应用。前端页面会通过 nginx 提供，并通过 nginx 反向代理请求到后端 Spring Boot 服务。

6. 查看日志和调试

如果你需要查看容器的日志，可以使用以下命令：

docker-compose logs -f

这将会显示所有服务的实时日志，帮助你调试和查看服务是否正常运行。

7. 停止服务

当你不再需要运行这些服务时，可以通过以下命令停止并删除容器：

docker-compose down