首页 > 网站技巧 > 服务器 > 云和虚拟化 > docker > Docker部署前端后端项目

使用Docker部署前端和后端项目的完整教程

2026-02-03 09:49:10 作者：黄鱼晏

使用Docker部署项目可以实现快速、一致和可重复的部署流程,下面这篇文章主要介绍了使用Docker部署前端和后端项目的完整教程,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

在现代软件开发流程中，容器化部署已成为主流方案，Docker凭借轻量、隔离、可移植的特性，能大幅简化前后端项目的部署复杂度。本文将结合实际项目经验，详细讲解如何使用Docker部署包含前端（Vue）、后端（SpringBoot）、PostgreSQL数据库、Redis缓存的完整项目，涵盖环境配置、镜像构建、容器编排全流程。

docker.aityp.com（渡渡鸟镜像同步站）是一款实用的Docker镜像加速工具。它100%同步gcr.io、docker.io等多个官方镜像源，涵盖8000+docker.io镜像及各类常用镜像。无需复杂配置，就能解决官方镜像拉取慢的问题，让镜像获取更高效，为容器化部署节省时间。

一、项目架构与环境准备

1. 项目架构说明

前端：Vue3项目，通过Nginx提供静态资源服务并反向代理后端接口；
后端：SpringBoot 3.x项目，提供业务接口，依赖PostgreSQL数据库和Redis缓存；
中间件：PostgreSQL 16（数据持久化）、Redis 7.0.10（缓存）；
网络：Docker自定义桥接网络，实现容器间互通；
存储：Docker数据卷，保障数据持久化。

2. 环境前置要求

服务器：Linux系统（本文以CentOS7 为例）；
软件：已安装Docker、Docker Compose；
目录结构：

/opt/graph-parent/
├── frontend/                # 前端目录（含dist构建产物、Dockerfile、nginx.conf）
├── backend/                 # 后端目录（含jar包、Dockerfile、application.yml）
├── docker-compose.yml       # 容器编排文件
└── logs/                    # 日志目录（可选）

二、后端项目容器化部署

1. 编写后端Dockerfile

后端基于OpenJDK 17构建，Dockerfile放置于/opt/graph-parent/backend/目录：

# 选择华为云镜像源的OpenJDK 17 slim版本（精简且稳定）
FROM swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/openjdk:17-slim

# 设置时区，避免时间不一致问题
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone

# 定义工作目录
WORKDIR /app

# 复制后端jar包到容器内（需确保jar包名称与实际一致）
COPY graph-api.jar app.jar

# 暴露后端服务端口
EXPOSE 8088

# 启动命令（指定生产环境配置，避免端口重复配置）
ENTRYPOINT ["java", "-jar", "app.jar", "--spring.profiles.active=prod"]

2. 后端配置文件优化

修改application.yml，重点配置数据库和Redis连接（容器间通过服务名互通）：

server:
  port: 8088  # 后端服务端口

spring:
  # 数据库配置
  datasource:
    url: jdbc:postgresql://graph-postgres:5432/graph_db  # 容器名+端口+库名
    username: postgres
    password: 123456
    driver-class-name: org.postgresql.Driver
  # Redis配置
  redis:
    host: graph-redis  # Redis容器名
    port: 6379
    timeout: 5000ms

# MyBatis-Plus配置（按需添加）
mybatis-plus:
  mapper-locations: classpath:mapper/**/*.xml
  type-aliases-package: com.graph.api.entity

3. 构建后端镜像

cd /opt/graph-parent/backend/
# 构建镜像（--no-cache避免缓存干扰）
docker build --no-cache -t graph-api:latest .

三、前端项目容器化部署

1. 编写前端Dockerfile

前端基于Nginx Alpine镜像构建，Dockerfile放置于/opt/graph-parent/frontend/目录：

# 选择华为云镜像源的Nginx Alpine版本（轻量）
FROM swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/nginx:alpine

# 清空Nginx默认静态文件
RUN rm -rf /usr/share/nginx/html/*

# 复制前端构建产物（dist目录）到Nginx静态资源目录
COPY dist/ /usr/share/nginx/html/

# 复制自定义Nginx配置文件，覆盖默认配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露80端口
EXPOSE 80

# 启动Nginx（前台运行，保证容器不退出）
CMD ["nginx", "-g", "daemon off;"]

2. 配置Nginx反向代理

编写nginx.conf，解决前端路由刷新404问题，并代理后端接口：

server {
    listen 80;
    server_name localhost;
    charset utf-8;

    # 前端静态文件根目录
    root /usr/share/nginx/html;
    index index.html index.htm;

    # 解决Vue路由刷新404
    location / {
        try_files $uri $uri/ /index.html;
        add_header Cache-Control "no-cache, no-store, must-revalidate";
    }

    # 反向代理后端接口（容器名+端口）
    location /api/ {
        proxy_pass http://graph-api:8088/api/;
        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_connect_timeout 30s;
        proxy_read_timeout 30s;
    }

    # 日志配置（容器内路径，通过数据卷挂载到主机）
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;
}

3. 构建前端镜像

cd /opt/graph-parent/frontend/
# 构建镜像
docker build --no-cache -t graph-web-nginx:latest .

四、Docker Compose统一编排

1. 编写docker-compose.yml

通过Docker Compose管理所有服务，实现一键启动/停止，文件放置于/opt/graph-parent/目录：

version: '3.8'

# 自定义网络（容器间互通）
networks:
  graph-network:
    name: graph-network
    driver: bridge

# 数据卷（持久化存储）
volumes:
  postgres-data:  # PostgreSQL数据卷
  redis-data:     # Redis数据卷
  backend-logs:   # 后端日志卷
  nginx-logs:     # Nginx日志卷

# 服务定义
services:
  # PostgreSQL服务
  postgres:
    container_name: graph-postgres
    image: postgres:16
    restart: always
    environment:
      POSTGRES_PASSWORD: 123456
      POSTGRES_USER: postgres
      POSTGRES_DB: graph_db
      TZ: Asia/Shanghai
      POSTGRES_INITDB_ARGS: "--encoding=UTF8 --lc-collate=C --lc-ctype=C"
    ports:
      - "5432:5432"
    volumes:
      - postgres-data:/var/lib/postgresql/data
    networks:
      - graph-network
    # 健康检查（确保数据库启动完成后再启动后端）
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U postgres -d graph_db"]
      interval: 10s
      timeout: 5s
      retries: 5

  # Redis服务
  redis:
    container_name: graph-redis
    image: redis:7.0.10
    restart: always
    environment:
      TZ: Asia/Shanghai
    ports:
      - "6379:6379"
    command:
      - redis-server
      - --appendonly yes
      - --bind 0.0.0.0
      - --protected-mode no
    volumes:
      - redis-data:/data
    networks:
      - graph-network
    healthcheck:
      test: ["CMD", "redis-cli", "ping"]
      interval: 10s
      timeout: 5s
      retries: 5

  # 后端服务
  graph-api:
    container_name: graph-api
    image: graph-api:latest
    restart: always
    environment:
      TZ: Asia/Shanghai
    ports:
      - "8088:8088"
    volumes:
      - backend-logs:/app/logs
      - /opt/graph-parent/backend/config/application.yml:/app/config/application.yml  # 挂载外部配置
    networks:
      - graph-network
    # 依赖PostgreSQL和Redis健康启动
    depends_on:
      postgres:
        condition: service_healthy
      redis:
        condition: service_healthy

  # 前端服务
  graph-web:
    container_name: graph-web
    image: graph-web-nginx:latest
    restart: always
    environment:
      TZ: Asia/Shanghai
    ports:
      - "80:80"
    volumes:
      - nginx-logs:/var/log/nginx
      # 可选：挂载前端dist目录，无需重建镜像即可更新前端
      # - /opt/graph-parent/frontend/dist:/usr/share/nginx/html
    networks:
      - graph-network
    # 依赖后端启动后再启动
    depends_on:
      graph-api:
        condition: service_started

2. 启动所有服务

cd /opt/graph-parent/
# 后台启动所有服务
docker-compose up -d

# 查看服务状态（确保所有服务为Up状态）
docker-compose ps

# 查看日志（按需排查问题）
docker-compose logs graph-api  # 后端日志
docker-compose logs graph-web  # 前端日志

五、常见问题与解决方案

1. 后端连接数据库报密码认证失败

原因：PostgreSQL容器首次启动时的密码与配置不一致（密码仅首次启动生效）；
解决：删除PostgreSQL数据卷，重新初始化：

docker-compose down
docker volume rm graph-parent_postgres-data
docker-compose up -d postgres

2. 前端无法访问后端接口

原因：Nginx代理配置错误、容器网络不通、后端未启动；
解决：

检查Nginx配置中proxy_pass的后端容器名和端口是否正确；
验证容器网络互通：docker exec -it graph-web telnet graph-api 8088；
确保后端服务正常启动：docker-compose logs graph-api。

3. 容器启动后自动退出

原因：Nginx未前台运行、后端启动命令错误、依赖服务未就绪；
解决：

Nginx启动命令需添加daemon off;；
检查后端启动命令是否正确，避免端口重复配置；
通过depends_on配置服务依赖顺序，添加健康检查。

4. 镜像构建失败（文件找不到）

原因：Dockerfile中COPY指令的源文件路径错误；
解决：确保构建上下文（执行docker build的目录）内包含待复制的文件（如dist、jar包、nginx.conf）。

六、部署验证与维护

1. 访问验证

前端页面：浏览器访问http://服务器IP；
后端接口：访问http://服务器IP:8088/doc.html（按需替换为健康检查接口）；
数据库：docker exec -it graph-postgres psql -U postgres -d graph_db；
Redis：docker exec -it graph-redis redis-cli。

2. 日常维护

停止服务：docker-compose down；
重启服务：docker-compose restart；
更新后端：重新构建镜像后docker-compose up -d graph-api；
更新前端：重新构建镜像后docker-compose up -d graph-web（或挂载dist目录直接替换文件）；
查看日志：docker-compose logs -f 服务名（-f实时查看）。

七、总结

通过Docker+Docker Compose实现前后端项目的容器化部署，不仅能解决环境不一致问题，还能简化部署流程、提高服务可用性。核心要点包括：

合理编写Dockerfile，选择精简镜像减少体积；
利用Docker网络实现容器间互通，优先使用容器名而非IP；
通过数据卷实现数据持久化，避免容器销毁导致数据丢失；
借助Docker Compose统一编排服务，管理依赖关系和启动顺序；
重视配置文件挂载和日志收集，便于问题排查和配置更新。

本文的部署方案经过实际项目验证，适用于中小型前后端分离项目，可根据业务需求扩展（如添加HTTPS、负载均衡等）。

到此这篇关于使用Docker部署前端和后端项目的文章就介绍到这了,更多相关Docker部署前端后端项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！