DifyとLINEをプラグインなしで連携してチャットボットを作る方法

┌──────────────────────────────────────┐
│         LINE Messaging API           │
│ (Webhook → your-domain.com)          │
└───────────────┬──────────────────────┘
                │ HTTPS POST /api/line-webhook
                │ Header: x-line-signature
                ▼
┌──────────────────────────────────────┐
│      Next.js API Server              │
│   - ポート 3000 (本プロジェクト)     │
│   - /api/line-webhook エンドポイント │
│   - LINE Bot SDK で受信処理          │
│   - 署名検証 (HMAC-SHA256)           │
└───────────────┬──────────────────────┘
                │ HTTPS API呼び出し
                │ Authorization: Bearer {DIFY_API_KEY}
                ▼
┌──────────────────────────────────────┐
│        Dify AI Platform              │
│   - server-choice-demo.site/v1       │
│   - POST /chat-messages              │
│   - チャットボット AI処理               │
└───────────────┬──────────────────────┘
                │ 
                │ (会話履歴・文脈保存)
                ▼
┌──────────────────────────────────────┐
│          Supabase Database           │
│   - conversation_meta テーブル        │
│   - conversations テーブル            │
│   - 会話ID・メッセージ履歴管理           │
└──────────────────────────────────────┘

npx create-next-app@latest dify-line-bot
cd dify-line-bot

npm install @line/bot-sdk axios @supabase/supabase-js
npm install -D @types/node

touch .env

# LINE Messaging API
LINE_CHANNEL_SECRET=xxxxx
LINE_CHANNEL_ACCESS_TOKEN=xxxxx

# Dify
DIFY_API_KEY=xxxxx
DIFY_BASE_URL=XXXX

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_PUVLISHABLE_KEY=xxxxx

# LINE Messaging API
# ここに設定する
LINE_CHANNEL_SECRET=xxxxx
LINE_CHANNEL_ACCESS_TOKEN=xxxxx

# Dify
DIFY_API_KEY=xxxxx
DIFY_BASE_URL=XXXX

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_PUVLISHABLE_KEY=xxxxx

# LINE Messaging API
LINE_CHANNEL_SECRET=xxxxx
LINE_CHANNEL_ACCESS_TOKEN=xxxxx

# Dify
# ここに設定する
DIFY_API_KEY=xxxxx
DIFY_BASE_URL=XXXX

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_PUVLISHABLE_KEY=xxxxx

-- conversation_meta テーブル
CREATE TABLE conversation_meta (
  user_id TEXT PRIMARY KEY,
  conversation_id TEXT NOT NULL,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- conversations テーブル  
CREATE TABLE conversations (
  id SERIAL PRIMARY KEY,
  user_id TEXT NOT NULL,
  role TEXT NOT NULL CHECK (role IN ('user', 'assistant')),
  message TEXT NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

.
├── api
│   └── line-webhook
│       └── route.ts
├── favicon.ico
├── globals.css
├── layout.tsx
├── page.tsx
└── pages

import { NextRequest, NextResponse } from 'next/server';
import crypto from 'crypto';
import { Client } from '@line/bot-sdk';
import axios from 'axios';
import { createClient } from '@supabase/supabase-js';

// 環境変数の定義
const LINE_CHANNEL_SECRET = process.env.LINE_CHANNEL_SECRET!;
const LINE_CHANNEL_ACCESS_TOKEN = process.env.LINE_CHANNEL_ACCESS_TOKEN!;
const DIFY_API_KEY = process.env.DIFY_API_KEY!;
const DIFY_BASE_URL = process.env.DIFY_BASE_URL!;

// LINE Bot クライアントの初期化
const client = new Client({
  channelAccessToken: LINE_CHANNEL_ACCESS_TOKEN,
});

// Supabase クライアントの初期化
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_KEY!
);

// 署名検証関数
function verifySignature(body: string, signature: string): boolean {
  const expectedSignature = crypto
    .createHmac('SHA256', LINE_CHANNEL_SECRET)
    .update(body, 'utf8')
    .digest('base64');
  
  return signature === `SHA256=${expectedSignature}`;
}

// Dify API 呼び出し関数
async function callDifyAPI(message: string, conversationId?: string) {
  const requestData = {
    inputs: {},
    query: message,
    response_mode: 'blocking',
    conversation_id: conversationId || '',
    user: 'line-user'
  };

  const response = await axios.post(
    `${DIFY_BASE_URL}/chat-messages`,
    requestData,
    {
      headers: {
        'Authorization': `Bearer ${DIFY_API_KEY}`,
        'Content-Type': 'application/json',
      },
    }
  );

  return response.data;
}

// 会話ID取得関数
async function getConversationId(userId: string): Promise<string | null> {
  const { data, error } = await supabase
    .from('conversation_meta')
    .select('conversation_id')
    .eq('user_id', userId)
    .single();
    
  if (error || !data) {
    return null;
  }
  
  return data.conversation_id;
}

// 会話ID保存関数
async function saveConversationId(userId: string, conversationId: string) {
  await supabase
    .from('conversation_meta')
    .upsert({
      user_id: userId,
      conversation_id: conversationId,
      updated_at: new Date().toISOString()
    });
}

// 会話履歴保存関数
async function saveConversation(userId: string, role: string, message: string) {
  await supabase
    .from('conversations')
    .insert({
      user_id: userId,
      role: role,
      message: message,
      created_at: new Date().toISOString()
    });
}

// エラーハンドリング関数
async function handleError(error: any, userId: string, replyToken: string) {
  console.error('Error in handleTextMessage:', error);
  
  await client.replyMessage(replyToken, {
    type: 'text',
    text: '申し訳ございません。現在システムに問題が発生しております。しばらく時間をおいて再度お試しください。'
  });
}

// テキストメッセージ処理関数
async function handleTextMessage(userId: string, messageText: string, replyToken: string) {
  try {
    // 1. 既存の会話IDを取得
    const conversationId = await getConversationId(userId);
    
    // 2. Dify API を呼び出し
    const difyResponse = await callDifyAPI(messageText, conversationId);
    
    // 3. 会話IDを保存/更新
    if (difyResponse.conversation_id !== conversationId) {
      await saveConversationId(userId, difyResponse.conversation_id);
    }
    
    // 4. 会話履歴を保存
    await Promise.all([
      saveConversation(userId, 'user', messageText),
      saveConversation(userId, 'assistant', difyResponse.answer)
    ]);
    
    // 5. LINE に返信
    await client.replyMessage(replyToken, {
      type: 'text',
      text: difyResponse.answer
    });
    
    console.log(`Response sent to user ${userId}: ${difyResponse.answer}`);
    
  } catch (error) {
    await handleError(error, userId, replyToken);
  }
}

// メインのPOST処理関数
export async function POST(request: NextRequest) {
  try {
    const body = await request.text();
    const signature = request.headers.get('x-line-signature');
    
    // 署名検証
    if (!signature || !verifySignature(body, signature)) {
      return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
    }
    
    // イベント処理
    const events = JSON.parse(body).events;

    for (const event of events) {
      if (event.type === 'message' && event.message.type === 'text') {
        const userId = event.source.userId;
        const messageText = event.message.text;
        const replyToken = event.replyToken;
        
        // テキストメッセージを処理
        await handleTextMessage(userId, messageText, replyToken);
      }
    }

    return NextResponse.json({ status: 'ok' });
    
  } catch (error) {
    console.error('Webhook error:', error);
    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
  }
}

function verifySignature(body: string, signature: string): boolean {
  const expectedSignature = crypto
    .createHmac('SHA256', LINE_CHANNEL_SECRET)
    .update(body, 'utf8')
    .digest('base64');
  
  return signature === `SHA256=${expectedSignature}`;
}

async function callDifyAPI(message: string, conversationId?: string) {
  const requestData = {
    inputs: {},
    query: message,
    response_mode: 'blocking',
    conversation_id: conversationId || '',
    user: 'line-user'
  };

  const response = await axios.post(
    `${DIFY_BASE_URL}/chat-messages`,
    requestData,
    {
      headers: {
        'Authorization': `Bearer ${DIFY_API_KEY}`,
        'Content-Type': 'application/json',
      },
    }
  );

  return response.data;
}

async function saveConversation(userId: string, role: string, message: string) {
  await supabase
    .from('conversations')
    .insert({
      user_id: userId,
      role: role,
      message: message,
      created_at: new Date().toISOString()
    });
}

async function handleTextMessage(userId: string, messageText: string, replyToken: string) {
  try {
    // 1. 既存の会話IDを取得
    const conversationId = await getConversationId(userId);
    
    // 2. Dify API を呼び出し
    const difyResponse = await callDifyAPI(messageText, conversationId);
    
    // 3. 会話IDを保存/更新
    if (difyResponse.conversation_id !== conversationId) {
      await saveConversationId(userId, difyResponse.conversation_id);
    }
    
    // 4. 会話履歴を保存
    await Promise.all([
      saveConversation(userId, 'user', messageText),
      saveConversation(userId, 'assistant', difyResponse.answer)
    ]);
    
    // 5. LINE に返信
    await client.replyMessage(replyToken, {
      type: 'text',
      text: difyResponse.answer
    });
    
    console.log(`Response sent to user ${userId}: ${difyResponse.answer}`);
    
  } catch (error) {
    await handleError(error, userId, replyToken);
  }
}

# Stage 1: Build
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Stage 2: Run
FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/package*.json ./
RUN npm ci --omit=dev
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/next.config.s ./
COPY --from=builder /app/public ./public
EXPOSE 3001
CMD ["npm", "start"]

tree /root/line-dify/
/root/line-dify/
├── Dockerfile # Next.jsプロジェクトフォルダにDockerfileを作る
├── README.md
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── src
│   └── app
│       ├── api
│       │   └── line-webhook
│       │       └── route.ts
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx
│       ├── page.tsx
│       └── pages
└── tsconfig.json

# LINE Messaging API
LINE_CHANNEL_SECRET=xxxxx
LINE_CHANNEL_ACCESS_TOKEN=xxxxx

# Dify
DIFY_API_KEY=xxxxx
DIFY_BASE_URL=XXXX

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_PUVLISHABLE_KEY=xxxxx

cd /root/dify/

cd docker
vim docker-compose.override.yaml

services:
  certbot:
    restart: always
  nginx:
    volumes:
    - ./nginx/custom.conf.template:/etc/nginx/custom.conf
  nextjs:
    build: ../../line-dify-bot
    container_name: nextjs
    ports:
      - "3001:3000"
    env_file:
      - ../../line-dify/.env
    depends_on:
      - api
    networks:
      - ssrf_proxy_network
      - default

cd nginx
vim custom.conf.template

location = /api/line-webhook {
  proxy_pass http://nextjs:3000;
  include proxy.conf;
}

# Please do not directly edit this file. Instead, modify the .env variables related to NGINX configuration.

server {
    listen ${NGINX_PORT};
    server_name ${NGINX_SERVER_NAME};

    location /console/api {
      proxy_pass http://api:5001;
      include proxy.conf;
    }

    # custom.confのlocationをinclude
    include /etc/nginx/custom.conf;

    location /api {
      proxy_pass http://api:5001;
      include proxy.conf;
    }

    location /v1 {
      proxy_pass http://api:5001;
      include proxy.conf;
    }

    location /files {
      proxy_pass http://api:5001;
      include proxy.conf;
    }

    location /explore {
      proxy_pass http://web:3000;
      include proxy.conf;
    }

    location /e/ {
      proxy_pass http://plugin_daemon:5002;
      proxy_set_header Dify-Hook-Url $scheme://$host$request_uri;
      include proxy.conf;
    }

    location / {
      proxy_pass http://web:3000;
      include proxy.conf;
    }

    location /mcp {
      proxy_pass http://api:5001;
      include proxy.conf;
    }

  # placeholder for acme challenge location
  ${ACME_CHALLENGE_LOCATION}

  # placeholder for https config defined in https.conf.template
  ${HTTPS_CONFIG}
}

vim /root/update.sh

#!/bin/bash
dify_dir="/root/dify/docker"
ENV_FILE="/root/dify/docker/.env"
ENV_EXAMPLE_FILE="/root/dify/docker/.env.example"
ENV_TMP_FILE="/root/dify/docker/.env.tmp"
TIMESTAMP=$(date "+%Y%m%d_%H%M%S")

# dockerサービス停止とコンテナ削除
cd ${dify_dir}
docker compose --profile certbot down

# dify最新ソースコード取得
cd ${dify_dir}
git pull origin main

# .env更新
cp -p ${ENV_FILE} /root/backup_dify_env/${TIMESTAMP}.env
cp -p ${ENV_EXAMPLE_FILE} ${ENV_TMP_FILE}
sed '/^#/d; /^\s*$/d' "${ENV_FILE}" | while IFS= read -r line; do
  KEY=$(echo "${line}" | cut -d'=' -f1)
  VALUE=$(echo "${line}" | cut -d'=' -f2)
  if [[ -n "${VALUE}" ]]; then
    sed -i "s|^${KEY}=.*|${KEY}=${VALUE}|" "${ENV_TMP_FILE}"
  fi
done

# 更新された .env.tmp を .env にコピー
cp -pf "${ENV_TMP_FILE}" "${ENV_FILE}"

# .env.tmpを削除
unlink "${ENV_TMP_FILE}"

# default.conf.templateにcustom.confのincludeを自動追加
DEFAULT_CONF="${dify_dir}/nginx/conf.d/default.conf.template"
CUSTOM_INCLUDE_LINE="    include /etc/nginx/custom.conf;"

# serverブロックの直前の '}' の前にincludeを挿入（なければ追加）
if ! grep -qF "$CUSTOM_INCLUDE_LINE" "$DEFAULT_CONF"; then
  # '}' の直前に挿入
  sed -i "/^}/i $CUSTOM_INCLUDE_LINE" "$DEFAULT_CONF"
  echo "custom.confのincludeをdefault.conf.templateに追加しました。"
else
  echo "custom.confのincludeは既に追加されています。"
fi

# dockerサービス構築・起動
cd ${dify_dir}
docker compose --profile certbot up -d

docker compose restart

docker compose ps