使用Slack Bolt+Next.js+ngrok时端口3000被占用的问题解决

问题概述 #

我们基于Bolt for JavaScript、React、Next.js、ngrok开发Slack Bot，已确认Slack工作区发送@提及消息时，事件能正确推送到https://xxxx.jp.ngrok.io/api/slack/events，但app.event("app_mention")的处理逻辑完全没触发，同时控制台抛出端口占用错误：

error - unhandledRejection: Error: listen EADDRINUSE: address already in use :::3000

根因分析 #

问题出在/api/slack/events.ts的代码逻辑：每次API请求进来都会执行app.start(process.env.PORT || 3000)，尝试启动Bolt自己的HTTP服务，但Next.js本身已经占用了3000端口，导致端口冲突。Bolt服务启动失败后，自然无法处理后续的Slack事件请求。

解决方案 #

在Next.js的API路由中，不需要让Bolt单独启动HTTP服务，而是要将Bolt的请求处理逻辑挂载到Next.js已有的HTTP服务上，复用端口。具体修改步骤如下：

1. 重构API路由代码 #

将原代码中启动Bolt服务的app.start()调用移除，改用Bolt的requestHandler.process()方法处理请求。示例代码如下：

import { App } from '@slack/bolt';
import type { NextApiRequest, NextApiResponse } from 'next';

// 全局初始化一次Bolt实例，避免重复创建
const app = new App({
  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET,
});

// 注册app_mention事件处理逻辑
app.event('app_mention', async ({ event, say }) => {
  await say(`Hey there <@${event.user}>!`);
});

// Next.js API路由的核心处理函数
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    // 委托Bolt处理Slack的请求
    await app.requestHandler.process(req, res);
  } catch (error) {
    console.error('处理Slack请求失败:', error);
    res.status(500).end();
  }
}

// 禁用Next.js默认的body解析，确保Bolt能获取原始请求体用于签名验证
export const config = {
  api: {
    bodyParser: false,
  },
};

2. 关键修改说明 #

• 移除app.start()：Next.js本身已经在运行HTTP服务器，不需要Bolt再启动独立服务，避免端口冲突。
• 复用Next.js的请求上下文：通过app.requestHandler.process(req, res)将Slack的请求交给Bolt处理，共享Next.js的端口和服务。
• 禁用默认body解析：Slack的事件请求需要原始的请求体来验证签名，Next.js默认的body解析会破坏这一流程，必须关闭。
• 全局初始化Bolt实例：确保Bolt app只创建一次，避免每次请求都重复初始化事件监听逻辑。

3. 验证步骤 #

1. 重启Next.js服务，确认控制台不再出现端口占用错误。
2. 在Slack工作区发送@提及消息，检查是否能触发app_mention的处理逻辑（比如自动回复消息）。
3. 确认ngrok隧道正常指向Next.js的3000端口，Slack应用的事件订阅URL配置正确。

内容的提问来源于stack exchange，提问作者Wes