Dify 架构总揽——先聊聊大体框架

说实话，第一次打开 Dify 的源码，眼睛有点花。

哈哈，别慌，慢慢来。

整体上，它是一个典型的前后端分离项目。

前端用 React + Next.js。

后端则是 Flask + Celery。

中间还有一层 Nginx 代理，负责转发请求。

整个系统被划分成几块：Web UI、API 服务、任务队列、存储层。

这个划分，你Ke以把它想象成一家咖啡店的前台、厨房、外卖和仓库。

咱就是说这种拆分Neng让每块dou专注自己的事儿， 起来也geng省心。

前端技术栈——React+Next.js

先说说页面渲染的套路。

Dify 用的是 Next.js 的 App Router，也就是现在比较潮的文件系统路由。

页面放在 /app 目录下文件名对应 URL。

比如 /app/apps/page.tsx 对应 /apps 路径。

不用再去手动写路由表，省事儿对不对？

还有个细节——服务端组件默认渲染。

'use client' 才Neng写交互逻辑。

这跟你以前玩 Vue2 完全不一样，得适应一下。

Zustand + Jotai + React Query——三层状态管理

Zustand 负责全局 UI 状态，比如左侧导航展开状态。

React Query 管理服务端数据缓存，比如应用列表、数据集详情。

Jotai 用来处理一些临时的小状态，比如弹窗开关。

这么拆分，其实是想让每个库各司其职，不要让一个 Store 胀得太大。

你要是习惯 Vuex 那种“一锅炖”，可Neng会觉得有点碎片化。

后端核心组件——Flask+Celery+数据库

Dify 的 API 层全部基于 Flask 写的 Controllers 和 Services。

/api/console/* 是后台管理接口，/api/web/* 是普通用户接口。

SSE被用来推送实时进度，比如任务执行日志。

Celery 负责异步任务，比如向量化文档、模型推理等耗时操作。

这套组合在业内算是“老配方”，靠谱且成熟。害，你可Neng会担心 性？其实只要把任务拆成小颗粒，用 RabbitMQ 或 Redis Zuo broker，就没问题了。

数据层与基础设施——PostgreSQL / Redis / 向量数据库

Dify 把结构化数据放在 PostgreSQL，事务性强，查询快。

PQ/PGVector：存储向量，用于 RAG 检索。

Caching 层，加速热点请求。

S3 兼容，用来保存上传的文件。

Monorepo 与依赖管理——pnpm workspace

Dify 整体采用 Monorepo 结构，一键 pnpm install 就Neng装齐所有子包。

dify-main/web 是前端代码根目录；dify-main/api 是后端代码；packages/dify-ui 是 UI 组件库。

Pnpm 的好处是硬链接共享依赖，磁盘占用geng小，也避免了 npm 那些莫名其妙的版本冲突。

. 前端请求封装——service 目录大揭秘

service/
├── apps.ts          # 应用相关 API
├── datasets.ts      # 数据集相关 API
├── workflow.ts      # 工作流相关 API
├── plugins.ts       # 插件相关 API
├── share.ts         # 分享相关 API
├── base.ts          # 基础请求封装
├── fetch.ts         # Fetch 底层封装
└── ...

TailwindCSS：原子化 CSS 的奇妙体验

Dify 用 Tailwind 来写样式，你会kan到大量类名像 flex items-center gap-4 px-4 py-2 bg-blue-600 rounded-lg.

这种方式跟 Vue2 那种 scoped CSS 完全不同，直接在 JSX/TSX 里写原子类就Neng搞定布局和配色。

常见疑惑答疑区——随便聊聊你可Neng卡住的点 "为什么百度不收录"？ CORS 与跨域设置的小坑

CORS 在 Nginx 层统一配置；不要在 Flask 中再加一次否则会出现 “Access-Control-Allow-Origin” 重复报错。

Nginx 配置里记得加 `add_header Vary Origin;` 来支持多域名请求。

"npm install 报错" 的自救办法

pnpm install --filter @dify/ui...
# 不对不对，我应该说：
pnpm install   # 用 pnpm 才行
# Ru果还是报错：
pnpm store prune && pnpm install --force
# 再不行就删掉 node_modules 手动重装。

Dify 开发者小技巧——随手记下来给你省点事儿

.env.local：# 本地开发环境变量，以 NEXT_PUBLIC_ 开头的会暴露到浏览器侧；其它变量仅服务端可见。

Zustand devtools：# 在 Chrome devtools 加上 `window.__ZUSTAND_DEVTOOLS__ = true` Neng实时查kan store 状态，好玩又实用。

Linter 配置：# 项目用了 ESLint + Prettier，坚持 commit 前跑 `pnpm lint && pnpm format` Neng省掉hen多 CI 报错时间。

—— 咱们聊完这章，你有什么想法吗？

说实话，我自己写这些代码的时候，也经常卡在细节上，比如忘记给 SSE 设置超时时间导致前端一直卡住...

不过只要把整体结构弄清楚，这些小坑基本douNeng靠经验踩过去啦~ 哈哈，你Ru果还有啥不明白的地方，大胆留言，我这老友随时帮忙掰开揉碎喂你！你懂的~ 🤙️

祝你玩转 Dify，一路顺风！ 🚀

---