智能媒资托管 Dify 快速集成个人网盘教程

本文指导您如何使用腾讯云智能媒资托管（Smart Media Hosting，SMH）和 AI 对话模板（Dify 前端模板）快速构建一个集个人网盘与智能对话于一体的应用。您不仅可以在本地运行，还能轻松部署到云服务器，打造一个属于您的、拥有“记忆”的 AI 知识助手。
功能特性
1. 智能文件管理
完整的文件上传、下载、删除、移动功能。
支持创建文件夹，管理目录结构。
在线预览图片、PDF、文本等常见格式文件。
核心特色：可直接点击云盘中的文件，与 AI 就该文件内容进行对话（如“分析这张图片”）。
2. AI 对话系统
基于 Dify 前端模板，提供流畅的智能对话体验。
支持多轮对话，保持完整的上下文逻辑。
可轻松配置并调用您在 Dify 上创建的复杂工作流（Workflow）。
3. 用户体系和交互
一套用户体系打通 Dify、网盘和业务账号，轻松配置即可直接使用。
完整的鉴权和权限管理。
完整的交互: 登录个人网盘和 AI 对话。
集成的对话交互面板。
前提条件
在开始之前，请确保您已准备好以下资源：
1. 腾讯云账号：已 注册腾讯云账号 并完成 实名认证。
2. SMH 媒体库：登录 智能媒资托管控制台，开通服务并 创建媒体库。单击查看密钥，记录媒体库访问域名、媒体库 ID 和媒体库密钥。
说明：
由于本实践为多用户管理，新建媒体库时请务必选择多租户模式。
﻿
3. Dify 应用：拥有一个 Dify 上的应用（可使用云端版或自托管版）。您需要其 APP ID 和 API Key。
4. 开发环境：本地计算机需安装 Node.js (14.x 或更高版本)  npm 和 Git 版本控制工具。
部署步骤
1. 获取项目并初始化
1.1 下载项目源码
您可以从 CNB 代码仓库 克隆或下载项目模板。
git clone https://cnb.cool/tencent/cloud/cos/conversation-web-app-template
cd conversation-web-app-template
1.2 安装项目依赖
使用 npm 安装运行所需的所有第三方包。
npm install
# 或使用 yarn
yarn install
2. 配置关键信息
执行以下命令或手动复制根目录下的 .env.example 文件并重命名为 .env。
// 复制命令
cp .env.example .env
接下来按照如下配置编辑 .env文件：
说明：
JWT_SECRET 务必使用强随机字符串，切勿使用默认值。
.env 内配置均为必填项。
# Dify 相关配置
# 1. 登录您的 Dify 控制台，进入目标“应用配置”或“API 访问”页面
# 2. 找到您的应用，即可获取 APP ID 和 API Key
NEXT_PUBLIC_APP_ID=your_dify_app_id_here
NEXT_PUBLIC_APP_KEY=your_dify_api_key_here
# 3. 如果您使用 Dify 云端版，通常为 https://api.dify.ai
#    如果您是自托管，请填写您的 Dify 服务地址，如 http://your-server-ip:3001/v1
NEXT_PUBLIC_API_URL=https://api.dify.ai/v1
﻿
# SMH 相关配置
# 1. 登录腾讯云 SMH 控制台，进入“媒体库管理”
# 2. 点击您要使用的媒体库，进入“概览”或“密钥管理”
# 3. 复制“访问域名” “媒体库 ID”和“访问密钥”
# 4. 访问域名前务必加上 https：// 前缀，如 https://xxxxxxx.api.tencentsmh.cn
NEXT_PUBLIC_LIBRARY_ID=your_smh_library_id_here
NEXT_PUBLIC_LIBRARY_SECRET=your_smh_library_secret_here
NEXT_PUBLIC_SMH_HOST=your_smh_library_secret_host_here
﻿
# 应用安全配置
# 用于加密会话的密钥，请使用一个长且复杂的随机字符串
JWT_SECRET=your_super_strong_random_secret_string_here
﻿
注意：
Dify 云端版获取 NEXT_PUBLIC_APP_ID、NEXT_PUBLIC_APP_KEY 可通过登录  Dify，进入应用编排，参照下图获取信息。
﻿
﻿
﻿
3. 运行与部署
3.1 本地开发模式（推荐用于测试）
执行以下命令启动本地开发服务器：
npm run dev
 执行后显示本地访问域名即启动成功，在浏览器中访问 http://localhost:3000。您将看到登录页面如下所示：
﻿
测试用户名密码请前往源码内的  app/api/utils/users.ts 文件内获取或配置
﻿
登录成功后即可看到交互界面，左侧是您的个人 SMH 网盘和 AI 会话列表，右侧是 AI 对话框。您可以尝试上传文件并进行对话。
﻿
3.2 生产环境构建与部署
3.2.1 构建优化版本
执行以下构建命令，生成用于生产环境的静态文件。构建产物将位于 .next 目录中。
npm run build
3.2.2 启动生产服务器
说明：
生产环境务必通过 HTTPS 提供服务。
执行以下命令后，应用将在生产模式下运行，通常位于 http://localhost:3000。
npm start
3.2.3 部署到云服务器
1. 将构建的产物移动到您的服务器上。
2. 使用 PM2 等进程管理工具来启动并守护应用，确保其持续运行。
4. 后续功能扩展
您可以基于此项目进行二次开发, 可以添加更多适合业务的功能, 如:
批量操作：在文件列表中添加批量选择、移动、删除功能。
文件分享：利用 SMH 的分享接口，为文件生成临时分享链接。
更多 AI 能力：在 Dify 工作流中集成更多工具，如让 AI 根据图片内容写描述、自动为文档分类、从表格中提取数据等。
常见问题
为什么页面打开空白或提示“Internal Server Error”?
1. 对照 .env.example 检查 .env 文件是否配置正确。
2. 通过本地调试控制台检查是否有报错信息。
3. 检查本地网络是否正常。
4. 检查本地是否开启了代理。
为什么文件上传失败？
1. 检查 NEXT_PUBLIC_LIBRARY_ID 和 NEXT_PUBLIC_LIBRARY_SECRET 是否正确。
2. 确认 SMH 媒体库状态正常，且有可用存储空间和带宽。
3. 检查网络连接，或查看浏览器开发者工具（F12）中“网络(Network)”标签页的具体错误信息。
4. 如果文件过大, 可以考虑在前端实现文件分片上传，提升大文件上传的成功率和体验。
为什么 AI 对话不回应，或提示 API 错误？
1. 核对 NEXT_PUBLIC_APP_ID, NEXT_PUBLIC_APP_KEY, NEXT_PUBLIC_API_URL 三项是否正确。
2. 登录 Dify 控制台，检查您的应用是否已发布，API Key 是否有权限。
3. 如果使用自托管 Dify，确认其服务地址可从您的应用服务器访问。
为什么无法点击文件与 AI 对话？
此功能依赖于您在 Dify 中配置的、能够处理文件查询的工作流。请确认您已创建了相应的工作流，并且工作流能够正确接收并处理文件标识参数。
获取帮助
如果在实践过程中遇到问题，您可以：
查阅官方文档：Dify 官方文档。
检查项目源码：仔细阅读项目中的 README.md 文件，通常包含最新指引。
社区支持：可在项目的 CNB 仓库的“Issues”板块搜索或提交问题。
Dify 快速集成个人网盘教程

本页目录：

功能特性

前提条件

部署步骤

1. 获取项目并初始化

1.1 下载项目源码

1.2 安装项目依赖

2. 配置关键信息

3. 运行与部署

3.1 本地开发模式（推荐用于测试）

3.2 生产环境构建与部署

3.2.1 构建优化版本

3.2.2 启动生产服务器

3.2.3 部署到云服务器

4. 后续功能扩展

常见问题

为什么页面打开空白或提示“Internal Server Error”?

为什么文件上传失败？

为什么 AI 对话不回应，或提示 API 错误？

为什么无法点击文件与 AI 对话？

获取帮助
