如何在Shopify App Remix中配置ORDERS_CREATE Webhook？

我基于shopify-app-remix开发应用，尝试配置订单创建（ORDERS_CREATE）Webhook，但执行npm run dev启动应用后，命令行仅显示“app uninstaller”相关信息，订单创建Webhook完全未触发。

相关代码 #

shopify.server.js #

import "@shopify/shopify-app-remix/adapters/node";
import {
  AppDistribution,
  DeliveryMethod,
  shopifyApp,
  LATEST_API_VERSION,
} from "@shopify/shopify-app-remix/server";
import { PrismaSessionStorage } from "@shopify/shopify-app-session-storage-prisma";
import { restResources } from "@shopify/shopify-api/rest/admin/2023-07";

import prisma from "./db.server";

const shopify = shopifyApp({
  apiKey: process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET || "",
  apiVersion: LATEST_API_VERSION,
  scopes: process.env.SCOPES?.split(","),
  appUrl: process.env.SHOPIFY_APP_URL || "",
  authPathPrefix: "/auth",
  sessionStorage: new PrismaSessionStorage(prisma),
  distribution: AppDistribution.AppStore,
  restResources,
  webhooks: {
    APP_UNINSTALLED: {
      deliveryMethod: DeliveryMethod.Http,
      callbackUrl: "/webhooks",
    },
    ORDERS_CREATE: {
      deliveryMethod: DeliveryMethod.Http,
      callbackUrl: "/webhooks",
    },
  },
  hooks: {
    afterAuth: async ({ session }) => {
      shopify.registerWebhooks({ session });
    },
  },
  ...(process.env.SHOP_CUSTOM_DOMAIN
    ? { customShopDomains: [process.env.SHOP_CUSTOM_DOMAIN] }
    : {}),
});

export default shopify;
export const apiVersion = LATEST_API_VERSION;
export const addDocumentResponseHeaders = shopify.addDocumentResponseHeaders;
export const authenticate = shopify.authenticate;
export const unauthenticated = shopify.unauthenticated;
export const login = shopify.login;
export const registerWebhooks = shopify.registerWebhooks;
export const sessionStorage = shopify.sessionStorage;

webhooks.jsx #

import { authenticate } from "../shopify.server";
import db from "../db.server";

export const action = async ({ request }) => {
  const { topic, shop, session } = await authenticate.webhook(request);

  switch (topic) {
    case "APP_UNINSTALLED":
      if (session) {
        await db.session.deleteMany({ where: { shop } });
      }
      break;
    case "CUSTOMERS_DATA_REQUEST":
    case "CUSTOMERS_REDACT":
    case "SHOP_REDACT":
    case "ORDERS_CREATE": console.log(' Order create webhook run'); break;
    default:
      throw new Response("Unhandled webhook topic", { status: 404 });
  }

  throw new Response();
};

排查与解决建议 #

• 检查权限范围：确保环境变量SCOPES包含read_orders或write_orders权限，ORDERS_CREATE Webhook必须依赖订单相关权限才能正常注册。
• 重新安装应用：Webhook在应用首次安装时注册，修改配置后需要卸载并重新安装应用，触发afterAuth钩子重新完成Webhook注册。
• 验证注册状态：登录Shopify后台，进入应用设置→Webhooks页面，确认ORDERS_CREATE Webhook已成功注册且状态为“已启用”。
• 确认服务可达性：如果使用ngrok等工具暴露本地服务，确保URL正确且能正常访问，Shopify无法回调会导致Webhook事件无法推送。
• 增加日志调试：在afterAuth钩子中添加日志，确认registerWebhooks是否执行；同时在Webhook回调中补充详细日志，排查请求是否真正到达服务端。

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