0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Firebase】Cloud Functionsのトリガー関数でSlackの通知を送信する

Last updated at Posted at 2021-11-05

開発環境

  • Node: v10
  • DB: Cloud Firestore
  • 言語: TypeScript

やりたいこと

FirebaseのCloud Functionsのトリガー関数が呼ばれた際に、Slackで追加されたことを通知したい。

環境構築

Slackアプリケーションを作成する

こちらからSlackアプリケーションを作成します。

ページのCreate New Appボタンを押下します。

スクリーンショット_2021-11-04_19_39_02.png

App Nameにアプリケーションの名前を、**Pick a workspace to develop your app in:**に通知したいSlackのワークスペースを選択して、Create Appボタンを押してアプリケーションを作成してください。

スクリーンショット 2021-11-04 19.40.17.png

Webhook URLを作成する

画面左上にある、どのアプリケーションを選択しているかの項目に、作成したアプリの名前が表示されていることを確認してください。
Slackアプリケーションが作成できたら左のメニューからIncoming Webhooksをクリックします。

スクリーンショット_2021-11-05_17_43_29.png

Incoming Webhooksの設定ページが開かれるので、Activate Incoming Webhooksのスイッチを有効にしてください。

有効にすると、Webhook URLs for Your Workspaceのページが開かれるので、下部にあるAdd New Webhook to Workspaceのボタンを押下してください。

スクリーンショット_2021-11-04_19_47_47.png

そうすると、Slackの通知先のチャンネルを選択する画面が開かれます。
任意のチャンネルを選択し、許可するボタンを押下してください。

スクリーンショット_2021-11-04_16_51_33.png

許可するとWebhook URLが作成されます。
こちらのURLにPOSTリクエストをすることで、選択したチャンネルに通知が飛ぶようになります。

試しに**Sample curl request to post to a channel:**のCopyボタンでURLをコピーして、ターミナルで実行してみましょう。

スクリーンショット_2021-11-04_19_51_55.png

コマンドを実行するとOKと表示され、

スクリーンショット_2021-11-04_19_55_50.png

Slackにも通知されていることが確認できます。

スクリーンショット_2021-11-04_19_57_14.png

実装

それでは本題のCloud Firestoreのあるコレクションにドキュメントが追加された際に、Slackで通知を飛ばすように実装していきます。

パッケージインストール

SlackのAPIクライアントをパッケージに追加します。

npm i @slack/webhook

Cloud Functionsの環境変数にSlackのWebhookのURLを設定する

WebhookのURLは外に漏れると外部の人間から通知されるようになってしまいますので、Gitで管理してはいけません。
ということでCloud Functionsの環境変数からアクセスできるようにします。
下記のコマンドでWebhookのURLを環境変数に設定します。

// 環境変数設定のコマンド
firebase functions:config:set slack.web_hook_url={先ほど作成したWebhookのURL}

設定されているか確認するためには下記のコマンドを実行します。

// 環境変数確認のコマンド
firebase functions:config:get 

// 出力結果
{
  "slack": {
    "web_hook_url": "https://hooks.slack.com/services/XXX/YYY/ZZZ"
  }
}

エミュレーターでも環境変数を使いたい場合は、こちらの記事が参考になります。

Slackに通知を送る

Slackに通知を送る実装はこちらです。

slackService.ts
import * as slack from '@slack/webhook';

export class SlackService {
    /**
     * Slackの通知を送信する
     * @param webhookUrl WebhookのURL
     * @param message 通知する内容
     * @returns 通知送信のPromiss
     */
    static sendMessage = (webhookUrl: string, message: string): Promise<slack.IncomingWebhookResult> => {
        const webhook = new slack.IncomingWebhook(webhookUrl);
        return webhook.send({
            text: message,
        });
    };
}

引数のwebhookUrlのURLに、引数messageの内容の通知を送信します。

環境変数からWebhookのURLを取得する

環境変数からWebhookのURLを取得する実装はこちらです。

slackWebhookUrl.ts
import * as functions from 'firebase-functions';

export class SlackWebHookUrl {
    static webhookUrl = () => {
        return functions.config().slack.web_hook_url;
    }
}

functions.config()で環境変数にアクセスできます。
slack.web_hook_urlの部分は、先ほどコマンドで実行した際につけた名前です。
今後WebhookURLが追加された時にここに追加していく想定でクラスにしています。

ドキュメントが追加された際にSlack送信処理を呼び出す

今回はpostsコレクションにドキュメントが追加された想定で実装します。
コレクション名やimport文などは適宜変更してください。

postFunctions.ts
import * as functions from 'firebase-functions';
import { Post } from '../entities/post';
import { SlackService } from '../services/slackService';
import { SlackWebHookUrl } from '../constants/slackWebHookUrl';

export const onCreatePost = functions.firestore.document(`posts/{postId}`).onCreate(async (snap, context) => {
    // 追加されたドキュメント
    const post = snap.data() as Post
    // メッセージデータ作成
    const messageData = {
        'ID': snap.id,
        '名前': post.name,
        'リクエスト時刻': post.createdAt.toDate().toLocaleString(),
    }
    // メッセージを見やすくする
    const message = JSON.stringify(messageData, null, '\t');
    // Slackに通知を送信する
    await SlackService.sendMessage(SlackWebHookUrl.webhookUrl(), message);
});

実行結果

実装できたらデプロイし、postsコレクションにドキュメントを追加し、Slackの通知が送信されることを確認します。

スクリーンショット_2021-11-05_17_37_17.png

以上です。

0
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?