本地化部署 Dify 打造专属 AI 助手并嵌入网站

本教程详细讲解如何基于开源项目 Dify，通过 Docker 本地部署专属 AI 聊天助手，并将其无缝嵌入企业官网，实现页面内嵌式智能交互。文章涵盖环境配置、Chat 应用创建、嵌入代码、网页集成与本地私有化部署优势，适合企业、开发者快速构建安全、定制化的 AI 应用，提升用户体验。附完整代码示例与部署演示图，助你轻松上手。

文浩（楠搏万）

1708人浏览 · 2025-06-09 17:53:11

文浩（楠搏万） · 2025-06-09 17:53:11 发布

言简意赅的讲解专属 AI 助手的部署

在 AI 应用如火如荼的当下，打造一个属于自己的智能问答助手不再遥不可及。本文将从零开始，教你如何基于开源项目 Dify 快速部署一个本地智能助手，并将其无缝嵌入到你的企业门户网站中，实现页面内嵌式 AI 交互体验。

一、部署 Docker 环境并拉取 Dify 项目

在开始之前，请确保你已经在本地成功安装了 Docker 环境。如果你还没有部署，可以参考我之前的文章：
👉 Docker 环境搭建教程

步骤 1：克隆 Dify 源码

git clone https://github.com/langgenius/dify.git
cd dify
cd docker

步骤 2：复制环境变量文件

cp .env.example .env

可以根据需要修改 .env 文件中的一些配置，例如服务端口、数据库密码等。

步骤 3：启动 Dify 服务

docker compose up -d

等待容器构建与启动完成后，Dify 服务将在本地运行。

二、访问 Dify 并创建 ChatFlow 应用

在浏览器中访问：

http://localhost

按照页面引导注册账号并登录后台系统。

步骤 4：创建一个新的 Chat App

点击【创建空白应用】，进入应用【聊天助手】创建界面；
设置应用名称、描述等信息；
配置提示词（Prompt）与模型参数和知识库；
保存应用并点击【发布（Publish）】。

此时你的 AI 应用就成功创建并上线了。

创建空白应用

创建聊天助手

发布聊天机器人

三、获取嵌入代码

进入你刚刚创建的 Chat App 页面，点击右上角【嵌入（Embed）】，Dify 会自动生成嵌入 HTML 页面的脚本代码。

如下所示（示例 token 仅作参考）：

<script>
    window.difyChatbotConfig = {
        token: '3KkQvYTNzkfeYwKv',
        baseUrl: 'http://localhost'
    }
</script>
<script
        src="http://localhost/embed.min.js"
        id="3KkQvYTNzkfeYwKv"
        defer>
</script>
<style>
    #dify-chatbot-bubble-button {
        background-color: #1C64F2 !important;
    }
    #dify-chatbot-bubble-window {
        width: 24rem !important;
        height: 40rem !important;
    }
</style>

四、嵌入门户网站页面

我们以一个典型的企业门户页面为例，如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业门户</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        /* 导航栏样式 */
        nav {
            background-color: rgba(51, 51, 51, 0.9);
            color: white;
            padding: 15px 0;
            text-align: center;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            display: inline;
            margin: 0 15px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        nav ul li a:hover {
            color: #00aaff;
        }

        /* 英雄区域样式 */
        .hero {
            background-image: url('https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
            background-size: cover;
            background-position: center;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
            position: relative;
        }

        .hero::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .hero-content {
            z-index: 1;
        }

        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 24px;
            margin-bottom: 40px;
        }

        .btn {
            background-color: #00aaff;
            color: white;
            padding: 15px 30px;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #0088cc;
        }

        /* 服务区域样式 */
        .services {
            padding: 100px 0;
            text-align: center;
            background-color: white;
        }

        .services h2 {
            font-size: 36px;
            margin-bottom: 20px;
        }

        .service {
            display: inline-block;
            width: 300px;
            margin: 0 20px;
            padding: 20px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .service:hover {
            transform: translateY(-10px);
        }

        .service i {
            font-size: 48px;
            color: #00aaff;
            margin-bottom: 20px;
        }

        .service h3 {
            font-size: 24px;
            margin-bottom: 10px;
        }

        /* 关于我们区域样式 */
        .about {
            background-color: #f9f9f9;
            padding: 100px 0;
            text-align: center;
        }

        .about h2 {
            font-size: 36px;
            margin-bottom: 20px;
        }

        .about p {
            font-size: 18px;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
        }

        /* 联系我们区域样式 */
        .contact {
            padding: 100px 0;
            text-align: center;
            background-color: white;
        }

        .contact h2 {
            font-size: 36px;
            margin-bottom: 20px;
        }

        .contact form {
            max-width: 600px;
            margin: 0 auto;
        }

        .contact input,
        .contact textarea {
            width: 100%;
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .contact button {
            background-color: #00aaff;
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .contact button:hover {
            background-color: #0088cc;
        }

        /* 页脚样式 */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px 0;
        }
    </style>
</head>

<body>
<!-- 导航栏 -->
<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

<!-- 英雄区域 -->
<div class="hero">
    <div class="hero-content">
        <h1>欢迎来到我们的企业门户</h1>
        <p>我们致力于提供高质量的服务和解决方案</p>
        <a href="#" class="btn">了解更多</a>
    </div>
</div>

<!-- 服务区域 -->
<div class="services">
    <h2>我们的服务</h2>
    <div class="service">
        <i class="fas fa-code"></i>
        <h3>软件开发</h3>
        <p>我们拥有专业的开发团队，为您提供定制化的软件开发服务。</p>
    </div>
    <div class="service">
        <i class="fas fa-chart-line"></i>
        <h3>数据分析</h3>
        <p>通过深入的数据分析，为您提供有价值的商业洞察。</p>
    </div>
    <div class="service">
        <i class="fas fa-cloud"></i>
        <h3>云计算服务</h3>
        <p>提供可靠的云计算解决方案，满足您的业务需求。</p>
    </div>
</div>

<!-- 关于我们区域 -->
<div class="about">
    <h2>关于我们</h2>
    <p>我们是一家充满创新精神的企业，专注于为客户提供高品质的产品和服务。我们的团队由一群经验丰富、充满激情的专业人士组成，致力于通过技术创新解决客户的问题。我们相信，只有不断追求卓越，才能在激烈的市场竞争中立于不败之地。</p>
</div>

<!-- 联系我们区域 -->
<div class="contact">
    <h2>联系我们</h2>
    <form>
        <input type="text" placeholder="姓名">
        <input type="email" placeholder="邮箱">
        <textarea placeholder="留言"></textarea>
        <button type="submit">提交</button>
    </form>
</div>

<!-- 页脚 -->
<footer>
    <p>&copy; 2025 企业名称。保留所有权利。</p>
</footer>

<script>
    window.difyChatbotConfig = {
        token: '3KkQvYTNzkfeYwKv',
        baseUrl: 'http://localhost'
    }
</script>
<script
        src="http://localhost/embed.min.js"
        id="3KkQvYTNzkfeYwKv"
        defer>
</script>
<style>
    #dify-chatbot-bubble-button {
        background-color: #1C64F2 !important;
    }
    #dify-chatbot-bubble-window {
        width: 24rem !important;
        height: 40rem !important;
    }
</style>
</body>

</html>

假设你已经有一个 index.html 文件，结构包括导航栏、服务介绍、关于我们、联系我们等模块。

只需将上述 Dify 提供的脚本嵌入到页面 <body> 标签的末尾即可：

<!-- 页脚 -->
<footer>
    <p>&copy; 2025 企业名称。保留所有权利。</p>
</footer>

<!-- 嵌入 Dify 智能助手 -->
<script>
    window.difyChatbotConfig = {
        token: '3KkQvYTNzkfeYwKv',
        baseUrl: 'http://localhost'
    }
</script>
<script
        src="http://localhost/embed.min.js"
        id="3KkQvYTNzkfeYwKv"
        defer>
</script>
<style>
    #dify-chatbot-bubble-button {
        background-color: #1C64F2 !important;
    }
    #dify-chatbot-bubble-window {
        width: 24rem !important;
        height: 40rem !important;
    }
</style>

刷新页面后，右下角会自动出现一个气泡按钮，点击即可唤出 AI 聊天助手，进行交互。

五、本地部署带来的优势

数据私有化：不依赖第三方平台，敏感数据安全可控；
定制能力强：Prompt 和模型自由组合，适应不同业务场景；
界面嵌入简单：几行代码即可嵌入任何网页；
开源生态支持：活跃社区支持持续升级。

六、注意事项

默认访问地址为 http://localhost，如需远程访问请配置公网地址或使用 Nginx 反向代理；
若模型调用失败，请检查 API Key 或 OpenAI 模型服务是否配置正确；

七、成品展示

嵌入展示

通过上述内容，你就已经基本理解了这个方法，基础用法我也都有展示。如果你能融会贯通，我相信你会很强

Best
Wenhao (楠博万)

天启AI社区

GitCode 天启AI是一款由 GitCode 团队打造的智能助手，基于先进的LLM（大语言模型）与多智能体 Agent 技术构建，致力于为用户提供高效、智能、多模态的创作与开发支持。它不仅支持自然语言对话，还具备处理文件、生成 PPT、撰写分析报告、开发 Web 应用等多项能力，真正做到“一句话，让 Al帮你完成复杂任务”。

更多推荐