新手入门｜Docker部署前后端项目全流程（附命令+避坑）

在开发过程中，很多新手会遇到「本地能跑、部署就崩」的问题——要么是环境依赖不匹配，要么是配置繁琐出错，要么是端口冲突搞崩服务。而Docker的出现，完美解决了「环境一致性」这个部署痛点，通过容器化打包，让应用和依赖一起迁移，实现「一次构建、到处运行」。

本文专为新手打造，避开复杂理论，聚焦实操落地，以「SpringBoot后端+Vue前端」为例，手把手教你从服务器准备、Docker安装，到项目打包、容器部署、访问验证的全流程，所有命令均实测可用，复制粘贴就能操作，同时整理了新手最常踩的坑，帮你少走弯路。

适合人群：后端开发、前端开发、运维新手，无需深厚的运维基础，只要会基本的Linux命令和项目打包，就能跟着完成部署。

一、部署前准备（必看，避免踩坑）

1.1 环境准备

• 服务器：推荐阿里云/腾讯云轻量应用服务器（Linux系统，CentOS 7/8均可，新手建议2核4G及以上，避免内存不足）；

• 本地环境：已完成前后端项目开发（后端SpringBoot可正常打包成Jar包，前端Vue可正常打包成dist静态资源）；

• 工具：Xshell（连接服务器）、Xftp（上传文件，可选，也可用命令行上传）；

• 核心工具：Docker（容器化工具，统一环境）、Docker Compose（简化多容器部署，如后端+数据库）。

大家可以试试雨云云服务器，新用户可以免费使用或者用积分免费兑换云服务器！另外积分也可以用来兑换实物奖励！ 雨云专属注册通道

1.2 核心概念铺垫（极简版）

无需深入理解原理，记住3个关键概念即可上手：

• 镜像（Image）：相当于「应用安装包」，包含了应用运行所需的所有依赖（如JDK、Python、配置文件等），可从Docker Hub下载，也可自定义构建；

• 容器（Container）：镜像的运行实例，相当于「启动后的应用进程」，每个容器相互隔离，互不影响，可随时启动、停止、删除；

• Docker Compose：用于管理多个容器，比如同时启动后端服务、MySQL数据库、Nginx服务器，无需逐个启动，一键完成部署。

1.3 前置注意事项

1. 服务器需开放对应端口（如80端口、8080端口、3306端口），在云服务器控制台「安全组」中添加规则；

2. 本地项目打包前，需修改配置文件（如后端数据库地址、前端接口地址），适配服务器环境；

3. 全程使用Linux命令行操作，建议复制命令后，根据自己的项目名称、端口进行修改，避免直接照搬出错。

二、第一步：服务器配置与Docker安装

这一步是基础，所有后续操作都基于Docker，新手严格按照命令执行即可，无需修改。

2.1 连接服务器

打开Xshell，输入服务器IP、用户名（默认root）、密码，连接成功后，进入命令行界面（出现[root@xxx ~]即表示连接成功）。

2.2 安装Docker（CentOS系统）

依次执行以下命令，每执行一条等待完成，不要跳过步骤：

# 1. 卸载旧版本Docker（若有，无则忽略）
yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-engine

# 2. 安装必要的依赖
yum install -y yum-utils device-mapper-persistent-data lvm2

# 3. 设置Docker镜像源（阿里云源，加速下载）
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

# 4. 安装Docker CE（社区版，免费）
yum install -y docker-ce docker-ce-cli containerd.io

# 5. 启动Docker并设置开机自启（避免服务器重启后Docker失效）
systemctl start docker
systemctl enable docker

# 6. 验证Docker是否安装成功（出现Docker版本信息即成功）
docker --version

2.3 安装Docker Compose

# 下载Docker Compose（版本可自行替换，这里用2.20.2稳定版）
curl -L "https://github.com/docker/compose/releases/download/v2.20.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

# 赋予执行权限
chmod +x /usr/local/bin/docker-compose

# 验证安装成功（出现版本信息即成功）
docker-compose --version

若下载Docker Compose速度较慢，可替换为国内镜像：

curl -L "https://mirrors.aliyun.com/docker-toolbox/linux/compose/v2.20.2/docker-compose-KaTeX parse error: Can't use function '\(' in math mode at position 1: \̲(̲uname \-s\)\-(uname -m)" -o /usr/local/bin/docker-compose

三、第二步：项目打包（本地操作）

部署前需将本地项目打包成「可部署产物」，后端打包成Jar包，前端打包成dist静态资源包，这一步需确保本地项目能正常运行，避免打包后出现问题。

3.1 后端项目打包（SpringBoot）

• 1. 打开IDEA，修改后端配置文件（application-prod.yml），将数据库地址、端口等改为服务器环境（比如数据库地址改为localhost，端口改为8080）；

• 2. 点击右侧Maven → Lifecycle → package，等待打包完成；

• 3. 打包成功后，在项目target目录下，找到「xxx.jar」文件（如demo-0.0.1-SNAPSHOT.jar），这就是后端部署的核心文件。

3.2 前端项目打包（Vue）

• 1. 打开VS Code，修改前端接口地址（如axios请求的baseURL），改为「http://服务器IP:8080」（后端接口地址）；

• 2. 打开终端，输入命令 npm run build，等待打包完成；

• 3. 打包成功后，项目根目录会生成「dist」文件夹，里面包含index.html和静态资源，这就是前端部署的核心文件。

第三步：项目部署（服务器操作，核心步骤）

这一步是重点，我们将通过Docker Compose，同时部署「后端服务、MySQL数据库、Nginx服务器」，实现前后端联动，步骤清晰，新手可逐步执行。

3.1 上传项目文件到服务器

1. 在服务器上创建项目目录（规范管理，避免文件混乱）：

# 创建项目根目录
mkdir -p /home/project/demo
# 进入目录
cd /home/project/demo

2. 上传文件：

• 用Xftp连接服务器，进入/home/project/demo目录，上传后端Jar包（xxx.jar）和前端dist文件夹；

• 若没有Xftp，可使用命令行上传（本地终端执行，需替换路径和服务器IP）：

# 上传后端Jar包（本地路径替换为自己的Jar包路径）
scp /本地路径/demo-0.0.1-SNAPSHOT.jar root@服务器IP:/home/project/demo
# 上传前端dist文件夹
scp -r /本地路径/dist root@服务器IP:/home/project/demo

3.2 创建Docker相关配置文件

在/home/project/demo目录下，创建3个核心文件（文件名固定，不可修改），可使用vim命令创建，也可本地创建后上传。

3.2.1 创建Dockerfile（后端镜像构建配置）

# 基础镜像（JDK 1.8，适配SpringBoot）
FROM openjdk:8-jdk-alpine
# 设置工作目录
WORKDIR /app
# 复制后端Jar包到工作目录（替换为自己的Jar包名称）
COPY demo-0.0.1-SNAPSHOT.jar /app/demo.jar
# 暴露后端端口（与后端配置文件端口一致，如8080）
EXPOSE 8080
# 容器启动命令（启动后端服务）
ENTRYPOINT ["java", "-jar", "demo.jar"]

3.2.2 创建nginx.conf（Nginx配置，处理前端静态资源和反向代理）

server {
    # 监听80端口（前端访问端口，需在安全组开放）
    listen 80;
    # 服务器IP或域名（新手填服务器公网IP即可）
    server_name 服务器公网IP;

    # 前端静态资源配置（指向dist文件夹）
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        # 解决Vue History模式刷新404问题（关键）
        try_files $uri $uri/ /index.html;
    }

    # 后端接口反向代理（将/api请求转发到后端服务）
    location /api {
        proxy_pass http://backend:8080/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;
    }
}

3.2.3 创建docker-compose.yml（核心配置，管理所有容器）

version: '3.8'
services:
  # 后端服务
  backend:
    # 构建后端镜像（基于当前目录的Dockerfile）
    build: .
    # 容器名称
    container_name: demo-backend
    # 端口映射（宿主机8080端口 → 容器8080端口）
    ports:
      - "8080:8080"
    # 依赖数据库，确保数据库先启动
    depends_on:
      - mysql
    # 重启策略（容器异常退出时自动重启）
    restart: always

  # MySQL数据库
  mysql:
    # 从Docker Hub拉取MySQL 8.0镜像
    image: mysql:8.0
    container_name: demo-mysql
    ports:
      - "3306:3306"
    # 环境变量（设置数据库root密码、数据库名称）
    environment:
      MYSQL_ROOT_PASSWORD: 123456  # 替换为自己的密码
      MYSQL_DATABASE: demo_db       # 替换为自己的数据库名称
    # 数据持久化（避免容器删除后数据丢失）
    volumes:
      - mysql-data:/var/lib/mysql
    restart: always

  # Nginx服务器（处理前端和反向代理）
  nginx:
    image: nginx:1.20.2
    container_name: demo-nginx
    ports:
      - "80:80"
    # 挂载配置文件和前端静态资源
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
      - ./dist:/usr/share/nginx/html
    # 依赖后端服务
    depends_on:
      - backend
    restart: always

# 数据卷（持久化MySQL数据）
volumes:
  mysql-data:

3.3 启动部署（一键部署）

确保所有文件都在/home/project/demo目录下，执行以下命令，启动所有容器：

# 进入项目目录（若已在目录中可跳过）
cd /home/project/demo
# 启动容器（后台运行，首次启动会下载镜像，耐心等待）
docker-compose up -d

3.4 查看部署状态（验证是否成功）

# 查看所有容器运行状态（STATUS为Up即表示正常运行）
docker-compose ps

# 查看后端服务日志（若后端启动失败，可通过日志排查问题）
docker-compose logs -f backend

# 查看Nginx日志（若前端无法访问，可查看日志）
docker-compose logs -f nginx

四、第四步：访问验证（部署成功与否，一看便知）

部署完成后，通过浏览器访问，验证前后端是否正常联动：

1. 前端访问：打开浏览器，输入「http://服务器公网IP」（80端口可省略），若能正常显示前端页面，说明前端部署成功；

2. 后端接口访问：输入「http://服务器公网IP:8080/api/xxx」（替换为自己的后端接口），若能返回正常数据，说明后端部署成功；

3. 前后端联动：在前端页面操作（如登录、查询数据），若能正常请求后端接口并显示数据，说明整个部署流程成功。

五、常用操作（后续维护必备）

部署完成后，后续可能需要重启服务、更新项目，以下是常用命令，直接复制使用：

# 1. 进入项目目录
cd /home/project/demo

# 2. 重启所有容器（如修改配置后）
docker-compose restart

# 3. 停止所有容器（不删除容器和数据）
docker-compose stop

# 4. 停止并删除所有容器、镜像（彻底重置，谨慎使用）
docker-compose down --rmi all

# 5. 更新后端项目（替换Jar包后，重启后端容器）
# 先停止后端容器
docker-compose stop backend
# 替换Jar包（上传新的Jar包覆盖旧的）
# 重启后端容器
docker-compose start backend

# 6. 更新前端项目（替换dist文件夹后，重启Nginx容器）
docker-compose stop nginx
# 替换dist文件夹
docker-compose start nginx

六、新手必避的5个坑（实测踩坑总结）

坑1：服务器安全组未开放端口 → 解决：在云服务器控制台，开放80、8080、3306端口，否则无法访问；

坑2：Jar包名称与Dockerfile中不一致 → 解决：确保Dockerfile中COPY的Jar包名称，和上传的Jar包名称完全一致；

坑3：前端接口地址错误 → 解决：前端打包前，将接口地址改为服务器IP+后端端口，避免用localhost；

坑4：MySQL密码或数据库名称配置错误 → 解决：检查docker-compose.yml中的MySQL环境变量，与后端配置文件中的数据库配置一致；

坑5：服务器内存不足 → 解决：新手建议服务器2核4G及以上，若内存不足，可停止无用容器，或升级服务器配置。

七、总结

本文通过Docker+Docker Compose，实现了前后端项目的一站式部署，核心优势在于「环境统一、配置简单、部署高效」，避免了传统部署中环境依赖不匹配的问题。

对于新手来说，无需深入学习Docker底层原理，只要严格按照步骤执行，复制命令并根据自己的项目修改，就能完成部署。如果部署过程中遇到问题，可查看容器日志排查，或在评论区留言，我会及时回复。

后续会更新「自动化部署」「服务器监控」等进阶内容，关注我，解锁更多部署技巧！

✨ 创作不易，点赞+收藏，避免下次找不到～

（注：文档部分内容可能由 AI 生成）