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 オプションを追加します。

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

–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を記入してください。

Image (fetched from Gyazo)

「Incoming webhook」を検索します。

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

Webhook URLをコピーします。

Image (fetched from Gyazo)

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

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

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

項目
NameSLACK_WEBHOOK_URL
ValueコピーしたWebhook URL

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

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

最後に、.github/workflows配下に配置したYAMLファイルにSlack通知の設定を追記します。
YAMLファイルのpullreq_buildpushed_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_buildpushed_buildのstepにそれぞれ追記します。

pullreq_buildへの追記

pullreq_buildのstepsに追記します。

Image (fetched from Gyazo)

pushed_buildへの追記

pushed_buildのstepsに追記します。

Image (fetched from Gyazo)

以上で設定完了です。

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

Image (fetched from Gyazo)

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。