Help us understand the problem. What is going on with this article?

GitHubのprojectsにカードが作成された時にslackに通知する

More than 3 years have passed since last update.

GCPのCloudFunctionsとGitHubのwebhookを使用して、Slackに通知してみます

順番

  1. GitHubのrepositoryを作成
  2. GCP or firebaseでCloudFunctionsを使用できるようにする
  3. Slackアカウントの作成と通知用の部屋の準備
  4. 動作確認

※Firebase CloudFuncionsは無料枠だと外部IPからのアクセスを許可できないので従量課金か$25のプランに入るしか無い

GitHubのrepositoryを作成 && Webhookの設定

GitHubがProjectsの変化を察知してWebhookでこちらが準備したエンドポイントにpayloadを送信するように設定します

まずはRepositoryを作成します 詳しくは書きません

次にwebhookの設定をします

webhookとは利用しているサービス(ここではGitHub)が特定のイベント(ここではprojectsの作成)を受け取った時に、登録されているAPI POSTエンドポイントにイベント情報を送信する仕組みのこと

GitHub: 'projectsにカード追加されたで、POSTリクエストしたろ'
CloudFunctions: 'ぎふはぶからpayload送られてきたな、slackに通知してやろ'
Slack: 'にゃーん'

こんな感じです

実際にwebhookの設定をする時は
https://github.com/あなたのGitHubId/作成したリポジトリ/settings/hooks
Add webhookから設定します

設定ページでやることは
- Payload URLの設定
- Which events would you like to trigger this webhook?項目のLet me select individual eventsを選択し、Project cardの項目のみにチェックを入れて保存

Payload URLは何でもいいですが、後に作成するCloudFunctionsのエンドポイントを入れました

CloudFunctionsでwebhook用のエンドポイントを作成

何らかのPostで受け取ることの出来るエンドポイントを用意します
https://あなたのCloudFunctionsのdomain/githubProjectWebHookPOST
のようなAPIをHTTPトリガーで用意したとします
必要な場合はCloudFunctionsのコード格納用のStorageバケットを作成してください

コードは以下
とりあえず最終的に動くものをあげましたが、最初は200返すだけのものを作ってwebhookから正しくリクエストを受け取れるか確認したほうがいいです

const https = require('https');

exports.githubProjectWebHookPOST = function githubProjectWebHookPOST(req, res) {
  if (
    req.body.action === 'created' &&
    req.body.project_card.column_id === カラム指定してるのでカラムID
  ) {
    https.get('https://slack.com/api/chat.postMessage?token=後で作成するSlackToken&channel=%23'+encodeURIComponent('チャンネル名')+'&username=あとで作成するSlackApp名&text='+encodeURIComponent(req.body.project_card.creator.login+'がお告げを追加された。\n')+encodeURIComponent(req.body.project_card.note)+'&as_user=false', (resp) => {
    let data = '';

    resp.on('data', (chunk) => {
      data += chunk;
    });
    resp.on('end', () => {
        console.log(JSON.parse(data).explanation);
      });
    }).on("error", (err) => {
      console.log("Error: " + err.message);
    });

  }
  res.status(200).send('success');
};

実際にPOSTリクエストを送信してリクエストが成功することを確認します ※このまま書いても現段階では動きません
OKならGitHubのrepository内のsetting -> webhookのPayloadURLにCloudFunctionsAPIのURLを入れて保存します

エンドポイントの準備は以上

Slackアカウントの作成と通知用の部屋とアプリとtokenの準備

Slackアカウントの作成と通知用の部屋は作ってください

次に通知用のAppの作成をします
https://api.slack.com/apps
でCreate New Appを選択します
App Nameに通知アプリケーション名を入れます
通知したい部屋を持つチームを選択してCreate App
作成した後の画像とかは適当に…

次に通知するためのtokenを生成します
https://api.slack.com/custom-integrations/legacy-tokens
このページ内に通知したい部屋を持つチームがいると思うので作成してください

ここで作成したApp名とtokenをCloudFunctionsのSlack通知用のURLに設定します
Projectsカラムの指定がない場合はif文の条件を削除してください、そのリポジトリの全てのProjectsに追加されたカードの通知が来るようになります

動作しているか確認

GitHub Projectsに新しいカードを追加してください
通知が来ない場合に確認することは
1. webhookが動作しているか
2. APIでバグが起きていないか
3. slack通知が出来るか

1.はGitHubのリポジトリのwebhook設定ページの下部にログが出てるので成功しているか確認しましょう

2.はCloudFunctionsのログを確認しましょう

3.は送信用のURLだけcurlなどで送信して通知が来るか確認しましょう

以上

参照

GitHub GraphQL API v4 Webhook
GitHub REST API v3 Event Types & Payloads ProjectCardEvent
SlackのAPIでメッセージ通知を送る(PHP)
5 Ways to Make HTTP Requests in Node.js
Slack APIのTokenの取得・場所
Node.jsでURIエンコードを行う方法

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした