Workflow WebhooksWorkflow Webhooks

GitHubをShopify Flowに連携させる方法

GitHubでは、リポジトリや組織内で何かが発生するたびに（プッシュ、リリース、イシュー、プルリクエスト、ワークフローの実行など）、Webhookが送信されます。Workflow Webhooksは、その呼び出しをShopify Flowのトリガーに変換するため、ストア側でそれに応じて対応することができます。具体的には、お客様にタグを付ける、注文メモを追加する、社内メールを送信する、メタフィールドを更新するなど、Shopify Flowで可能なあらゆる操作を実行できます。

このガイドでは、GitHubが送信し、Workflow Webhooksが受信・検証し、Shopify Flowが処理を行うという一連の流れをすべて設定します。すべてのリクエストにおいてGitHubのHMAC署名が確認されるため、GitHub以外ではワークフローを開始することができません。

どのようなものを作れるか

  • 商品データを変更するリリースが出荷された際は、マーチャンダイジングチームにメールでお知らせください。
  • リリースを行うたびに、現在のビルドまたはテーマのバージョンをショップのメタフィールドに書き込んでください。
  • 他のインシデントで既に使用しているのと同じ Shopify Flow を使用して、スケジュールされたワークフローの実行が失敗した際にスタッフに通知します。

送信される代表的なイベント：push、release（公開）、issues（開封、非表示）、workflow_run（完了）。

始める前に

  • Workflow Webhooks Shopifyストアにインストールされています。
  • Shopify Flow インストール済みで、ShopifyのApp Storeから無料で入手できます。
  • Webhookを作成する権限を持つGitHubアカウント。

ステップ 1 - Workflow Webhooks で Webhook を作成します

  1. Workflow Webhooks を開き**、[Webhook] → [Create Webhook]** の順に選択し、Shopify Flow で識別しやすい名前（例：GitHub events）を付けてください。
  2. **「認証」**で、「**HMAC」**を選択してください。
  3. 「署名プロバイダー」で、GitHub を選択してください。アプリがヘッダー、アルゴリズム、署名付きペイロード、リプレイウィンドウを自動的に入力してくれます。これ以外の設定は必要ありません。
  4. 「シークレット」の欄はひとまず空のままにして、「保存」をクリックしてください。ページに表示されているWebhookのURLをコピーしてください。

その他の認証モードについては、認証 を、Shopify Flow に送信するフィールドの選択については、ペイロードのマッピングとShopify Flow変数 を参照してください。

ステップ 2 - GitHub にエンドポイントを追加します

リポジトリ（または組織）で、**「設定」→「Webhook」→「Webhookを追加」**を開き、URLを「ペイロードURL」に貼り付け、コンテンツタイプを「application/json」に設定し、「シークレット」を入力してください。

GitHubの署名用シークレットの確認方法

GitHubのWebhookで設定したシークレット（[設定] → [Webhook] → [シークレット]）です。

GitHubのWebhook署名に関する公式ドキュメント（）には、お客様のアカウントに適用される正確な文言とスクリーンショットが掲載されています。

そのシークレットを、Workflow Webhooks の Webhook の**「Secret」**フィールドに貼り付けて、保存してください。これ以降、GitHub からのすべての配信は、Shopify Flow に到達する前に検証されるようになります。

これが何をチェックするのか

何 値
署名ヘッダー X-Hub-Signature-256
署名の位置 プレフィックス「sha256=」の後のヘッダー値
何が署名されたのでしょうか {body}
署名 HMAC-SHA256、16進数エンコード
タイムスタンプ この送信者には使用されていません
リプレイ防止機能 なし - この送信者はタイムスタンプに署名しないため、すべての有効な署名は引き続き有効です
その秘密 プレーンテキストとして使用します。送信者が表示しているとおりに、そのまま貼り付けてください。

署名付きペイロードにおいて、{body} は、バイト単位でリクエスト本体の生データそのものです。

これらのいずれかの条件を満たさないリクエストは、401 のエラーで拒否され、沿革とトラブルシューティング に記録され、ワークフローは開始されません。

ステップ 3 - 「Shopify Flow」ワークフローを作成する

  1. Shopify Flow でワークフローを作成し、「Workflow Webhooks」トリガーを選択してください。
  2. 「**イベントの記録」**をクリックし、GitHubからテストイベントを送信してください（または、Workflow Webhooksの「テストを送信」を使用してください）。これにより、Shopify Flowがデータの構造を学習します。
  3. 所有しているすべてのWebhookは同じFlowトリガーを起動するため、このワークフローをGitHubのみに限定するには、Webhook IDを最初の条件として追加してください。IDはWebhookページに表示されています。
  4. アクションを追加してください ― お客様にタグを付けたり、メモを追加したり、社内メールを送信したり、メタフィールドを更新したりできます。
Shopify Flow
Shopify Flowで「トリガーを選択」を選択し、「Workflow Webhooks」を開き、「Webhookトリガー」を選択してください。
Shopify Flowの条件：Webhook IDが、あるWebhookのIDと一致する
すべてのワークフローの最初のステップは、Webhook ID に基づく条件設定です。これにより、この Webhook に対してのみワークフローが実行されます。
完成したワークフロー：Webhookトリガー、Webhook IDに基づく条件、そして「True」分岐で内部メールを送信します。
完成したワークフローは、トリガー、Webhook ID に基づく条件、そして「True」分岐でのアクションという流れになります。

ステップ4 - エンドツーエンドでテストする

GitHubで実際のイベントをトリガーします。「**Workflow Webhooks」→「History」**に、ステータスが「**Success」**の呼び出しが表示されるはずです。署名が正しくない場合は、その理由が記載された失敗のエントリが表示されます。また、署名付きWebhookの検証 では、どのステップで失敗したかを正確に示す署名テスターについて解説されています。

「History」に、リクエストヘッダー、ペイロード、ステータス、所要時間、および識別子を含む1つの呼び出しが開かれました
「History」で配信されたイベント：ステータスが「Success」の場合、Shopify Flowがそれを受け入れたことを意味します。
署名が一致しません▾

順に、シークレット（最も一般的な原因は、余分なスペースや、間違った環境のキーの使用です）、送信者が別のエンドポイントのシークレットを使用していないか、そしてGitHubとアプリの間でボディが書き換えられていないか、という点です。署名は生のバイト列を対象としているため、JSONのフォーマットを変更するプロキシによって署名が破損してしまいます。 Webhook ページの署名テスターには、署名された正確なテキストが表示されます。

どのリクエストでも401エラーが表示されます▾

Webhookの認証が**「HMAC」**に設定され、GitHubプロバイダーが選択されていること、シークレットが入力されていること、そしてGitHubがアプリに表示されているURL（末尾のコードを含めて）に正確に投稿していることをご確認ください。

「履歴」には何も表示されません▾

リクエストは届きませんでした。GitHubでURLを再確認し、GitHub自身の配信ログで受信したレスポンスを確認してください。「404」というエラーは、Webhookの設定が間違っているか削除されていることを意味します。「429」というエラーは、プランの呼び出し制限を超えていることを意味します。詳細は プランと利用方法 をご覧ください。

ワークフローが誤ったイベントに対して実行されてしまいます▾

ストア内のすべてのWebhookは、同じShopify Flowトリガーを起動します。ワークフローの最初のステップとして、Webhook IDに基づく条件を追加するか、GitHubから送信するイベントを絞り込んでください。

関連情報