企业官网建设流程全解析

1. 项目背景与核心价值

前后端分离架构已经成为现代Web开发的标准实践，但部署环节往往让开发者头疼。传统部署方式需要手动配置Nginx、处理跨域、管理多个服务进程，既耗时又容易出错。我在实际项目中摸索出一套基于Docker Compose的标准化部署方案，能够实现：

• 前端静态资源自动构建与托管
• 后端服务容器化运行
• 数据库服务即开即用
• 反向代理自动配置
• 跨域问题一键解决

这套方案特别适合中小型项目快速上线，也便于团队统一开发环境。下面以典型的Vue+SpringBoot+MySQL技术栈为例，详解实现过程。

2. 环境准备与工具选型

2.1 基础环境要求

• Docker Engine ≥ 20.10.14
• Docker Compose ≥ 2.5.1
• 4GB以上可用内存
• Linux/Windows WSL2/macOS系统

注意：Windows系统建议使用WSL2后端，直接使用Docker Desktop可能存在文件挂载权限问题

2.2 目录结构设计

推荐采用以下标准化结构：

project/ ├── frontend/ # 前端项目 │ ├── Dockerfile │ └── ... # 原有前端代码 ├── backend/ # 后端项目 │ ├── Dockerfile │ └── ... # 原有后端代码 ├── db/ # 数据库初始化脚本 │ └── init.sql └── docker-compose.yml

3. 核心配置文件详解

3.1 Dockerfile配置

前端Dockerfile示例：

# 构建阶段 FROM node:16-alpine as builder WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build # 运行阶段 FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80

后端Dockerfile示例：

FROM openjdk:11-jre-slim WORKDIR /app ARG JAR_FILE=target/*.jar COPY ${JAR_FILE} app.jar EXPOSE 8080 ENTRYPOINT ["java","-jar","app.jar"]

3.2 docker-compose.yml完整配置

version: '3.8' services: frontend: build: context: ./frontend dockerfile: Dockerfile ports: - "80:80" depends_on: - backend networks: - app-network backend: build: context: ./backend dockerfile: Dockerfile environment: - SPRING_DATASOURCE_URL=jdbc:mysql://mysql:3306/app_db?useSSL=false - SPRING_DATASOURCE_USERNAME=root - SPRING_DATASOURCE_PASSWORD=123456 ports: - "8080:8080" depends_on: - mysql networks: - app-network mysql: image: mysql:8.0 environment: - MYSQL_ROOT_PASSWORD=123456 - MYSQL_DATABASE=app_db volumes: - ./db:/docker-entrypoint-initdb.d - mysql_data:/var/lib/mysql networks: - app-network nginx: image: nginx:alpine ports: - "8000:80" volumes: - ./frontend/nginx.conf:/etc/nginx/conf.d/default.conf depends_on: - frontend - backend networks: - app-network networks: app-network: driver: bridge volumes: mysql_data:

4. 关键配置解析与优化

4.1 网络配置策略

使用自定义的app-network实现：

• 容器间通过服务名直接通信
• 自动DNS解析
• 隔离外部网络干扰

实测对比：

4.2 数据库持久化方案

采用named volume实现数据持久化：

volumes: mysql_data:

优势：

• 数据独立于容器生命周期
• 备份方便（docker volume inspect）
• 性能优于bind mount

4.3 资源限制配置建议

生产环境建议添加：

services: backend: deploy: resources: limits: cpus: '1' memory: 1G reservations: memory: 512M

5. 实战部署流程

5.1 初始化步骤

1. 克隆项目代码
2. 安装Docker和Compose
3. 构建镜像：

   docker-compose build

4. 启动服务：

   docker-compose up -d

5.2 服务验证方法

• 前端：curl http://localhost:80
• 后端：curl http://localhost:8080/api/health
• MySQL：docker exec -it project-mysql-1 mysql -uroot -p123456
• Nginx：curl http://localhost:8000

6. 常见问题排查指南

6.1 容器启动失败

现象：docker-compose up报错退出

排查步骤：

1. 查看日志：

   docker-compose logs service_name

2. 检查端口冲突：

   netstat -tulnp | grep 80

3. 验证Dockerfile语法：

   docker build -t test -f Dockerfile .

6.2 跨域问题处理

即使配置了Nginx反向代理，仍可能遇到跨域问题。解决方案：

1. 后端添加CORS配置：

   @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("*"); } }; }

2. Nginx补充配置：

   location /api { proxy_pass http://backend:8080; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' '*'; }

6.3 性能优化实践

1. 多阶段构建：减少最终镜像体积（前端从1.2GB→120MB）
2. 缓存依赖：合理利用Docker层缓存

   COPY package.json . RUN npm install COPY . .

3. 健康检查：添加容器健康监测

   healthcheck: test: ["CMD", "curl", "-f", "http://localhost:8080/actuator/health"] interval: 30s timeout: 10s retries: 3

7. 进阶配置技巧

7.1 环境变量管理

推荐使用.env文件：

MYSQL_ROOT_PASSWORD=complex_password_123 SPRING_PROFILES_ACTIVE=prod

compose文件引用：

environment: - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}

7.2 多环境配置方案

通过override文件实现：

docker-compose -f docker-compose.yml -f docker-compose.prod.yml up

prod.yml示例：

services: backend: environment: - SPRING_PROFILES_ACTIVE=prod deploy: replicas: 3

7.3 日志收集方案

配置json-file日志驱动：

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

查询日志：

docker-compose logs --tail=100 -f

8. 监控与维护

8.1 基础监控命令

• 查看运行状态：

  docker-compose ps

• 资源使用情况：

  docker stats

• 进入容器：

  docker-compose exec backend sh

8.2 备份与恢复

数据库备份：

docker exec project-mysql-1 sh -c 'exec mysqldump -uroot -p"$MYSQL_ROOT_PASSWORD" app_db' > backup.sql

恢复数据：

docker exec -i project-mysql-1 sh -c 'exec mysql -uroot -p"$MYSQL_ROOT_PASSWORD" app_db' < backup.sql

8.3 版本更新流程

1. 拉取最新代码
2. 重建镜像：

   docker-compose build --no-cache

3. 滚动更新：

   docker-compose up -d --force-recreate

经过多个项目的实战检验，这套方案能减少80%的部署时间，特别适合需要快速迭代的项目。我在实施过程中最大的体会是：前期合理的目录结构和网络规划，能为后期维护省去大量麻烦。