保姆级教程：Docker部署Spring Boot + Vue.js项目完整教程（附Gitee源码）

部署成功结果展示项目源码(带Dockerfile)https://gitee.com/etilic/EnglishLearningAssistant_d前言本文将详细介绍如何使用Docker容器化部署一个前后端分离的项目包括Spring Boot后端和Vue.js前端。通过Docker部署可以实现环境隔离、快速部署和跨平台运行。项目架构后端: Spring Boot MyBatis-Plus MySQL前端: Vue.js Vite部署: Docker Docker Compose NginxEnglishLearningAssistant/ ├── ELABackEnd/ # Spring Boot后端 │ ├── src/ │ │ ├── main/ │ │ │ ├── java/ │ │ │ │ └── com/mrc/multiroundchatdemo/ │ │ │ │ ├── config/ # 配置类 │ │ │ │ ├── controller/ # 控制器 │ │ │ │ ├── mapper/ # 数据访问层 │ │ │ │ ├── models/ # 实体类 │ │ │ │ ├── service/ # 业务逻辑层 │ │ │ │ └── utils/ # 工具类 │ │ │ └── resources/ │ │ │ ├── application.properties │ │ │ └── init.sql │ │ └── test/ │ ├── Dockerfile │ └── pom.xml ├── Frontend/ # Vue3前端 │ ├── src/ │ │ ├── assets/ │ │ ├── components/ │ │ ├── App.vue │ │ └── main.js │ ├── public/ │ ├── Dockerfile │ ├── nginx.conf │ ├── package.json │ └── vite.config.js ├── docker-compose.yml # Docker编排配置 └── README.md环境准备服务器环境Ubuntu/CentOS Linux服务器Docker 20.0Docker Compose 2.0MySQL数据库可选外部或容器内安装Docker和Docker Compose# 安装Dockercurl-fsSLhttps://get.docker.com|bash-sdocker# 启动Docker服务sudosystemctl startdockersudosystemctlenabledocker# 安装Docker Composesudocurl-Lhttps://github.com/docker/compose/releases/download/v2.20.0/docker-compose-$(uname-s)-$(uname-m)-o/usr/local/bin/docker-composesudochmodx /usr/local/bin/docker-compose验证是否安装成功docker--versiondockercompose version安装成功的响应项目配置1. 后端配置修改数据库连接配置编辑application.properties将对应信息换成你自己的配置spring.application.nameMultiRoundChatDemo # 数据库配置 spring.datasource.urljdbc:mysql://YOUR_SERVER_IP:3306/your_database?useUnicodetruecharacterEncodingutf8serverTimezoneGMT%2B8 spring.datasource.usernameyour_username spring.datasource.passwordyour_password spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver # MyBatis-Plus配置 mybatis-plus.mapper-locationsclasspath*:/mapper/**/*.xml mybatis-plus.type-aliases-packagecom.mrc.multiroundchatdemo.models.entities mybatis-plus.configuration.map-underscore-to-camel-casetrue mybatis-plus.configuration.log-implorg.apache.ibatis.logging.stdout.StdOutImpl创建后端Dockerfile在后端项目根目录创建DockerfileFROM maven:3.8.4-openjdk-17-slim AS build WORKDIR /app COPY pom.xml . RUN mvn dependency:go-offline COPY src ./src RUN mvn clean package -DskipTests FROM openjdk:17-jdk-slim WORKDIR /app COPY --frombuild /app/target/MultiRoundChatDemo-0.0.1-SNAPSHOT.jar app.jar EXPOSE 8080 CMD [java, -jar, app.jar]关键点说明使用多阶段构建减小镜像大小第一阶段用Maven构建项目第二阶段只包含运行时环境和JAR包2. 前端配置创建前端Dockerfile在前端项目根目录创建DockerfileFROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN chmod x node_modules/.bin/vite npm run build FROM nginx:alpine COPY --from0 /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/nginx.conf EXPOSE 3000 CMD [nginx, -g, daemon off;]创建Nginx配置在前端项目根目录创建nginx.confevents { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; server { listen 3000; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } 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; proxy_set_header X-Forwarded-Proto $scheme; } } }关键配置说明try_files $uri $uri/ /index.html- 支持Vue Router的History模式proxy_pass http://backend:8080/api/- 将API请求代理到后端服务使用Docker内部服务名backend而不是IP地址3. Docker Compose配置在项目根目录创建docker-compose.ymlservices:backend:build:./ELABackEndports:-8080:8080environment:-SPRING_PROFILES_ACTIVEprodrestart:unless-stoppednetworks:-app-networkfrontend:build:./Frontendports:-3000:3000depends_on:-backendrestart:unless-stoppednetworks:-app-networknetworks:app-network:driver:bridge配置说明depends_on- 确保后端先启动networks- 创建内部网络供服务间通信restart: unless-stopped- 容器异常退出时自动重启部署流程1. 准备数据库-- 创建数据库CREATEDATABASEyour_databaseCHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ci;-- 创建用户并授权CREATEUSERyour_username%IDENTIFIEDBYyour_password;GRANTALLPRIVILEGESONyour_database.*TOyour_username%;FLUSHPRIVILEGES;-- 执行初始化脚本SOURCE/path/to/init.sql;2. 上传项目文件# 将项目上传到服务器scp-ryour-project/ userserver_ip:/path/to/project/或使用ssh上传将文件拖动到ssh工具中对应存放项目的目录下3. 构建和启动服务进入项目目录这里需要把”/path/to/project/“改成你的项目根目录有docker-compose.yml的目录构建并启动所有服务# 进入项目目录cd/path/to/project/# 构建并启动所有服务docker-composeup-d--build成功部署4. 验证部署# 查看服务状态docker-composeps查看日志# 查看日志docker-composelogs-f测试后端API# 测试后端APIcurlhttp://your_server_ip:8080/api/user/login访问前端浏览器打开 http://your_server_ip:3000点击登录发现发送请求成功证明前后端能对上项目部署成功。常见问题及解决方案1. 权限问题问题:sh: vite: Permission denied解决方案:RUN chmod x node_modules/.bin/vite npm run build2. 网络连接问题问题: 前端无法访问后端API解决方案:确保nginx配置中使用Docker服务名http://backend:8080检查docker-compose网络配置确保防火墙开放相应端口3. 数据库连接问题问题: 后端无法连接数据库解决方案:检查数据库服务器是否允许外部连接确认用户权限和密码正确检查防火墙设置4. 构建缓存问题问题: 代码更新后容器没有更新解决方案:# 清理并重新构建docker-composedowndockersystem prune-fdocker-composeup-d--build--force-recreate生产环境优化1. 安全配置# docker-compose.prod.ymlservices:backend:environment:-SPRING_PROFILES_ACTIVEprod-JAVA_OPTS-Xmx512m-Xms256mrestart:alwaysfrontend:restart:always2. 日志管理services:backend:logging:driver:json-fileoptions:max-size:10mmax-file:33. 健康检查services:backend:healthcheck:test:[CMD,curl,-f,http://localhost:8080/actuator/health]interval:30stimeout:10sretries:3常用运维命令# 查看服务状态docker-composeps# 查看实时日志docker-composelogs-f[service_name]# 重启服务docker-composerestart[service_name]# 停止所有服务docker-composedown# 更新并重启docker-composeup-d--build# 进入容器docker-composeexecbackendbashdocker-composeexecfrontendsh# 清理未使用的镜像dockerimage prune-f总结通过Docker容器化部署Spring Boot Vue.js项目具有以下优势环境一致性- 开发、测试、生产环境完全一致快速部署- 一键构建和部署易于扩展- 可以轻松进行水平扩展资源隔离- 不同项目间互不影响版本管理- 可以快速回滚到任意版本掌握Docker部署技能对于现代Web开发来说是必不可少的希望本教程能帮助大家快速上手Docker容器化部署。参考资源Docker官方文档Docker Compose文档Spring Boot Docker指南Vue.js部署指南标签: Docker, Spring Boot, Vue.js, 容器化部署, 前后端分离