第 23 期：应用发布全攻略

三种发布方式

graph TB
    App[Dify App] --> Pub{发布方式}
    Pub --> WebApp[🌐 Web App]
    Pub --> Embed[📦 嵌入式]
    Pub --> API[⚡ RESTful API]
    
    WebApp --> W1[独立网页访问]
    WebApp --> W2[自定义域名]
    
    Embed --> E1[iframe 嵌入]
    Embed --> E2[JS Widget 浮窗]
    
    API --> A1[后端集成]
    API --> A2[移动 App]
    API --> A3[微信/钉钉机器人]

Web App 发布

在 App → Publish → Web App 中启用后，用户可通过链接直接访问：

https://your-dify-domain.com/chat/app-token-here

自定义配置

webapp_config:
  title: "AI 智能助手"
  description: "24/7 在线技术支持"
  copyright: "© 2026 Company"
  theme:
    primary_color: "#6366F1"
    chat_bubble_color: "#EEF2FF"
  features:
    text_to_speech: true
    speech_to_text: true
    file_upload: true
    suggested_questions:
      - "如何重置密码？"
      - "产品有哪些定价方案？"
      - "如何联系技术支持？"

嵌入式部署

iframe 嵌入

<iframe
  src="https://dify.your-company.com/chatbot/TOKEN"
  style="width: 100%; height: 700px; border: none; border-radius: 12px; 
         box-shadow: 0 4px 24px rgba(0,0,0,0.1);"
  allow="microphone"
></iframe>

JS Widget 浮窗

<!-- 在页面底部添加浮动聊天按钮 -->
<script>
  window.difyChatbotConfig = {
    token: 'YOUR_APP_TOKEN',
    baseUrl: 'https://dify.your-company.com',
    systemVariables: {
      user_id: getCurrentUserId()  // 传递当前登录用户
    }
  };
</script>
<script src="https://dify.your-company.com/embed.min.js" defer></script>

API 集成

# 完整的后端集成示例 (FastAPI)
from fastapi import FastAPI, Request
from fastapi.responses import StreamingResponse
import httpx

app = FastAPI()
DIFY_API_KEY = "app-xxxxxxxx"
DIFY_BASE_URL = "http://localhost/api"

@app.post("/api/chat")
async def chat(request: Request):
    body = await request.json()
    
    async def stream_response():
        async with httpx.AsyncClient() as client:
            async with client.stream(
                "POST",
                f"{DIFY_BASE_URL}/chat-messages",
                headers={
                    "Authorization": f"Bearer {DIFY_API_KEY}",
                    "Content-Type": "application/json"
                },
                json={
                    "inputs": {},
                    "query": body["message"],
                    "response_mode": "streaming",
                    "user": body.get("user_id", "anonymous"),
                    "conversation_id": body.get("conversation_id", "")
                }
            ) as response:
                async for chunk in response.aiter_bytes():
                    yield chunk
    
    return StreamingResponse(stream_response(), media_type="text/event-stream")