misc.log

日常茶飯事とお仕事と

GitLabの更新通知をSlackに自動で投げるようにする

Slackを使ってみよう的な流れから、どうせならGitLab上でのソース更新などの通知もいくんじゃないかとおもったら、ありました。やりかた。

WebHook URLの準備(Slack側)

Slack側で「https://api.slack.com/」にアクセスします。

api.slack.com

ここにある「App features」の「Incoming webhooks」を選択。

f:id:frontline:20190315161845p:plain
Incoming webhooksを選択

次に、Slack側に「通知を受けるアプリ」を作ります。アプリと言っても設定だけで済ませられるものです。これには、上記のリンク先にある下図の部分、緑色の「Create your Slack app」というボタンを押します。

f:id:frontline:20190315162111p:plain
Slack appを作る

「Your Apps」とタイトルが付いたページが表示されるので、「Create New App」を押し、下図のような画面で「アプリの名前(何でもいいです)」と、アプリを紐付けるワークスペースを選択してください。

f:id:frontline:20190315162316p:plain
アプリ名とワークスペースの設定

次に、「Basic Information」というタイトルのページに飛ぶので、ここで作成したアプリをWeb経由で呼び出す Incoming Webhooksという情報を取得します。下図の画面で「Incoming Webhooks」というリンクをクリックしてください。

f:id:frontline:20190315162542p:plain
Building Apps for Slack / Incoming Webhooks

すると、下図のような画面(Activate Incoming Webhooks)に遷移します。右上のスライドボタンを「ON」に切り替えると下部が追加表示されるので、下にある「Add New Webhook to Workspace」を押してください。

f:id:frontline:20190315162754p:plain
Activate Incoming Webhooks

そうすると下図のような画面になります。通知を投稿する先のチャンネルを聞いてくるので「投稿先」のリストから1つを選択してください。選択したら「許可する」を押します。

f:id:frontline:20190315163038p:plain
投稿先チャンネルの選択指定

先ほどの画面に戻りますが、新しくWebhook URLのリストに行が追加されているはずです。この「Copy」ボタンがある行のURLが、Web経由で今作ったアプリに通知を出すアドレスになります。これをコピーしてください。コピーしたアドレスは、このあとGitLab側で「通知先」の指定設定に利用します。

f:id:frontline:20190315165333p:plain
Webhookのコピー

GitLab側の通知指定

次に、通知を出したいGitLabのプロジェクトのページを開き、設定から「インテグレーション」を選んでください。

f:id:frontline:20190315163456p:plain
GitLab設定/インテグレーション

インテグレーション設定の画面を下にスクロールすると「Project services」という項目の中に「Slack Notifications」という項目があります。このリンクをクリックしてください。

f:id:frontline:20190315163715p:plain
Project Services / Slack notifications

リンク先では、「Slack notifications」とタイトルが付いたページが表示されます。ここでは、通知を出すイベントを選択指定できます。まずは一番上に「Active」というチェックがあるのでこれをONにしてください(これをONにしないと、設定しても通知機能が有効になりません)。

f:id:frontline:20190315163924p:plain
Slack notifications / Active設定

画面をスクロールすると「Webhook」という項目があるので、先ほどSlack側でアプリ作成の最後にコピーしたURLを貼り付けてください。また、Usernameにも名前を入れられますが、これに入れた名前がどこで使われるかはちょっと判りませんでした。とりあえず入れておきましょう。
最後に、その下にある緑色のボタン「Test settings and save changes」を押すと、直近の更新情報がSlack側に飛ぶはずです。これで設定は完了です。

最後に

ここに貼付した画像や設定内容はSlack側の機能更新で変わる可能性があります。が、おそらく大筋の手順は変わらないと思いますので、もし画面や文言が違う場合は適宜読み替えてやってみてください。


Netlifyで始めるサーバーレス開発 (技術書典シリーズ(NextPublishing))