---
title: GitHubActionsのビルド結果をslack-sendで通知する
description: このチュートリアルでは、GitHub Actionsとslack-sendを組み合わせて、ビルド結果をSlackに通知する方法を紹介します。
---

## 概要
このチュートリアルでは、GitHub Actionsとslack-sendを組み合わせて、ビルド結果をSlackに通知する方法を紹介します。

### 前提条件
本チュートリアルは、下記条件にてサイト運用をしていることを前提とします。
- Next.js/Nuxt.jsを利用している。
- KurocoFrontを利用している。
- GitHub Actionsを利用している。

また、このチュートリアルではslack-sendを利用してslackに通知を行います。
詳細は[slack-sendのドキュメント](https://github.com/marketplace/actions/slack-send)を参照してください。

## Slackアプリ設定から通知用アプリを作成する
以下の画面からアプリを作成します。  
https://api.slack.com/apps?new_app=1

`From an app manifest`を選択します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/7f71f308af9438575efab8f5a34452b6.png)

アプリを追加するワークスペースを選択します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/b82feba53d594319fb081662d1192e90.png)

`App Manifest`に以下のYAMLを設定してください。  
incoming-webhookでSlackに通知を行います。
```
_metadata:
  major_version: 1
  minor_version: 1
display_information:
  name: github-action-slack-send
features:
  bot_user:
    display_name: github-action-slack-send
oauth_config:
  scopes:
    bot:
      - incoming-webhook
```
![Image from Gyazo](https://t.gyazo.com/teams/diverta/368a7240d14111e8f79764fe2d159d96.png)

[Create]をクリックしてアプリを作成します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/53ee0dcbfb91c61cb538bc2383c984de.png)

## ワークスペースにアプリをインストールする
`Basic Infomation`の`Install to Workspace`からワークスペースに作成したアプリをインストールします。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/b87265fe036478803a870fde77d73fd2.png)

通知するチャンネルを選択します。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/284e65bf367d54d4cc06841c47492064.png)

アプリが追加できたら`Install app`に`Bot User OAuth Token`と`Webhook URL`が追加されているのが確認できます。  
`Webhook URL`はGitHubに登録するのでコピーしてください。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/9ad1726519c4f79f22dfe63a8c808a2a.png)


## GitHubにSecretsにWebhook URLを追加する
GitHubのリポジトリのページを開きます。  
`Settings` -> `Secrets and variables` -> `Actions` の`New repository secret`をクリック
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a7fd74fd355d28ff13d31fd221c434d5.png)

Nameに`SLACK_INCOMING_WEBHOOK_URL`を設定します。  
Secretにコピーした`Webhook URL`を設定します。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/d7f0c1dd230b542c6970dcafe533a97f.png)

入力できたら[Add secret]をクリックしてGitHubシークレットを追加します。

## Slack通知用のワークフローファイルを作成する
`.github/workflows/`に`slack-build-notifier.yml`を作成し、以下の内容を設定。
`workflows`にはビルド用のワークフローファイルの name を設定してください。
```
name: Slack Build Notifier
on:
  workflow_run:
    workflows:
      - Build and deploy to Kuroco front
    types: [completed]
jobs:
  on-success:
    runs-on: ubuntu-latest
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
    steps:
      - uses: actions/checkout@v2
      - name: Send GitHub Action trigger data to Slack workflow
        id: slack
        uses: slackapi/slack-github-action@v1.23.0
        with:
          payload: |
            {
              "blocks": [
                {
                  "type": "section",
                  "text": {
                    "type": "mrkdwn",
                    "text": "ビルド成功"
                  }
                },
                {
                  "type": "section",
                  "text": {
                    "type": "mrkdwn",
                    "text": "GitHub Actions: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.event.workflow_run.id }}"
                  }
                },
                {
                  "type": "context",
                  "elements": [
                    {
                      "type": "mrkdwn",
                      "text": "Author: <https://github.com/${{ github.event.sender.login }}|@${{ github.event.sender.login }}>"
                    }
                  ]
                }
              ]
            }
        env:
          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_INCOMING_WEBHOOK_URL }}
  on-failure:
    runs-on: ubuntu-latest
    if: ${{ github.event.workflow_run.conclusion == 'failure' }}
    steps:
      - uses: actions/checkout@v2
      - name: Send GitHub Action trigger data to Slack workflow
        id: slack
        uses: slackapi/slack-github-action@v1.23.0
        with:
          payload: |
            {
              "blocks": [
                {
                  "type": "section",
                  "text": {
                    "type": "mrkdwn",
                    "text": "ビルド失敗"
                  }
                },
                {
                  "type": "section",
                  "text": {
                    "type": "mrkdwn",
                    "text": "GitHub Actions: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.event.workflow_run.id }}"
                  }
                },
                {
                  "type": "context",
                  "elements": [
                    {
                      "type": "mrkdwn",
                      "text": "Author: <https://github.com/${{ github.event.sender.login }}|@${{ github.event.sender.login }}>"
                    }
                  ]
                }
              ]
            }
        env:
          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_INCOMING_WEBHOOK_URL }}
```

通知が成功するとSlackに以下のように通知されます。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/d9adc3954dad22ef61b39b7521f7f379.png)