如何在Shopify CLI创建的自定义应用中实现Webhook代码？

一、文件选择与存放位置 #

从你的文件结构来看，你用Shopify CLI生成的是**Next.js（Node.js栈）**的自定义应用，和你提供的Ruby/Sinatra代码栈不兼容，因此：

• 不需要创建app.rb（Ruby栈专属文件），也无需单独创建app.jsx（React组件文件，不适合处理API请求）
• 推荐按Next.js App Router规则存放Webhook代码：
  1. 在app/api/目录下新建webhook/product-update/子目录
  2. 在该子目录下创建route.js文件（自动映射到/api/webhook/product-update请求路径）

二、代码整合与连接方式 #

Next.js的API路由采用文件系统驱动，不需要额外的import/export操作来连接应用主体。只要按上述规则创建路由文件，Shopify就能直接通过对应URL发送Webhook请求，路由会自动生效。

三、适配你的应用的代码示例 #

以下是对应你需求的Next.js版本代码（替代你提供的Ruby示例），包含Shopify要求的HMAC签名验证：

import { NextResponse } from 'next/server';
import crypto from 'crypto';

// 从环境变量读取API密钥（生产环境必须用环境变量，禁止硬编码）
const API_SECRET_KEY = process.env.SHOPIFY_API_SECRET;

// 验证Webhook的HMAC签名
function verifyWebhook(data, hmacHeader) {
  const calculatedHmac = crypto
    .createHmac('sha256', API_SECRET_KEY)
    .update(data)
    .digest('base64');
  return crypto.timingSafeEqual(Buffer.from(calculatedHmac), Buffer.from(hmacHeader));
}

// 处理POST请求（Shopify Webhook仅使用POST方法）
export async function POST(request) {
  try {
    // 获取请求头中的HMAC签名
    const hmacHeader = request.headers.get('x-shopify-hmac-sha256');
    // 获取原始请求体（必须用text()而非json()，否则会破坏签名验证）
    const rawBody = await request.text();
    
    // 签名验证不通过则返回401
    if (!verifyWebhook(rawBody, hmacHeader)) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }

    // 解析Webhook payload
    const payload = JSON.parse(rawBody);
    
    // 此处编写你的业务逻辑，比如处理产品更新事件
    console.log('收到产品更新Webhook:', payload);

    // 必须在5秒内返回200响应（Shopify要求）
    return NextResponse.json({ status: 'success' }, { status: 200 });
  } catch (error) {
    console.error('Webhook处理失败:', error);
    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
  }
}

四、基础建议 #

• 环境变量管理：将SHOPIFY_API_SECRET存入.env文件，Shopify CLI生成的应用默认支持读取该文件
• Webhook注册：需在Shopify Partner后台或通过Shopify API注册对应事件（如products/update），回调URL填写你的应用域名+/api/webhook/product-update
• 响应时限：Shopify要求Webhook端点在5秒内返回200响应，复杂业务逻辑需放到异步任务队列（如BullMQ）处理
• 测试工具：用Shopify CLI的shopify webhook trigger命令触发测试Webhook，或使用Shopify后台的Webhook测试功能

五、官方资料推荐 #

• Shopify Webhook官方文档：了解Webhook事件类型、签名验证规则
• Next.js API路由文档：熟悉App Router的API路由用法
• Shopify CLI官方文档：学习自定义应用的测试、部署流程

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