企业官网建设流程全解析

部署成功结果展示：

项目源码(带Dockerfile)：

https://gitee.com/etilic/EnglishLearningAssistant_d

前言

本文将详细介绍如何使用Docker容器化部署一个前后端分离的项目，包括Spring Boot后端和Vue.js前端。通过Docker部署可以实现环境隔离、快速部署和跨平台运行。

项目架构

• 后端: Spring Boot + MyBatis-Plus + MySQL
• 前端: Vue.js + Vite
• 部署: Docker + Docker Compose + Nginx

EnglishLearningAssistant/ ├── 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.0+
• Docker Compose 2.0+
• MySQL数据库（可选外部或容器内）

安装Docker和Docker Compose

# 安装Dockercurl-fsSLhttps://get.docker.com|bash-sdocker# 启动Docker服务sudosystemctl startdockersudosystemctlenabledocker# 安装Docker Composesudocurl-L"https://github.com/docker/compose/releases/download/v2.20.0/docker-compose-$(uname-s)-$(uname-m)"-o/usr/local/bin/docker-composesudochmod+x /usr/local/bin/docker-compose

验证是否安装成功

docker--versiondockercompose version

安装成功的响应：

项目配置

1. 后端配置

修改数据库连接配置

编辑application.properties：
（将对应信息换成你自己的配置）

spring.application.name=MultiRoundChatDemo # 数据库配置 spring.datasource.url=jdbc:mysql://YOUR_SERVER_IP:3306/your_database?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8 spring.datasource.username=your_username spring.datasource.password=your_password spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver # MyBatis-Plus配置 mybatis-plus.mapper-locations=classpath*:/mapper/**/*.xml mybatis-plus.type-aliases-package=com.mrc.multiroundchatdemo.models.entities mybatis-plus.configuration.map-underscore-to-camel-case=true mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

创建后端Dockerfile

在后端项目根目录创建Dockerfile：

FROM 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 --from=build /app/target/MultiRoundChatDemo-0.0.1-SNAPSHOT.jar app.jar EXPOSE 8080 CMD ["java", "-jar", "app.jar"]

关键点说明：

• 使用多阶段构建减小镜像大小
• 第一阶段用Maven构建项目
• 第二阶段只包含运行时环境和JAR包

2. 前端配置

创建前端Dockerfile

在前端项目根目录创建Dockerfile：

FROM 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 --from=0 /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/nginx.conf EXPOSE 3000 CMD ["nginx", "-g", "daemon off;"]

创建Nginx配置

在前端项目根目录创建nginx.conf：

events { 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.yml：

services:backend:build:./ELABackEndports:-"8080:8080"environment:-SPRING_PROFILES_ACTIVE=prodrestart:unless-stoppednetworks:-app-networkfrontend:build:./Frontendports:-"3000:3000"depends_on:-backendrestart:unless-stoppednetworks:-app-networknetworks:app-network:driver:bridge

配置说明：

• depends_on- 确保后端先启动
• networks- 创建内部网络供服务间通信
• restart: unless-stopped- 容器异常退出时自动重启

部署流程

1. 准备数据库

-- 创建数据库CREATEDATABASEyour_databaseCHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ci;-- 创建用户并授权CREATEUSER'your_username'@'%'IDENTIFIEDBY'your_password';GRANTALLPRIVILEGESONyour_database.*TO'your_username'@'%';FLUSHPRIVILEGES;-- 执行初始化脚本SOURCE/path/to/init.sql;

2. 上传项目文件

# 将项目上传到服务器scp-ryour-project/ user@server_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 build

2. 网络连接问题

问题: 前端无法访问后端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_ACTIVE=prod-JAVA_OPTS=-Xmx512m-Xms256mrestart:alwaysfrontend:restart:always

2. 日志管理

services:backend:logging:driver:"json-file"options:max-size:"10m"max-file:"3"

3. 健康检查

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项目具有以下优势：

1. 环境一致性- 开发、测试、生产环境完全一致
2. 快速部署- 一键构建和部署
3. 易于扩展- 可以轻松进行水平扩展
4. 资源隔离- 不同项目间互不影响
5. 版本管理- 可以快速回滚到任意版本

掌握Docker部署技能对于现代Web开发来说是必不可少的，希望本教程能帮助大家快速上手Docker容器化部署。

参考资源

• Docker官方文档
• Docker Compose文档
• Spring Boot Docker指南
• Vue.js部署指南

标签: Docker, Spring Boot, Vue.js, 容器化部署, 前后端分离