前后端分离Docker部署

前后端分离Vue + SpringBoot Dockerfile模板配置

1. Vue Dockerfile配置

# 使用官方 Node.js 作为基础镜像 18替换自己的nodejs版本环境
FROM node:18  

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package*.json ./

# 安装项目依赖
RUN npm install

# 复制项目文件到容器
COPY . .

# 构建项目
RUN npm run build

# 设置环境变量
ENV NODE_ENV=production

# 安装轻量级的 HTTP 服务器（例如 serve）用于托管构建后的静态文件
RUN npm install -g serve

# 暴露端口 8080
EXPOSE 8080

# 启动应用
CMD ["serve", "-s", "dist", "-l", "8080"]

2. SpringBoot Dockerfile

# Docker 镜像构建
FROM maven:3.8.1-jdk-8-slim as builder

# Copy local code to the container image.
WORKDIR /app
COPY pom.xml .
COPY src ./src

# Build a release artifact.
RUN mvn package -DskipTests

# Run the web service on container startup.
CMD ["java","-jar","/app/target/your-project.jar","--spring.profiles.active=prod"]

3. 分别在前后端根目录下运行

docker build -t my-project-app .   # my-project-app 替换成你要构建的镜像名称

4. docker-compose配置

version: '3.8'

services:
  backend-service:                                                    # 自定义
    image: my-project-app-backend                                     # 第三步构建的镜像名称， docker images 查看
    container_name: my-project-app-backend                            # 自定义容器名称
    ports:
      - "8101:8101"                                                   # 端口映射， 第一个端口自定义 ，第二个端口是服务的端口
    restart: always

  vue-frontend:
    image: vue-frontend
    container_name: my-project-app-frontend
    ports:
      - "8080:8080"
    restart: always

5. 运行docker-compose

docker-compose up -d    # 注意，要在docker-compose所在目录下运行