4. 环境搭建：Python虚拟环境、Node.js环境、Docker容器化部署准备

说实话，做监控看板最怕什么？

不是代码写不出来，而是环境搞成一团浆糊。我见过太多人，项目还没跑起来，先被依赖冲突搞崩溃了。这一章，咱们就把地基打牢。

4.1 Python虚拟环境：隔离是美德

Python的依赖管理，嗯，懂的都懂。一个项目用Flask 2.0，另一个用Flask 1.0，装在一起就炸了。虚拟环境就是干这个的——每个项目有自己的小世界。

4.1.1 创建虚拟环境

我个人习惯用 venv，Python 3.3+ 自带，不用装额外工具。

# 创建虚拟环境
python3 -m venv venv

# 激活（Linux/Mac）
source venv/bin/activate

# 激活（Windows）
venv\Scripts\activate

# 退出
deactivate

激活后，你会看到终端前面多了个 (venv) 标记。这时候你装的所有包，都只在这个项目里生效。

4.1.2 依赖管理三板斧

我建议用 requirements.txt 来锁定依赖版本。为什么？因为我在项目中遇到过，同事的机器上装了个新版库，结果接口变了，跑了一天才发现。

# 生成依赖清单
pip freeze > requirements.txt

# 从清单安装
pip install -r requirements.txt

看下我们的 requirements.txt 大概长什么样：

flask==2.3.3
requests==2.31.0
psutil==5.9.5
prometheus-client==0.17.1
gunicorn==21.2.0

4.2 Node.js环境：前端依赖的管家

前端这边，Node.js 和 npm 是标配。我们的监控看板前端用 Vue 3，后端用 Python，各管各的依赖。

4.2.1 安装 Node.js

我推荐用 nvm（Node Version Manager）来管理 Node 版本。为什么？因为不同项目可能要求不同版本，你想想看，一个用 Node 14，一个用 Node 18，手动切换多麻烦。

# 安装 nvm（Linux/Mac）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

# 安装 Node.js 18 LTS
nvm install 18

# 使用指定版本
nvm use 18

# 验证
node -v
npm -v

4.2.2 初始化前端项目

我们的看板前端，用 Vue 3 + Vite 搭建。初始化命令很简单：

# 创建 Vue 项目
npm create vite@latest frontend -- --template vue

# 进入目录
cd frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev

这里有个小坑：npm install 有时候会卡住。我一般用 npm install --registry=https://registry.npmmirror.com 来加速，国内用户你懂的。

4.3 Docker容器化部署：一次构建，到处运行

环境搭好了，但怎么部署到服务器上？总不能每台机器都手动装一遍吧。Docker 就是干这个的——把你的应用和所有依赖打包成一个镜像，到哪都能跑。

4.3.1 Dockerfile 编写

我们的监控看板分两部分：Python 后端和 Vue 前端。先看后端的 Dockerfile：

# 后端 Dockerfile
FROM python:3.11-slim

WORKDIR /app

# 先复制依赖文件，利用缓存
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# 再复制源码
COPY . .

# 暴露端口
EXPOSE 5000

# 启动命令
CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:5000", "app:app"]

前端的 Dockerfile 稍微不同，需要先构建静态文件：

# 前端 Dockerfile
FROM node:18-alpine AS build

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 用 Nginx 托管静态文件
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

4.3.2 Docker Compose：一键启动全家桶

有了 Dockerfile，还得把它们串起来。Docker Compose 就是干这个的——定义多个容器怎么协同工作。

# docker-compose.yml
version: '3.8'

services:
  backend:
    build: ./backend
    ports:
      - "5000:5000"
    environment:
      - REDIS_HOST=redis
    depends_on:
      - redis

  frontend:
    build: ./frontend
    ports:
      - "80:80"
    depends_on:
      - backend

  redis:
    image: redis:7-alpine
    ports:
      - "6379:6379"

看到没？一个文件定义了三个服务：后端、前端、Redis。启动只需要一行命令：

docker-compose up -d

4.4 知识体系总览

说了这么多，咱们用一张图把整个环境搭建的逻辑串起来：

4.5 环境验证清单

环境搭好了，怎么确认没问题？我列了个清单，照着跑一遍就行：

检查项	命令	预期结果
Python 版本	python3 --version	Python 3.8+
虚拟环境	pip list	只有基础包
Node 版本	node -v	v18.x
npm 版本	npm -v	9.x
Docker 版本	docker --version	24.x
Docker Compose	docker-compose --version	2.x

好了，环境搭建这块就到这。记住一个原则：能自动化的别手动，能容器化的别裸跑。下一章咱们开始写代码，把监控数据真正跑起来。