GitHubActionsでgenerateに失敗した場合に、ビルドを中止しSlackに結果を通知する方法

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

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

前提

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

• Nuxt.jsを利用
• KurocoFrontを利用

nuxt generateのエラー発生時にビルドを中止する方法

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

package.jsonの修正

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

{
  ...,
  "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",
    ...
  },
  ...
}

備考

–fail-on-error オプション はNuxt v2.14.4以降のバージョンで利用可能です。詳細は NuxtJS公式ドキュメントをご確認ください。

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

ビルド失敗時にSlackに通知する

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

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

Slackのchannelにincoming webhookの追加

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

注意

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

「Incoming webhook」を検索します。

Slackに追加をクリックします。

アプリを追加したいチャンネルを選択します。

「Incomming Webhookインテグレーションの追加」ボタンをクリックします。

すると、Incoming webhookが追加されました。

Webhook URLをコピーします。

以上でSlackの設定は終了です。

Webhook URLをGitHubのActions secretsに追加する

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

Actions secrets画面より、「New repository secret」をクリックします。

下記を記入し、「Add secret」をクリックします。

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

すると、Repository secretsが追加されます。

以上でGitHubの設定は完了です。

.github/workflowsのYAMLファイル修正

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

      - 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	通知時に表示するメッセージを記入。

ヒント

Slackの通知にrtCamp/action-slack-notifyを利用しています。

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

pullreq_buildへの追記

pullreq_buildのstepsに追記します。

pushed_buildへの追記

pushed_buildのstepsに追記します。

以上で設定完了です。

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