felixchen1998/web-watcher-check

WebWatcher 镜像文档

镜像概述和主要用途

WebWatcher 是一个用于捕获网页变化并通知用户的微服务应用。它通过定时截图网页、比较页面差异，并在检测到变化时通过邮件通知用户，实现网页内容的实时监控。应用采用微服务架构，结合多种编程语言和云服务构建，提供用户配置管理、网页监控和变化通知等核心功能。

核心功能和特性

技术架构

• 部署于 AWS API Gateway、IBM Cloud Kubernetes Service、IBM COS（云对象存储）和 IBM Cloudant DB
• 前端使用 React 框架结合 IBM Carbon Design 组件库
• 采用微服务架构和 API 网关设计模式
• 实现 JWT（访问和刷新令牌）认证、Bcrypt 加密、Cookies 和 CORS 跨域支持
• 包含 4 个 Python 服务、3 个 JavaScript 服务和 1 个 Go 定时任务脚本

核心能力

• 网页全屏幕截图（基于 Puppeteer）
• 图像差异比较（使用 OpenCV2 和 Scikit-image）
• 云对象存储（IBM COS）用于文件管理
• 用户和监控配置管理（基于 IBM Cloudant NoSQL 数据库）
• 邮件通知功能（通过 SMTP 和 Gmail 账户）
• 定时任务检查网页变化

待办事项

• 重构通知服务以简化部署（考虑迁移至 AWS）
• 优化 Python 配置服务的性能问题
• 解决 Python 比较服务的内存占用过高问题（考虑迁移至 Go）
• 配置 IBM API Gateway CORS（此前尝试未成功）以降低 AWS 费用
• 移除令牌服务，将所有认证逻辑整合至网关
• 添加 Swagger 文档
• 实现 GraphQL 接口
• 增强日志系统
• 开发测试套件
• 使用 Alpine 基础镜像减小镜像体积

经验总结

• 日志系统的重要性
• JWT（访问和刷新令牌）、Bcrypt、Cookies 和 CORS 的实践经验
• React 在频繁渲染场景下表现优异，https://github.com/felixjchen/web-watcher/issues/8
• Puppeteer 支持全屏幕截图，而 Selenium 不支持
• Go 语言的 goroutines 比 Python 线程更易于使用
• Go 语言的 defer 关键字在文件删除等场景中非常实用
• 微服务架构支持无缝替换服务组件
• 微服务架构允许混合使用不同编程语言

服务端点（过时）

cloud_object_storage

• Docker 镜像：https://hub.docker.com/repository/docker/felixchen1998/web-watcher-cloud-object-storage

• 功能：上传和下载文件至 IBM 云对象存储（COS）

• 依赖要求：

  • Python 3.7
  • IBM COS 服务凭证（需在 src/cloud_object_storage/secrets.py 中配置）
  • 名为 web-watcher-files 的存储桶

• 本地运行方法：

  bash
  cd src/cloud_object_storage
  pip install -r requirements.txt
  mkdir files
  # 在 secrets.py 中配置服务凭证
  python app.py
  

• API 端点：

  功能	方法	URL	请求体	请求体类型	响应类型
  上传文件 F 至 COS	POST	[***]	{"file": F}	Form	JSON
  从 COS 下载文件 F	GET	[***]{F}	-	-	File
  删除 COS 中的文件 F	DELETE	[***]{F}	-	-	JSON

compare

• Docker 镜像：https://hub.docker.com/repository/docker/felixchen1998/web-watcher-compare

• 功能：使用 OpenCV2 和 Scikit-image 比较两张图像的差异

• 依赖要求：

  • Python 3.7

• 本地运行方法：

  bash
  cd src/compare
  pip install -r requirements.txt
  mkdir files
  python app.py
  

• API 端点：

  功能	方法	URL	请求体	请求体类型	响应类型
  获取图像 P 和 Q 的结构相似性指数	GET	[***]	{"file_old": P, "file_new": Q}	Form	JSON
  为图像 P 和 Q 的差异区域创建边界框	GET	[***]	{"file_old": P, "file_new": Q}	Form	File

screenshot

• Docker 镜像：https://hub.docker.com/repository/docker/felixchen1998/web-watcher-screenshot

• 功能：使用 Puppeteer 对整个网页进行截图

• 依赖要求：

  • Node.js 12.16.3
  • npm 6.14.5

• 本地运行方法：

  bash
  cd src/screenshot
  npm install
  node app.js
  

• API 端点：

  功能	方法	URL	请求体	请求体类型	响应类型
  对 URL U 进行截图	GET	[***]	{"url": U}	JSON	File

configure

• Docker 镜像：https://hub.docker.com/repository/docker/felixchen1998/web-watcher-configure

• 功能：读取和写入配置至 IBM Cloudant NoSQL 数据库

• 依赖要求：

  • Python 3.7
  • IBM Cloudant DB 服务凭证（需在 src/configure/secrets.py 中配置）
  • 名为 configuration 的数据库

• 本地运行方法：

  bash
  cd src/configure
  pip install -r requirements.txt
  mkdir files
  # 在 secrets.py 中配置服务凭证
  python app.py
  

• API 端点：

  功能	方法	URL	请求体	请求体类型	响应类型
  列出所有用户	GET	[***]	-	-	JSON
  创建新用户（名称 N，*** E）	POST	[***]	{"name": N, "email": E}	JSON	JSON
  获取用户 ID 为 UID 的用户信息	GET	[***]{UID}	-	-	JSON
  更新用户 ID 为 UID 的用户信息	PUT	[***]{UID}	{"name": N, "email": E}	JSON	JSON
  删除用户 ID 为 UID 的用户	DELETE	[***]{UID}	-	-	JSON
  列出所有监控项	GET	[***]	-	-	JSON
  为用户 UID 创建监控项（URL U，检查频率 F 秒）	POST	[***]	{"user_id": UID, "url": U, "frequency": F}	JSON	JSON
  获取监控项 ID 为 WID 的监控信息	GET	[***]{WID}	-	-	JSON
  更新监控项 ID 为 WID 的监控信息	PUT	[***]{WID}	{"user_id": UID, "url": U, "frequency": F}	JSON	JSON
  删除监控项 ID 为 WID 的监控	DELETE	[***]{WID}	-	-	JSON

notify

• Docker 镜像：https://hub.docker.com/repository/docker/felixchen1998/web-watcher-notify

• 功能：使用 smtplib 和 Gmail 账户通过邮件通知用户

• 依赖要求：

  • Python 3.7

• 本地运行方法：

  bash
  cd src/notify
  pip install -r requirements.txt
  mkdir files
  python app.py
  

• API 端点：

  功能	方法	URL	请求体	请求体类型	响应类型
  通知*** E 关于 URL U 的变化（包含差异图像 D）	POST	[***]	{"email": E, "url": U, "file": D}	FORM	JSON

frontend

• Docker 镜像：https://hub.docker.com/repository/docker/felixchen1998/web-watcher-frontend
• 功能：使用 Google Material Design 的 UI 界面，用于添加/删除用户和监控项
• 依赖要求：
  • Node.js 12.16.3
  • npm 6.14.5
  • 配置服务（configure service）
• 本地运行方法：

  bash
  cd src/frontend
  npm install
  node app.js
  

• 访问地址：[***]

定时任务

check

• Docker 镜像：https://hub.docker.com/repository/docker/felixchen1998/web-watcher-check
• 功能：为每个监控项创建线程，检查网页是否发生变化，变化时生成差异图像并通知用户
• 依赖要求：
  • Go 1.14
  • cloud-object-storage 服务
  • compare 服务
  • screenshot 服务
  • configure 服务
  • notify 服务