### SpringBoot 和 Vue 前后端分离项目的 Docker 部署最佳实践 #### 1. 准备工作 在开始之前，确保已经安装了必要的工具和环境。可以通过以下命令安装 `docker` 和 `docker-compose`[^2]: ```bash sudo yum install -y docker sudo systemctl start docker sudo curl -L https://get.daocloud.io/docker/compose/releases/download/1.25.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose sudo chmod +x /usr/local/bin/docker-compose ``` #### 2. 构建前端 Vue 应用的 Docker 镜像 创建一个名为 `Dockerfile.frontend` 的文件用于构建 Vue 前端应用的镜像。以下是示例内容： ```dockerfile # 使用官方 Node.js 镜像作为基础镜像 FROM node:14 as build-stage # 设置工作目录 WORKDIR /app # 复制 package.json 和 package-lock.json 到容器中 COPY package*.json ./ # 安装依赖 RUN npm install # 将本地代码复制到容器中 COPY . . # 执行构建命令 RUN npm run build # 创建最终运行时镜像 FROM nginx:alpine # 删除默认的 Nginx 页面 RUN rm -rf /usr/share/nginx/html/* # 将构建好的静态资源拷贝到 Nginx 中 COPY --from=build-stage /app/dist /usr/share/nginx/html # 暴露 HTTP 端口 EXPOSE 80 # 启动 Nginx CMD ["nginx", "-g", "daemon off;"] ``` 执行以下命令构建前端镜像[^4]: ```bash docker build -f Dockerfile.frontend -t vue . ``` #### 3. 构建后端 Spring Boot 应用的 Docker 镜像 创建一个名为 `Dockerfile.backend` 的文件用于构建 Spring Boot 后端应用的镜像。以下是示例内容： ```dockerfile # 使用官方 OpenJDK 镜像作为基础镜像 FROM openjdk:8-jdk-alpine # 设置工作目录 WORKDIR /app # 将 JAR 包复制到容器中 COPY target/springboot-app.jar app.jar # 暴露应用程序的端口 EXPOSE 8080 # 运行 Spring Boot 应用程序 ENTRYPOINT ["java", "-jar", "/app/app.jar"] ``` 执行以下命令构建后端镜像[^4]: ```bash mvn clean package -DskipTests docker build -f Dockerfile.backend -t springboot . ``` #### 4. 编写 Docker Compose 文件 创建一个名为 `docker-compose.yml` 的文件，用于定义整个系统的容器配置。以下是示例内容： ```yaml version: '3' services: db: image: mysql:5.7 container_name: mysql-container restart: always environment: MYSQL_ROOT_PASSWORD: rootpassword MYSQL_DATABASE: examdb ports: - "3306:3306" volumes: - ./data/mysql:/var/lib/mysql backend: image: springboot container_name: springboot-container depends_on: - db ports: - "8080:8080" environment: SPRING_DATASOURCE_URL: jdbc:mysql://db:3306/examdb?useSSL=false&serverTimezone=UTC SPRING_DATASOURCE_USERNAME: root SPRING_DATASource_PASSWORD: rootpassword frontend: image: vue container_name: vue-container ports: - "80:80" depends_on: - backend ``` 启动所有服务： ```bash docker-compose up -d ``` #### 5. 测试部署结果 访问浏览器中的 URL 来验证部署是否成功。例如： - 访问前端页面：http://localhost/ - 调试后端接口：http://localhost:8080/api/test (假设存在 `/api/test` 接口) --- ###