---
title: GitHubActionsでgenerateに失敗した場合に、ビルドを中止しSlackに結果を通知する方法
category: KurocoFront
weight: 1
---

KurocoFrontにてサイト運用をしている際に、generateエラーが発生するとページの一部が生成されず404エラーとなる場合があります。  
サイト運用時に404エラーとなることは避けたいので、generateエラー発生時にビルドを中止する方法を説明します。

併せて、ビルドが中止された際にSlackへ通知する設定も紹介します。

## 前提
本チュートリアルは、下記条件にてサイト運用をしていることを前提とします。

- Nuxt.jsを利用
- KurocoFrontを利用

## nuxt generateのエラー発生時にビルドを中止する方法
まずは、nuxt generate時にエラーが発生した際にビルドを中止する方法を説明します。

### package.jsonの修正

package.jsonに記載されている`nuxt generate`コマンドに、`–fail-on-error` オプションを追加します。

```json [package.json]
{
  ...,
  "scripts": {
    ...
    "build": "cross-env NODE_ENV=development nuxt build",
    "generate": "cross-env NODE_ENV=development nuxt generate –fail-on-error",
    "build-prod": "cross-env NODE_ENV=production nuxt build",
    "generate-prod": "cross-env NODE_ENV=production nuxt generate –fail-on-error",
    ...
  },
  ...
}
```

:::info
`–fail-on-error` オプション はNuxt v2.14.4以降のバージョンで利用可能です。詳細は [NuxtJS公式ドキュメント](https://nuxtjs.org/ja/docs/get-started/commands/#%E3%82%A8%E3%83%A9%E3%83%BC%E6%99%82%E3%81%AE%E5%A4%B1%E6%95%97%EF%BC%88fail-on-error%EF%BC%89)をご確認ください。
:::

こちらの対応で、nuxt generate時にエラーが発生するとビルドが中止されます。

## ビルド失敗時にSlackに通知する
上記対応で、generateでエラーが発生したらビルドを中止させることができました。  
しかしながら、現状だとビルドの中止を確認するためにはGitHub Actionsを確認しに行く必要があります。

毎回GitHub Actionsを確認する手間を省くため、ビルド失敗時にSlackへ通知する方法を紹介します。

### Slackのchannelにincoming webhookの追加

`https://[ワークスペースID].slack.com/apps`にアクセスします。

:::caution
[ワークスペースID]にはご自身のSlackのワークスペースIDを記入してください。
:::

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/0fb70946a9b79e600fc1501de1d47617.png)
「Incoming webhook」を検索します。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/1f81091be5eed7d519f274a45a4fc123.png)
Slackに追加をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/13b43e20605ca3736a6f94e89a312908.png)
アプリを追加したいチャンネルを選択します。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/f062cfe356070465dc23224310cbeac7.png)
「Incomming Webhookインテグレーションの追加」ボタンをクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/7c007e35ba2a25fb908c1b7f57105403.png)
すると、Incoming webhookが追加されました。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/c5405407a4d041b1fceff054b5e57e1e.png)
Webhook URLをコピーします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/2099ad9b3fb36c0333829130387d1489.png)
以上でSlackの設定は終了です。

### Webhook URLをGitHubのActions secretsに追加する
次にGitHubを設定します。以下の設定にはAdminの権限が必要になります。  
GitHubの対象のリポジトリから、[Settings] -> [Secrets] をクリックしActions secrets画面を表示します。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/8fdbef7e1553cb0c6d58518990e26cb5.png)
Actions secrets画面より、「New repository secret」をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/83548bfa32e7013fee8cb4749095f748.png)
下記を記入し、「Add secret」をクリックします。

| 項目 | 値 |
| :--- | :--- | 
| Name | SLACK_WEBHOOK_URL |
| Value | コピーしたWebhook URL |

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/22b7973a2c06a4b1b94b8110ca4f34a3.png)
すると、Repository secretsが追加されます。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/fd59cc6b346fe879b47d1f2035671b9d.png)
以上でGitHubの設定は完了です。

### .github/workflowsのYAMLファイル修正
最後に、`.github/workflows`配下に配置したYAMLファイルへSlack通知の設定を追記します。  
YAMLファイルの`pullreq_build`と`pushed_build`のstepに下記のように設定を記入します。

```yml 
      - name: Slack Notification on Failure
        uses: rtCamp/action-slack-notify@master
        if: failure()
        env:
          SLACK_CHANNEL: kuroco_channel
          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL }}
          SLACK_TITLE: build error
          SLACK_MESSAGE: 'https://example.g.kuroco.app/'
          SLACK_COLOR: danger
```

なお、下記項目は、ご自身の環境により修正してください。

| 項目 | 値 |
| :--- | :--- | 
| SLACK_CHANNEL | 通知先チャンネル名を記入 |
| SLACK_MESSAGE | 通知時に表示するメッセージを記入。 |

:::tip
Slackの通知に[rtCamp/action-slack-notify](https://github.com/rtCamp/action-slack-notify)を利用しています。
:::

それでは、YAMLファイルの`pullreq_build`と`pushed_build`のstepにそれぞれ追記します。

#### pullreq_buildへの追記

`pullreq_build`のstepsに追記します。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/901a095c3a4a8a06e783526ca3f27e30.png)
#### pushed_buildへの追記

`pushed_build`のstepsに追記します。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/120be53bdf79c62c79981e6612ab6653.png)
以上で設定完了です。  

設定後、generateエラーが発生した際に下記のようにSlackに通知されます。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/381ab88698119c2583c27c40c4e175c7.png)