docker Compose部署springboot+vue前端端分离

下面是完整攻略：

1. 前置条件

在进行 Docker Compose 部署 Spring Boot + Vue 前端后端分离前，需要确保已经具备一下前置条件：

熟悉 Docker 和 Docker Compose 的基本使用方法
已经安装好 Docker 和 Docker Compose 环境
已经有 Spring Boot 和 Vue 的项目代码，并能正常运行

2. 创建 Docker 镜像

首先，需要为 Spring Boot 和 Vue 项目创建相应的 Docker 镜像。假设 Spring Boot 项目的 Dockerfile 和 Vue 项目的 Dockerfile 分别为 Dockerfile.spring 和 Dockerfile.vue，则可使用以下命令在项目根目录下分别创建两个 Docker 镜像：

docker build -t spring-app -f Dockerfile.spring .
docker build -t vue-app -f Dockerfile.vue .

其中，-t 参数指定镜像名称，. 表示当前目录。

3. 创建 Docker Compose 文件

接下来，需要创建 Docker Compose 文件，用于描述 Spring Boot 和 Vue 两个镜像之间的依赖关系和启动顺序。假设 Compose 文件名为 docker-compose.yml，则其内容如下：

version: '3.9'
services:
  spring-app:
    build:
      context: .
      dockerfile: Dockerfile.spring
    ports:
      - "9090:9090"
    depends_on:
      - vue-app
  vue-app:
    build:
      context: .
      dockerfile: Dockerfile.vue
    ports:
      - "8080:8080"

其中，services 下分别定义了 Spring Boot 和 Vue 两个服务，build 部分指定了 Dockerfile 的位置，ports 部分指定了服务的端口映射，depends_on 部分声明了服务之间的依赖关系。

4. 启动 Docker 容器

使用以下命令启动 Docker 容器：

docker-compose up

该命令会自动拉取镜像、创建容器并启动。在 Docker 启动之后，可以在浏览器中访问 http://localhost:8080，即可看到 Vue 的页面。

5. 示例说明

下面分别以 Spring Boot 项目和 Vue 项目为例，讲解如何将其分别打包为 Docker 镜像并使用 Docker Compose 启动。

示例 1：Spring Boot 项目

假设 Spring Boot 项目的 Dockerfile 如下：

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

该 Dockerfile 使用了 openjdk:11-jdk-slim 镜像，并将项目中的 jar 文件拷贝到容器中。为了构建镜像，可以使用以下命令：

docker build -t my-spring-boot-app -f Dockerfile .

其中，my-spring-boot-app 是自定义的镜像名称。

构建成功后，可以通过以下命令启动该容器：

docker run -p 8080:8080 my-spring-boot-app

该命令将容器内部的 8080 端口映射到主机的 8080 端口上。

示例 2：Vue 项目

假设 Vue 项目的 Dockerfile 如下：

# production environment
FROM node:lts-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 8080
CMD ["npm", "run", "serve"]

该 Dockerfile 使用了 node:lts-alpine 镜像，并将 Vue 项目拷贝到容器中，最后运行 npm run build 命令编译 Vue 项目。为了构建镜像，可以使用以下命令：

docker build -t my-vue-app -f Dockerfile .

其中，my-vue-app 是自定义的镜像名称。