Docker部署前后端分离的项目_docker部署前后端分离项目-CSDN博客

本文链接：https://blog.csdn.net/2301_77157123/article/details/147027017

本文将介绍如何把一个前后端分离的项目部署到Docker中。

使用Docker部署的好处有很多，比如在传统部署模式下，开发、测试、生产等不同环境可能存在配置差异，导致应用在某个环境正常运行，在另一个环境却出错。Docker 通过容器化技术，将应用程序及其依赖项打包在容器内，只要使用相同的 Docker 镜像，就能确保应用在各环境都运行在一致的环境配置下，避免因环境差异产生的问题。比如开发团队开发的 Web 应用，在本地开发环境运行正常，部署到测试或生产环境时，不会因操作系统、软件库版本不同而出错。

好啦，直接进入正题，在进行部署之前，先创建以下目录结构

project/
├── docker-compose.yml # Docker Compose主配置文件
├── frontend/ # 前端项目目录
│ ├── dist/ # 前端构建产物（HTML/CSS/JS等）
│ ├── default.conf # Nginx等Web服务器配置文件
│ └── Dockerfile # 前端镜像构建文件
├── backend/ # 后端项目目录
│ ├── Dockerfile # 后端镜像构建文件
│ └── SpringBoot.jar # SpringBoot可执行jar包
└── mysql/ # 数据库相关目录
└── init/ # 数据库初始化脚本目录
└── data.sql # SQL初始化脚本

一、frontend文件夹说明

1.打包前端文件，在前端的根目录下，执行以下命令，将打包之后的dist文件夹放到frontend文件夹下

npm run build

2.编写default.conf文件

server {
    listen       80; #根据实际需求改写
    server_name  localhost; #根据实际需求改写
    
    charset utf-8;
    
    # 添加这些响应头
    add_header Content-Type "text/html; charset=utf-8" always;
    
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    
    location /api/ {
        proxy_pass http://backend:9090/;
        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;
        
        # 添加这些响应头
        add_header Content-Type "application/json; charset=utf-8" always;
    }
    
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

3.编写Dockerfile文件

FROM nginx:stable-alpine

# 设置环境变量确保UTF-8编码
ENV LANG=C.UTF-8
ENV LC_ALL=C.UTF-8

# 复制构建的静态文件到nginx目录
COPY dist/ /usr/share/nginx/html/

# 复制自定义nginx配置
COPY default.conf /etc/nginx/conf.d/default.conf

EXPOSE 80 #和之前的端口保持一致

CMD ["nginx", "-g", "daemon off;"]

二、backend文件夹说明

1. 编写Dockerfile文件

FROM eclipse-temurin:21-jdk 

LABEL maintainer="xxx"

# 设置语言环境
ENV LANG=C.UTF-8
ENV LC_ALL=C.UTF-8
ENV TZ=Asia/Shanghai

# 设置工作目录
WORKDIR /app

# 复制 JAR 文件到容器中
COPY SpringBoot.jar /app/data.jar

# 暴露端口
EXPOSE 9090

# 启动 Spring Boot 应用，添加字符编码参数
ENTRYPOINT ["java", "-Dfile.encoding=UTF-8", "-Dsun.jnu.encoding=UTF-8", "-Dspring.config.additional-location=/app/system.properties", "-jar", "/app/data.jar"]

2.SpringBoot.jar说明

SpringBoot.jar为项目后端打包之后生成的jar包。记得修改MySQL数据库名称为后边docker-compose.yml文件中数据库的名，此处我的为mysql

三、mysql文件夹说明

1.将数据库转储成.sql文件，放在init文件夹下

四、docker-compose.yml文件说明

services:
  frontend:
    image: nginx:latest
    ports:
      - "5173:80" #5173为最终通过网页端访问接口的端口
    volumes:
      - ./frontend/dist:/usr/share/nginx/html
      - ./frontend/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      backend:
        condition: service_healthy
    networks:
      demo_net:
        ipv4_address: 172.23.0.5

  backend:
    build: ./backend/
    ports:
      - "9090:9090"  #为后端实际运行端口
    volumes:
      - ./files:/app/files 
      - ./backend/system.properties:/app/system.properties
    environment:
      TZ: 'Asia/Shanghai'
      LANG: 'C.UTF-8'
      JAVA_OPTS: '-Dspring.config.additional-location=/app/system.properties'
    healthcheck:
      test: ["CMD", "sh", "-c", "curl -f http://localhost:9090 || exit 1"]
      interval: 15s
      timeout: 10s
      start_period: 40s
    depends_on:
      redis:
        condition: service_healthy
      mysql:
        condition: service_healthy
    networks:
      demo_net:
        ipv4_address: 172.23.0.6

  redis:
    image: redis:6.0.8
    ports:
      - "6380:6379"
    volumes:
      - ./redis/data:/data
    healthcheck:
      test: ["CMD", "redis-cli", "ping"]
      interval: 5s
      timeout: 5s
    networks:
      demo_net:
        ipv4_address: 172.23.0.4

  mysql:
    image: mysql:5.7
    ports:
      - "3307:3306"
    volumes:
      - ./mysql/db:/var/lib/mysql
      - ./mysql/init:/docker-entrypoint-initdb.d
    healthcheck:
      test: ["CMD-SHELL", "mysqladmin ping -h localhost -u root -p123456 --silent"]
      interval: 5s
      timeout: 10s
      retries: 10
      start_period: 30s  # 给 MySQL 足够的启动时间
    environment:
      MYSQL_ROOT_PASSWORD: '123456'
      MYSQL_DATABASE: 'data'
      TZ: 'Asia/Shanghai'
    command: 
      - "--character-set-server=utf8mb4"
      - "--collation-server=utf8mb4_general_ci"
    networks:
      demo_net:
        ipv4_address: 172.23.0.3

networks:
  demo_net:
    driver: bridge
    ipam:
      driver: default
      config:
        - subnet: 172.23.0.0/24
          gateway: 172.23.0.1