尧图网站建设 免费方案咨询
ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

首页/资讯中心/资讯详情

Docker Compose部署.NET与Vue全栈应用实践

发布时间：2026/10/31 11:41:54 尧图网站建设
Docker Compose部署.NET与Vue全栈应用实践

1. 项目背景与核心挑战

在现代化Web应用开发中，前后端分离架构已成为主流选择。最近我在一个企业级项目中遇到了这样的需求：需要同时部署多个.NET后端API服务和多个Vue前端Web应用，并且要支持多种数据库的灵活扩展。经过反复实践，我总结出了一套基于Docker Compose的完整解决方案，这里将详细记录整个过程。

这个方案主要解决了以下几个核心问题：

  • 多个.NET API服务之间的端口隔离与通信
  • 多个Vue应用的静态资源部署与路由处理
  • Nginx作为反向代理的统一入口配置
  • 多种数据库(MySQL, MongoDB等)的容器化集成
  • 开发、测试、生产环境的一致性问题

提示：这套方案特别适合中小型团队快速搭建微服务架构，避免了传统部署方式中环境配置复杂、依赖管理困难等问题。

2. 环境准备与基础配置

2.1 系统要求与工具安装

首先确保你的开发环境满足以下基本要求：

  • Docker Engine 20.10+
  • Docker Compose 2.0+
  • .NET 8 SDK
  • Node.js 16+ (用于Vue开发)
  • 推荐使用Linux或WSL2环境(Windows下)

安装Docker Compose的最新版本：

# 对于Linux系统 sudo curl -L "https://github.com/docker/compose/releases/download/v2.23.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose sudo chmod +x /usr/local/bin/docker-compose

2.2 项目结构设计

合理的项目结构是成功部署的基础。我采用的目录结构如下：

project-root/ ├── docker-compose.yml # 主配置文件 ├── nginx/ │ └── nginx.conf # Nginx配置 ├── api-service1/ # 第一个.NET API服务 │ ├── Dockerfile │ └── ... ├── api-service2/ # 第二个.NET API服务 │ ├── Dockerfile │ └── ... ├── web-app1/ # 第一个Vue应用 │ ├── Dockerfile │ └── ... ├── web-app2/ # 第二个Vue应用 │ ├── Dockerfile │ └── ... └── databases/ # 数据库相关配置 ├── mysql/ └── mongodb/

3. .NET API服务的容器化

3.1 编写Dockerfile

对于.NET 8 API服务，典型的Dockerfile如下：

FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build WORKDIR /src COPY . . RUN dotnet restore RUN dotnet publish -c Release -o /app FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS runtime WORKDIR /app COPY --from=build /app . ENV ASPNETCORE_URLS=http://+:5000 EXPOSE 5000 ENTRYPOINT ["dotnet", "YourApiService.dll"]

3.2 多服务配置要点

当有多个API服务时，需要注意：

  1. 每个服务使用不同的内部端口(如5000,5001等)
  2. 在docker-compose.yml中为每个服务配置独立的网络别名
  3. 环境变量前缀要区分不同服务

示例配置片段：

services: api-service1: build: ./api-service1 ports: - "5000:5000" networks: - app-network environment: - ConnectionStrings__Default=Server=mysql;Database=db1;Uid=user;Pwd=password api-service2: build: ./api-service2 ports: - "5001:5000" networks: - app-network environment: - ConnectionStrings__Default=Server=mysql;Database=db2;Uid=user;Pwd=password

4. Vue应用的容器化部署

4.1 Vue应用的Dockerfile

Vue应用的Dockerfile通常分为构建阶段和运行阶段：

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

4.2 多应用路由处理

当有多个Vue应用时，Nginx配置是关键。以下是处理两个Vue应用的Nginx配置示例：

server { listen 80; location /app1 { alias /usr/share/nginx/html/app1; try_files $uri $uri/ /app1/index.html; } location /app2 { alias /usr/share/nginx/html/app2; try_files $uri $uri/ /app2/index.html; } location /api/service1 { proxy_pass http://api-service1:5000; } location /api/service2 { proxy_pass http://api-service2:5001; } }

5. 数据库容器化与扩展

5.1 MySQL数据库配置

在docker-compose.yml中添加MySQL服务：

services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: rootpassword MYSQL_DATABASE: app_db MYSQL_USER: app_user MYSQL_PASSWORD: userpassword volumes: - mysql-data:/var/lib/mysql networks: - app-network healthcheck: test: ["CMD", "mysqladmin", "ping", "-h", "localhost"] interval: 5s timeout: 5s retries: 5 volumes: mysql-data:

5.2 MongoDB集成

如果需要添加MongoDB支持：

services: mongodb: image: mongo:6.0 environment: MONGO_INITDB_ROOT_USERNAME: root MONGO_INITDB_ROOT_PASSWORD: example volumes: - mongodb-data:/data/db networks: - app-network ports: - "27017:27017" volumes: mongodb-data:

6. 完整的docker-compose.yml示例

以下是整合了所有组件的完整配置示例：

version: '3.8' services: # API服务 api-service1: build: ./api-service1 ports: - "5000:5000" networks: - app-network depends_on: mysql: condition: service_healthy environment: - ConnectionStrings__Default=Server=mysql;Database=db1;Uid=user;Pwd=password api-service2: build: ./api-service2 ports: - "5001:5000" networks: - app-network depends_on: mongodb: condition: service_started environment: - MongoDB__ConnectionString=mongodb://root:example@mongodb:27017 # Web应用 web-app1: build: ./web-app1 networks: - app-network depends_on: - api-service1 web-app2: build: ./web-app2 networks: - app-network depends_on: - api-service2 # 反向代理 nginx: image: nginx:alpine ports: - "80:80" - "443:443" volumes: - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf - ./web-app1/dist:/usr/share/nginx/html/app1 - ./web-app2/dist:/usr/share/nginx/html/app2 networks: - app-network depends_on: - web-app1 - web-app2 # 数据库服务 mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: rootpassword MYSQL_DATABASE: app_db MYSQL_USER: app_user MYSQL_PASSWORD: userpassword volumes: - mysql-data:/var/lib/mysql networks: - app-network healthcheck: test: ["CMD", "mysqladmin", "ping", "-h", "localhost"] interval: 5s timeout: 5s retries: 5 mongodb: image: mongo:6.0 environment: MONGO_INITDB_ROOT_USERNAME: root MONGO_INITDB_ROOT_PASSWORD: example volumes: - mongodb-data:/data/db networks: - app-network volumes: mysql-data: mongodb-data: networks: app-network: driver: bridge

7. 部署与运维实践

7.1 启动与停止服务

启动所有服务：

docker-compose up -d --build

停止服务并清理：

docker-compose down -v

7.2 常见问题排查

  1. 端口冲突问题：

    • 使用docker ps查看已占用的端口
    • 修改docker-compose.yml中的端口映射

  2. 容器启动顺序问题：

    • 使用depends_on和健康检查确保依赖服务就绪
    • 在应用代码中添加连接重试逻辑

  3. Nginx配置错误：

    • 检查Nginx日志：docker logs <nginx-container-id>
    • 使用nginx -t测试配置语法

  4. 数据库连接问题：

    • 确保使用容器名称而非localhost连接
    • 检查数据库容器的健康状态

7.3 性能优化建议

  1. 资源限制：

    services: api-service1: deploy: resources: limits: cpus: '0.5' memory: 512M

  2. 多阶段构建优化：

    • 使用.dockerignore文件排除不必要的文件
    • 利用构建缓存加速构建过程

  3. 日志管理：

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

8. 实际应用场景扩展

8.1 CI/CD集成

可以将此方案集成到CI/CD流程中：

  1. 在GitHub Actions或GitLab CI中配置自动构建
  2. 使用环境变量区分不同环境的配置
  3. 自动化测试后部署到服务器

8.2 多环境配置

通过环境变量和多个compose文件支持不同环境：

# 开发环境 docker-compose -f docker-compose.yml -f docker-compose.dev.yml up -d # 生产环境 docker-compose -f docker-compose.yml -f docker-compose.prod.yml up -d

8.3 监控与日志

添加Prometheus和Grafana监控：

services: prometheus: image: prom/prometheus ports: - "9090:9090" volumes: - ./prometheus.yml:/etc/prometheus/prometheus.yml networks: - app-network grafana: image: grafana/grafana ports: - "3000:3000" networks: - app-network

这套方案在实际项目中运行稳定，特别是在需要频繁部署更新和扩展服务的场景下，Docker Compose提供的声明式配置大大简化了运维工作。通过合理的网络规划和Nginx配置，多个前后端服务可以无缝协作，而数据库的容器化则确保了数据持久化和环境一致性。

网站建设 视觉设计 SEO优化
返回列表