1. 项目背景与核心挑战在现代化Web应用开发中前后端分离架构已成为主流选择。最近我在一个企业级项目中遇到了这样的需求需要同时部署多个.NET后端API服务和多个Vue前端Web应用并且要支持多种数据库的灵活扩展。经过反复实践我总结出了一套基于Docker Compose的完整解决方案这里将详细记录整个过程。这个方案主要解决了以下几个核心问题多个.NET API服务之间的端口隔离与通信多个Vue应用的静态资源部署与路由处理Nginx作为反向代理的统一入口配置多种数据库(MySQL, MongoDB等)的容器化集成开发、测试、生产环境的一致性问题提示这套方案特别适合中小型团队快速搭建微服务架构避免了传统部署方式中环境配置复杂、依赖管理困难等问题。2. 环境准备与基础配置2.1 系统要求与工具安装首先确保你的开发环境满足以下基本要求Docker Engine 20.10Docker Compose 2.0.NET 8 SDKNode.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-compose2.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 --frombuild /app . ENV ASPNETCORE_URLShttp://:5000 EXPOSE 5000 ENTRYPOINT [dotnet, YourApiService.dll]3.2 多服务配置要点当有多个API服务时需要注意每个服务使用不同的内部端口(如5000,5001等)在docker-compose.yml中为每个服务配置独立的网络别名环境变量前缀要区分不同服务示例配置片段services: api-service1: build: ./api-service1 ports: - 5000:5000 networks: - app-network environment: - ConnectionStrings__DefaultServermysql;Databasedb1;Uiduser;Pwdpassword api-service2: build: ./api-service2 ports: - 5001:5000 networks: - app-network environment: - ConnectionStrings__DefaultServermysql;Databasedb2;Uiduser;Pwdpassword4. Vue应用的容器化部署4.1 Vue应用的DockerfileVue应用的Dockerfile通常分为构建阶段和运行阶段# 构建阶段 FROM node:16 AS build WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build # 运行阶段 FROM nginx:alpine COPY --frombuild /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 804.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__DefaultServermysql;Databasedb1;Uiduser;Pwdpassword api-service2: build: ./api-service2 ports: - 5001:5000 networks: - app-network depends_on: mongodb: condition: service_started environment: - MongoDB__ConnectionStringmongodb://root:examplemongodb: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: bridge7. 部署与运维实践7.1 启动与停止服务启动所有服务docker-compose up -d --build停止服务并清理docker-compose down -v7.2 常见问题排查端口冲突问题使用docker ps查看已占用的端口修改docker-compose.yml中的端口映射容器启动顺序问题使用depends_on和健康检查确保依赖服务就绪在应用代码中添加连接重试逻辑Nginx配置错误检查Nginx日志docker logs nginx-container-id使用nginx -t测试配置语法数据库连接问题确保使用容器名称而非localhost连接检查数据库容器的健康状态7.3 性能优化建议资源限制services: api-service1: deploy: resources: limits: cpus: 0.5 memory: 512M多阶段构建优化使用.dockerignore文件排除不必要的文件利用构建缓存加速构建过程日志管理services: api-service1: logging: driver: json-file options: max-size: 10m max-file: 38. 实际应用场景扩展8.1 CI/CD集成可以将此方案集成到CI/CD流程中在GitHub Actions或GitLab CI中配置自动构建使用环境变量区分不同环境的配置自动化测试后部署到服务器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 -d8.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配置多个前后端服务可以无缝协作而数据库的容器化则确保了数据持久化和环境一致性。 
长河君 · 2026/10/31 11:41:54 · 阅读 1.2k Docker Compose部署.NET与Vue全栈应用实践
1. 项目背景与核心挑战在现代化Web应用开发中前后端分离架构已成为主流选择。最近我在一个企业级项目中遇到了这样的需求需要同时部署多个.NET后端API服务和多个Vue前端Web应用并且要支持多种数据库的灵活扩展。经过反复实践我总结出了一套基于Docker Compose的完整解决方案这里将详细记录整个过程。这个方案主要解决了以下几个核心问题多个.NET API服务之间的端口隔离与通信多个Vue应用的静态资源部署与路由处理Nginx作为反向代理的统一入口配置多种数据库(MySQL, MongoDB等)的容器化集成开发、测试、生产环境的一致性问题提示这套方案特别适合中小型团队快速搭建微服务架构避免了传统部署方式中环境配置复杂、依赖管理困难等问题。2. 环境准备与基础配置2.1 系统要求与工具安装首先确保你的开发环境满足以下基本要求Docker Engine 20.10Docker Compose 2.0.NET 8 SDKNode.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-compose2.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 --frombuild /app . ENV ASPNETCORE_URLShttp://:5000 EXPOSE 5000 ENTRYPOINT [dotnet, YourApiService.dll]3.2 多服务配置要点当有多个API服务时需要注意每个服务使用不同的内部端口(如5000,5001等)在docker-compose.yml中为每个服务配置独立的网络别名环境变量前缀要区分不同服务示例配置片段services: api-service1: build: ./api-service1 ports: - 5000:5000 networks: - app-network environment: - ConnectionStrings__DefaultServermysql;Databasedb1;Uiduser;Pwdpassword api-service2: build: ./api-service2 ports: - 5001:5000 networks: - app-network environment: - ConnectionStrings__DefaultServermysql;Databasedb2;Uiduser;Pwdpassword4. Vue应用的容器化部署4.1 Vue应用的DockerfileVue应用的Dockerfile通常分为构建阶段和运行阶段# 构建阶段 FROM node:16 AS build WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build # 运行阶段 FROM nginx:alpine COPY --frombuild /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 804.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__DefaultServermysql;Databasedb1;Uiduser;Pwdpassword api-service2: build: ./api-service2 ports: - 5001:5000 networks: - app-network depends_on: mongodb: condition: service_started environment: - MongoDB__ConnectionStringmongodb://root:examplemongodb: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: bridge7. 部署与运维实践7.1 启动与停止服务启动所有服务docker-compose up -d --build停止服务并清理docker-compose down -v7.2 常见问题排查端口冲突问题使用docker ps查看已占用的端口修改docker-compose.yml中的端口映射容器启动顺序问题使用depends_on和健康检查确保依赖服务就绪在应用代码中添加连接重试逻辑Nginx配置错误检查Nginx日志docker logs nginx-container-id使用nginx -t测试配置语法数据库连接问题确保使用容器名称而非localhost连接检查数据库容器的健康状态7.3 性能优化建议资源限制services: api-service1: deploy: resources: limits: cpus: 0.5 memory: 512M多阶段构建优化使用.dockerignore文件排除不必要的文件利用构建缓存加速构建过程日志管理services: api-service1: logging: driver: json-file options: max-size: 10m max-file: 38. 实际应用场景扩展8.1 CI/CD集成可以将此方案集成到CI/CD流程中在GitHub Actions或GitLab CI中配置自动构建使用环境变量区分不同环境的配置自动化测试后部署到服务器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 -d8.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配置多个前后端服务可以无缝协作而数据库的容器化则确保了数据持久化和环境一致性。