Incoming Webhookを使ってslackにメッセージを送信する

アプリを開発していると通知などをslackで通知したいことがあると思います。
その際に使える方法です。

slackで通知を送る方法

slackで通知を送る方法は２種類あります。

@slack/web-apiを使う方法とIncoming Webhook(https://slack.com/intl/ja-jp/help/articles/115005265063-Slack-での-Incoming-Webhook-の利用)を使う方法です。

画像を送る場合はwebhookは使えませんが、テキストだけならwebhookで十分なので、今回はwebhookを使った通知方法について書きます。

slackで通知を送るためのapiを作成する

まずは必要なライブラリをインポートします。

yarn add @slack/webhook

pages/api配下で@slack/webhookを使います。

pages/api/slack.ts

import { IncomingWebhook } from '@slack/webhook';
import { NextApiRequest, NextApiResponse } from 'next';

const slack = {
  sendMessage: async (text: string) => {
    const url = process.env.SLACK_WEBHOOK_URL;
    const webhook = new IncomingWebhook(url);
    await webhook.send({ text });
  },
};

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const { message } = req.body;

  if (typeof message === 'undefined') {
    res.writeHead(400).end('Invalid body: message');
  }

  if (req.method === 'POST') {
    await slack.sendMessage(message);
    res.writeHead(201).end('Message has been sent');
  } else {
    res.writeHead(405).end('Method Not Allowed');
  }
};

あとは以下のように作ったAPIを叩けばOK。

  await fetch('/api/slack', {
    method: 'POST',
    mode: 'same-origin',
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify('Hello world'),
  });

簡単に送れていい感じでした。