Dify Web 前端开发与部署指南

1. 开发环境配置

1.1 体系要求

• Node.js >= 18.17.0
  
• pnpm >= 8.x
  

1.2 开发环境准备

1. # 克隆仓库
2. git clone https://github.com/langgenius/dify.git
3. cd dify/web
5. # 安装依赖
6. pnpm install
8. # 启动开发服务器
9. pnpm dev

复制代码

开发服务器默认会在 http://localhost:3000 启动。
1.3 环境变量配置

开发环境下可通过两种方式配置环境变量：

• 修改 .env 文件
  
• 或创建 .env.local 文件（保举，不会被 git 跟踪）
  

主要环境变量包括：

1. # API路径配置
2. NEXT_PUBLIC_API_PREFIX=/console/api
3. NEXT_PUBLIC_PUBLIC_API_PREFIX=/api
4. NEXT_PUBLIC_MARKETPLACE_API_PREFIX=/marketplace/api
5. NEXT_PUBLIC_MARKETPLACE_URL_PREFIX=/marketplace
7. # 版本配置
8. NEXT_PUBLIC_EDITION=SELF_HOSTED
10. # 其他配置
11. NEXT_PUBLIC_SUPPORT_MAIL_LOGIN=false

复制代码

2. 项目结构和关键文件

2.1 目次结构

1. web/
2. ├── app/              # Next.js App Router 结构
3. │   ├── components/   # 组件目录
4. │   ├── (commonLayout)/ # 主应用布局
5. │   │   ├── apps/     # 应用相关页面
6. │   │   ├── datasets/ # 数据集相关页面
7. │   │   └── ...       # 其他页面
8. │   ├── signin/       # 登录页面
9. │   └── ...
10. ├── config/           # 配置文件
11. ├── service/          # API服务
12. ├── utils/            # 工具函数
13. ├── i18n/             # 国际化资源
14. ├── public/           # 静态资源
15. ├── next.config.js    # Next.js配置
16. └── ...

复制代码

2.2 关键配置文件

• config/index.ts - 全局配置，包括API路径
  
• next.config.js - Next.js配置
  
• .env 和 .env.example - 环境变量配置
  
• middleware.ts - 请求拦截和处理
  
• service/fetch.ts - 请求处理基础逻辑
  

3. API接口配置

3.1 接口路径配置

接口路径主要在 config/index.ts 文件中配置：

1. // 通过环境变量设置API路径
2. if (process.env.NEXT_PUBLIC_API_PREFIX && process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX) {
3.    
4.   apiPrefix = process.env.NEXT_PUBLIC_API_PREFIX
5.   publicApiPrefix = process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX
6. }
7. else if (
8.   globalThis.document?.body?.getAttribute('data-api-prefix')
9.   && globalThis.document?.body?.getAttribute('data-pubic-api-prefix')
10. ) {
11.    
12.   // 从HTML属性获取API路径
13.   api

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告