コンテンツにスキップ

Twilioを使用したGitHub SMS通知

Last reviewed: 12 months ago

このチュートリアルでは、GitHubリポジトリの更新を受け取るためのSMS通知システムをWorkers上に構築する方法を学びます。リポジトリに新しいアクティビティがあると、あなたのWorkerがTwilioを使用してテキスト更新を送信します。

以下のことを学びます：

  • Workersを使用してWebhookを構築する。
  • WorkersをGitHubとTwilioに統合する。
  • Wranglerを使用してWorkerのシークレットを管理する。

リポジトリに変更をプッシュした後に携帯電話でテキストメッセージを受信するアニメーションGIF

Before you start

All of the tutorials assume you have already completed the Get started guide, which gets you set up with a Cloudflare Workers account, C3 ↗, and Wrangler.

Workerプロジェクトの作成

まず、コマンドラインでnpm create cloudflare@latestを使用してWorkerプロジェクトを作成します：

Terminal window
npm create cloudflare@latest -- github-twilio-notifications

For setup, select the following options:

  • For What would you like to start with?, choose Hello Worldの例.
  • For Which template would you like to use?, choose Hello World Worker.
  • For Which language do you want to use?, choose JavaScript.
  • For Do you want to use git for version control?, choose Yes.
  • For Do you want to deploy your application?, choose No (we will be making some changes before deploying).

アプリケーションがデプロイされたURLをメモしておいてください。これはGitHubのWebhookを設定する際に使用します。

Terminal window
cd github-twilio-notifications

新しいgithub-sms-notificationsディレクトリ内のsrc/index.jsは、Cloudflare Workersアプリケーションのエントリポイントを表します。このファイルをチュートリアルのほとんどの部分で設定します。

このチュートリアルには、GitHubアカウントとリポジトリが必要です。まだ設定していない場合は、新しいGitHubアカウントを作成 ↗し、新しいリポジトリを作成 ↗してチュートリアルを続けてください。

まず、リポジトリのWebhookを作成して、Workerに更新を投稿します。Worker内で更新を解析し、最後にTwilioにPOSTリクエストを送信してテキストメッセージを送ります。

完成したコードはこのGitHubリポジトリ ↗を参照できます。

GitHubの設定

まず、リポジトリに更新があるときにWorkerに投稿するGitHubのWebhookを設定します：

  1. GitHubリポジトリの設定 > Webhook > Webhookを追加に移動します。

  2. Payload URLを、アプリケーションが最初にデプロイされたときにメモしたWorker URLの/webhookパスに設定します。

  3. Content typeのドロップダウンで、_application/json_を選択します。

  4. Secretフィールドに、任意のシークレットキーを入力します。

  5. **このWebhookをトリガーするイベントはどれですか？**で、個別のイベントを選択させてくださいを選択します。通知を受け取りたいイベント（プルリクエスト、プッシュ、ブランチまたはタグの作成など）を選択します。

  6. Webhookを追加を選択して設定を完了します。

GitHubのWebhook設定ダッシュボードでWebhookを設定する手順に従っているスクリーンショット

レスポンスの解析

ローカル環境が設定されたら、Workerを使用してリポジトリの更新を解析します。

最初に生成されたindex.jsは次のようになります：

export default {
  async fetch(request, env, ctx) {
    return new Response("Hello World!");
  },
};

Requestのrequest.methodプロパティを使用して、アプリケーションに送信されるリクエストがPOSTリクエストであるかどうかを確認し、リクエストがPOSTリクエストでない場合はエラーレスポンスを送信します。

export default {
  async fetch(request, env, ctx) {
    if (request.method !== "POST") {
      return new Response("POSTリクエストを送信してください！");
    }
  },
};

次に、リクエストが正しいシークレットキーで送信されていることを確認します。GitHubは各ペイロードにシークレットキーを使用してハッシュ署名を付加 ↗します。checkSignatureというヘルパー関数を使用して、ハッシュが正しいことを確認します。その後、リクエストをJSONとして解析することでWebhookからデータにアクセスできます。

async fetch(request, env, ctx) {
  if(request.method !== 'POST') {
    return new Response('POSTリクエストを送信してください！');
  }
  try {
    const rawBody = await request.text();


    if (!checkSignature(rawBody, request.headers, env.GITHUB_SECRET_TOKEN)) {
      return new Response("パスワードが間違っています。再試行してください", {status: 403});
    }
  } catch (e) {
    return new Response(`エラー:  ${e}`);
  }
},

checkSignature関数は、Node.jsのcryptoライブラリを使用して、受信したペイロードを既知のシークレットキーでハッシュ化し、リクエストハッシュと一致することを確認します。GitHubはSHA-256形式でハッシュを計算するためにHMACのヘキサダイジェストを使用します。この関数は、エクスポートの前にindex.jsファイルの先頭に配置します。

import { createHmac, timingSafeEqual } from "node:crypto";
import { Buffer } from "node:buffer";


function checkSignature(text, headers, githubSecretToken) {
  const hmac = createHmac("sha256", githubSecretToken);
  hmac.update(text);
  const expectedSignature = hmac.digest("hex");
  const actualSignature = headers.get("x-hub-signature-256");


  const trusted = Buffer.from(`sha256=${expectedSignature}`, "ascii");
  const untrusted = Buffer.from(actualSignature, "ascii");


  return (
    trusted.byteLength == untrusted.byteLength &&
    timingSafeEqual(trusted, untrusted)
  );
}

これを機能させるために、wrangler secret putを使用してGITHUB_SECRET_TOKENを設定する必要があります。このトークンは、GitHubのWebhookを設定する際に選択したシークレットです：

Terminal window
npx wrangler secret put GITHUB_SECRET_TOKEN

wrangler.tomlファイルにnodejs_compatフラグを追加します：

compatibility_flags = ["nodejs_compat"]

Twilioでテキストを送信する

リポジトリのアクティビティについてのテキストメッセージをTwilioを使用して送信します。Twilioアカウントとテキストメッセージを受信できる電話番号が必要です。Twilioガイドを参照して設定してください ↗。 (Twilioが初めての場合、彼らはインタラクティブゲーム ↗を提供しており、プラットフォームの使い方を学び、サービスの初心者向けに無料クレジットを得ることができます。)

次に、Twilio APIエンドポイントにPOSTリクエストを送信することでテキストメッセージを送信するヘルパー関数を作成します。Twilioリファレンスを参照 ↗して、このエンドポイントについて詳しく学んでください。

sendText()という新しい関数を作成し、Twilioへのリクエストを処理します：

async function sendText(accountSid, authToken, message) {
  const endpoint = `https://api.twilio.com/2010-04-01/Accounts/${accountSid}/Messages.json`;


  const encoded = new URLSearchParams({
    To: "%YOUR_PHONE_NUMBER%",
    From: "%YOUR_TWILIO_NUMBER%",
    Body: message,
  });


  const token = btoa(`${accountSid}:${authToken}`);


  const request = {
    body: encoded,
    method: "POST",
    headers: {
      Authorization: `Basic ${token}`,
      "Content-Type": "application/x-www-form-urlencoded",
    },
  };


  const response = await fetch(endpoint, request);
  const result = await response.json();


  return Response.json(result);
}

これを機能させるために、ソースコードからACCOUNT_SIDとAUTH_TOKENを隠すためのシークレットを設定する必要があります。コマンドラインでwrangler secret putを使用してシークレットを設定できます。

Terminal window
npx wrangler secret put TWILIO_ACCOUNT_SID
npx wrangler secret put TWILIO_AUTH_TOKEN

githubWebhookHandlerを修正して、先ほど作成したsendText関数を使用してテキストメッセージを送信します。

async fetch(request, env, ctx) {
  if(request.method !== 'POST') {
    return new Response('POSTリクエストを送信してください！');
  }
  try {
    const rawBody = await request.text();
    if (!checkSignature(rawBody, request.headers, env.GITHUB_SECRET_TOKEN)) {
      return new Response('パスワードが間違っています。再試行してください', {status: 403});
    }


    const action = request.headers.get('X-GitHub-Event');
    const json = JSON.parse(rawBody);
    const repoName = json.repository.full_name;
    const senderName = json.sender.login;


    return await sendText(
      env.TWILIO_ACCOUNT_SID,
      env.TWILIO_AUTH_TOKEN,
      `${senderName}があなたのリポジトリ${repoName}に${action}を完了しました`
    );
  } catch (e) {
    return new Response(`エラー:  ${e}`);
  }
};

npx wrangler publishコマンドを実行してWorkerプロジェクトを再デプロイします：

Terminal window
npx wrangler deploy

リポジトリにプッシュした後にテキストを受信する動画

これで、リポジトリに更新（GitHubのWebhook設定で設定したもの）を行うと、すぐにテキストが届くようになります。Gitを使ったことがない場合は、GIT PushとPullのチュートリアル ↗を参照してリポジトリにプッシュしてください。

完成したコードはGitHubで参照 ↗できます。

このチュートリアルを完了することで、Workersを使用してWebhookを構築し、WorkersをGitHubとTwilioに統合し、Wranglerを使用してWorkerのシークレットを管理する方法を学びました。

関連リソース

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings