水利数字孪生实验五-星语课程网

返回
顶部

修改密码

* 旧密码：

* 新密码：

* 确认新密码：

首页 > 实验作业 > 数字孪生水利平台设计 > 正文

水利数字孪生实验五

2026-06-20 09:33:06

来源：本站编辑

阅读量：

### 5\. 后端Dockerfile（Dockerfile\.api 生产服务）### 4\. Nginx生产反向代理配置（nginx\.conf）# 转发/api请求至后端容器# 实验五 Docker容器化部署水利地图系统COPY --from=build /app/dist /usr/share/nginx/html### 4\. 后端生产服务原理- ./nginx.conf# Flask后端水位API服务COPY nginx.conf /etc/nginx/conf.d/defaul

# 实验五 Docker容器化部署水利地图系统

## 一、实验难度

★★★★

## 二、实验目的

1. 掌握Vue前端多阶段Docker镜像构建方法、Flask后端Gunicorn生产级镜像构建流程。

2. 理解Vite本地开发代理与Nginx生产反向代理的分层设计原理，实现一套前端代码适配开发、部署双环境。

3. 熟练使用docker\-compose实现前后端容器编排，完成水利地图系统一键容器化部署。

4. 掌握Docker网络互通、配置挂载、数据挂载原理，实现服务解耦与轻量化部署。

5. 完成水利数字孪生地图系统从本地联调到容器化上线的完整业务闭环。

## 三、实验要求

1. 完成前后端代码改造，统一接口请求方式，适配开发与生产代理场景。

2. 编写前端、后端Docker镜像构建文件，实现项目容器化打包。

3. 编写Nginx反向代理配置，解决生产环境接口跨域与路由404问题。

4. 通过docker\-compose统一编排前后端服务，实现一键启动、关停整套系统。

5. 代码提交至Gitee仓库，仓库权限设置为公开，将仓库地址写入实验报告。

6. 完整留存实验配置代码、命令执行截图、系统运行效果图、容器运行日志。

参考：
[前端示例代码](https://gitee.com/izxj/ol-vue-demo.git "前端示例代码")
[后端示例代码](https://gitee.com/izxj/water-server.git "后端示例代码")
[在线演示](https://dal.jmhui.com.cn/ "在线演示")
## 四、实验前置条件

1. 已完成前期实验，实现Vue\+OpenLayers地图渲染、Flask后端接口开发、前后端本地联调功能正常。

2. 本地已安装Docker、Docker Compose环境，可正常执行镜像构建与容器运行命令。

3. 项目完整文件齐全：Vue前端源码、Flask后端main\.py、water\_stations\.json站点数据、requirements\.txt依赖文件。

## 五、实验原理

### 1\. 双环境代理适配原理

为实现一套前端代码兼容本地开发和Docker容器部署，采用分层代理方案：本地开发依托Vite内置代理转发接口请求，解决浏览器跨域问题；生产部署依托Nginx反向代理实现接口转发，剥离统一接口前缀，避免接口路径重复404报错。

### 2\. Docker多阶段构建原理

前端采用多阶段镜像构建，第一阶段基于Node镜像完成项目打包，生成静态资源文件；第二阶段基于轻量化Nginx镜像托管静态页面，舍弃打包依赖与冗余环境，大幅缩减镜像体积。

### 3\. 容器网络与挂载原理

通过docker\-compose自定义网桥，实现前后端容器内网互通，依托服务名完成跨容器请求，兼容Windows、Linux、Mac全平台Docker环境；通过数据卷挂载Nginx配置、站点数据文件，实现配置、数据与容器解耦，修改无需重新构建镜像。

### 4\. 后端生产服务原理

摒弃Flask内置开发服务器，使用Gunicorn多进程WSGI服务启动后端项目，消除开发环境运行警告，提升服务稳定性，满足简易生产部署规范。

## 六、实验核心代码与配置

### 1\. 前端代码改造（统一接口前缀）

取消前端硬编码IP地址，统一使用相对路径`/api`作为接口前缀，适配双环境代理转发。

```js
// 全局统一接口前缀，本地Vite代理、容器Nginx代理共用
const API_BASE = "/api"

// 加载站点列表
async function loadStationData() {
  const res = await fetch(`${API_BASE}/stations`)
  const result = await res.json()
  const stationList = result.data
  const source = vectorLayer.getSource()
  stationList.forEach(station => {
    const point = new Feature({
      geometry: new Point(fromLonLat([station.lon, station.lat]))
    })
    point.set('id', station.id)
    point.set('name', station.name)
    point.setStyle(new Style({
      image: new Icon({
        src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMTc3ZjAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgM0E4IDggMCAwIDEgOCAxM2MwIDQtOCA5IDQgOSA1IDAgMCAxIDQgTDEyIDMuWiIvPjxyZWN0IHdpZHRoPSI0IiBoZWlnaHQ9IjQiIHg9IjEwIiB5PSIxMCIgcng9IjIiLz48L3N2Zz4=',
        scale: 1.2
      }),
      text: new Text({
        text: station.name,
        offsetY: -25,
        font: '12px sans-serif',
        fill: new Fill({ color: '#000' }),
        backgroundFill: new Fill({ color: 'rgba(255,255,255,0.9)' })
      })
    }))
    source.addFeature(point)
  })
}

// 查询单站水位详情
async function queryStationDetail(id, coordinate) {
  const res = await fetch(`${API_BASE}/station/${id}`)
  const result = await res.json()
  if (result.code === 200) {
    const data = result.data
    popupHtml.value = `
      <div style="padding:4px 0;"><b>${data.name}</b></div>
      <div>实时水位：${data.level} m</div>
      <div>监测时间：${data.time}</div>
    `
    popupOverlay.setPosition(coordinate)
  }
}
```

### 2\. Vite本地代理配置（vite\.config\.js）

配置本地开发跨域代理，自动剥离`/api`前缀，转发至本地后端服务，避免接口404报错。

```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:5000',
        changeOrigin: true,
        // 剥离/api前缀转发至后端根路径，避免/api/api重复404
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
})
```

### 3\. 前端Dockerfile（多阶段轻量化构建）

```dockerfile
# 阶段1：构建阶段，打包Vue静态资源
FROM node:22-alpine AS build
WORKDIR /app
# 配置国内npm镜像加速，解决网络超时问题
RUN npm config set registry https://registry.npmmirror.com
# 复制依赖文件并精准安装
COPY package.json package-lock.json ./
RUN npm ci
# 复制全部前端源码
COPY . .
# 生产环境打包
RUN npm run build

# 阶段2：运行阶段，Nginx托管静态页面
FROM nginx:alpine
# 删除Nginx默认配置
RUN rm /etc/nginx/conf.d/default.conf
# 挂载自定义反向代理配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 导入打包后的静态资源
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
# 前台运行Nginx，防止容器退出
CMD ["nginx", "-g", "daemon off;"]
```

### 4\. Nginx生产反向代理配置（nginx\.conf）

```nginx
server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

# 转发/api请求至后端容器，剥离/api前缀，解决路径重复404
    location /api/ {
        proxy_pass http://water-station-api:5000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

# 适配Vue Router history模式，解决页面刷新404问题
    location / {
        try_files $uri $uri/ /index.html;
    }

# 静态资源缓存优化，提升访问速度
    location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf)$ {
        expires 7d;
        add_header Cache-Control "public, max-age=604800";
    }

# 隐藏Nginx版本信息，提升安全性
    server_tokens off;
}
```

### 5\. 后端Dockerfile（Dockerfile\.api 生产服务）

```dockerfile
FROM python:3.10-slim
WORKDIR /app
# 复制依赖配置文件
COPY requirements.txt .
# 无缓存安装依赖，包含生产服务gunicorn
RUN pip install --no-cache-dir -r requirements.txt
# 复制后端全部源码
COPY . .
EXPOSE 5000
# Gunicorn多进程启动WSGI服务，替代Flask开发服务
CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:5000", "main:app"]
```

### 6\. 后端依赖配置（requirements\.txt）

```txt
flask
gunicorn
```

### 7\. 容器编排配置（docker\-compose\.yml）

```yaml
version: '3.8'
# 自定义网桥，实现前后端容器内网互通
networks:
  map-net:
    driver: bridge

services:
  # Vue前端地图服务
  ol-vue-map:
    build:
      context: .
      dockerfile: Dockerfile
    image: ol-vue-demo:1.0
    container_name: ol-vue-map-demo
    restart: always
    ports:
      - "18080:80"
    # 挂载Nginx配置，动态修改无需重构镜像
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
    networks:
      - map-net
    # 等待后端启动后再启动前端
    depends_on:
      - water-station-api

# Flask后端水位API服务
  water-station-api:
    build:
      context: .
      dockerfile: Dockerfile.api
    image: 3gi/water-server:1.0
    container_name: water-flask-api
    ports:
      - "5000:5000"
    # 挂载站点数据文件，数据持久化、可动态修改
    volumes:
      - ./water_stations.json:/app/water_stations.json
    restart: always
    environment:
      - FLASK_DEBUG=0
    networks:
      - map-net
```

### 8\. 镜像忽略配置（\.dockerignore）

```
# 依赖目录
node_modules
node_modules/**
npm-debug.log
yarn-error.log
yarn.lock

# 本地构建产物
dist
build

# 版本控制文件
.git
.gitignore
.github

# 编辑器缓存文件
.vscode
.idea
*.swp
*.swo
.DS_Store

# 日志、临时文件
logs
tmp
temp
*.log

# Docker自身配置文件
Dockerfile
Dockerfile.api
.dockerignore
docker-compose.yml
```

## 七、实验操作步骤

### 步骤1：本地联调验证

1. 启动后端服务：Windows系统使用 `python run.py`，Linux/Mac系统使用 `gunicorn -w 2 -b 0.0.0.0:5000 --reload main:app`。

2. 启动前端开发服务：执行 `npm run dev`。

3. 验证功能：地图正常加载、水位站点点位渲染成功、点击点位可正常弹窗展示水位与时间数据，无跨域、404报错。

### 步骤2：构建Docker镜像

在项目根目录终端执行命令，自动构建前后端生产镜像：

```bash
docker-compose build
```

### 步骤3：一键启动容器服务

后台静默启动整套前后端系统：

```bash
docker-compose up -d
```

### 步骤4：验证容器运行状态

1. 查看容器运行状态：`docker-compose ps`，确认前后端容器均正常运行。

2. 查看实时运行日志：`docker-compose logs -f`，排查启动报错、接口转发异常。

### 步骤5：访问部署系统

1. 前端地图系统：`http://localhost:18080` 或 `http://本机IP:18080`

2. 后端接口测试：`http://localhost:5000/api/stations`

### 步骤6：系统启停与重置

```bash
# 停止容器，保留镜像和数据卷
docker-compose down

# 停止容器并删除所有镜像，用于重新构建部署
docker-compose down --rmi all
```

## 八、实验结果与分析

### 1\. 实验成果

1. 完成前后端代码标准化改造，实现一套代码兼容本地开发、容器生产双环境。

2. 成功编写前后端Docker构建配置，实现项目轻量化、生产级镜像打包。

3. 通过docker\-compose完成服务编排，实现水利地图系统一键容器化部署，服务稳定运行。

4. 解决接口404、跨域、路由刷新失效、Flask开发服务警告等一系列问题。

5. 实现配置、数据文件挂载，无需重构镜像即可动态修改配置与站点数据。

### 2\. 核心问题解决分析

1. **接口路径重复404问题**：通过Vite和Nginx双层代理统一剥离`/api`前缀，彻底解决`/api/api`路径错误。

2. **跨域问题**：本地依托Vite代理、生产依托Nginx代理，全程无需后端开启跨域配置。

3. **容器网络不通问题**：自定义Docker网桥，通过服务名内网互通，规避不同系统Docker网络兼容问题。

4. **后端服务不规范问题**：替换Flask内置开发服务为Gunicorn多进程服务，符合生产部署规范。

## 九、实验总结

本次实验完成了水利地图系统的完整容器化改造与部署，熟练掌握了Docker镜像构建、容器编排、反向代理、数据挂载等核心技术。通过分层代理设计，实现了前后端项目开发与生产环境的统一适配，解决了传统部署中环境不一致、配置固化、部署繁琐等问题。

同时，摒弃了开发级服务，采用生产级WSGI服务部署后端，提升了系统的稳定性和规范性。整套方案实现了轻量化、可复用、易维护的部署模式，为水利数字孪生项目的线上落地部署提供了完整的实践参考，完成了前后端一体化容器化部署的业务闭环。

上一篇：水利数字孪生实验二

下一篇：没有了

已有0条评论

0/150

提交

热门评论

查看更多评论

目 录

目录