如何构建 MediaCrawler WebUI 前端并由 API 服务器直接提供访问【免费下载链接】MediaCrawler小红书笔记 | 评论爬虫、抖音视频 | 评论爬虫、快手视频 | 评论爬虫、B 站视频 评论爬虫、微博帖子 评论爬虫、百度贴吧帖子 百度贴吧评论回复爬虫 | 知乎问答文章评论爬虫项目地址: https://gitcode.com/GitHub_Trending/me/MediaCrawlerMediaCrawler 除了命令行方式还提供一个基于 Web 的可视化操作界面WebUI可以在页面上配置爬虫参数、查看运行日志和预览数据。默认的调试方式是前端 Vite 开发服务器加后端 API 两个进程分开跑但如果你希望只有一个进程对外提供服务就需要先把webui/下的前端构建成静态产物让 API 服务器直接把这些文件发给浏览器。这篇文章描述的就是这条部署路径构建前端产物到api/webui/然后只启动 API 服务器访问http://localhost:8080就能打开 WebUI 页面。准备条件按 README.md 的前置依赖要求构建和启动这条链路需要三样东西uv项目推荐的 Python 包管理工具后端命令都通过uv run执行。终端执行uv --version能正常显示版本号即安装成功。Node.js前端构建npm install、npm run build依赖它README 要求版本 16.0.0。项目 Python 依赖在项目根目录执行一次保证 Python 版本和相关依赖包一致cd MediaCrawler uv sync浏览器驱动和 Chrome CDP 配置只在真正运行爬虫时才有意义连接已有 Chrome 的 CDP 模式无需安装浏览器驱动。对于把 WebUI 部署起来这件事本身上面三项就够了。构建前端到 api/webui/前端工程在 webui/package.json 中定义了构建脚本build: tsc -b vite build其中tsc -b先做 TypeScript 编译检查vite build再产出静态文件。输出目录由 webui/vite.config.ts 指定build: { outDir: ../api/webui, emptyOutDir: true, },即产物落在项目根目录的api/webui/下且每次构建会先清空该目录。所以构建命令是在webui/目录内执行的cd webui npm install npm run build # 产物输出到 api/webui/构建成功后api/webui/下应有index.html及assets/、logos/等静态资源目录。这个目录正是 API 服务器查找前端产物的位置api/main.py 中WEBUI_DIR os.path.join(os.path.dirname(__file__), webui)即api/webui/。启动 API 服务器构建完成后不需要再启动前端进程只启动 API 服务器README.md 给出的命令默认端口 8080uv run uvicorn api.main:app --port 8080 --reload--reload用于本地改动代码时自动重载。api/main.py 的__main__分支还支持另一种等价入口以host0.0.0.0, port8080启动 uvicornuv run python -m api.main服务器启动后做了两件事对应直接提供访问的机制根路径路由GET /会检查api/webui/index.html是否存在存在则直接返回该文件作为前端页面不存在则返回一段 JSON 提示其中包含WebUI not found, please build it first: cd webui npm run build。静态资源挂载api/webui/assets、api/webui/logos分别挂载到/assets、/logosapi/webui整体挂载到/static。这些挂载只在对应目录存在时生效这也是产物必须构建到api/webui/的原因。验证访问结果按顺序做三个检查打开页面浏览器访问http://localhost:8080应看到 WebUI 界面而不是 JSON 文本。如果看到的是带docs: /docs字样的 JSON说明api/webui/index.html不存在回到上一步重新执行npm run build。健康检查api/main.py 提供了GET /api/health接口正常返回{status: ok}可用于脚本化确认 API 服务存活。首次打开时的环境检测前端首次打开会调用GET /api/env/checkapi/main.py。该接口在项目根目录下执行uv run main.py --help超时时间 30 秒命令返回码为 0 时返回success: true并附带前 500 字符的输出返回码非 0 时返回success: false及错误信息截断到前 500 字符命令不存在uv时返回uv command not found提示确保 uv 在系统 PATH 中超过 30 秒未完成则返回Environment check timeout。检测失败时页面提供「跳过检测」入口可以临时跳过README 原文说明。检测失败本身不影响 WebUI 页面打开但它提示你uv环境或爬虫依赖尚未就绪——而 WebUI 发起爬取时后端正是以子进程方式执行uv run python main.py ...见 api/services/crawler_manager.py 的_build_command所以要在页面上实际运行爬虫uv sync这一步不能省。排查与限制端口占用API 服务器固定使用 8080 端口uvicorn 命令参数或python -m api.main的默认值。端口被占用时先确认占用进程再启动本文不展开端口变更配置。静态资源 404/assets、/logos、/static的挂载依赖目录存在。如果api/webui/是手工删过或只部分构建的页面能打开但样式、logo 可能缺失最稳妥的做法是重新完整执行npm run build构建会清空该目录后重写。CORS 与部署模式的关系api/main.py 中配置的 CORS 白名单http://localhost:5173、http://localhost:3000等是为前端开发服务器准备的。生产路径下前端与 API 同源都在 8080不依赖 CORS。可选分支开发调试模式如果你是在频繁修改前端代码README 推荐的开发方式是双进程调试而非每次重新构建# 终端 1启动 API 服务器默认端口 8080 uv run uvicorn api.main:app --port 8080 --reload # 终端 2启动前端开发服务器 cd webui npm install npm run dev # 默认在 5173 端口启动并代理 /api 到 8080webui/vite.config.ts 中server.port为 5173并把/api请求含 WebSocket代理到http://localhost:8080所以开发模式下浏览器访问http://localhost:5173/API 调用透明地转发到后端。这条路径只用于调试交付单一可访问地址时仍应走前文的构建 8080 直出方式。【免费下载链接】MediaCrawler小红书笔记 | 评论爬虫、抖音视频 | 评论爬虫、快手视频 | 评论爬虫、B 站视频 评论爬虫、微博帖子 评论爬虫、百度贴吧帖子 百度贴吧评论回复爬虫 | 知乎问答文章评论爬虫项目地址: https://gitcode.com/GitHub_Trending/me/MediaCrawler创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
