GitLabとslackを連携し、slackへの通知を自動化しよう。【最新版】


:::note info
GitLabのマージリクエストを、slackに自動通知させる方法を示しています。
:::

# 前提

- GitLab上で既にプロジェクトが立ち上がっている。
- slack上で既にチャンネルが作られている。

# GitLabとslackを連携しよう。

## 1. slack APIでWeb API アプリケーションを作成。

今回は **slack API** を使用し設定を行うので、こちら「 [Slack API](https://api.slack.com/) 」をクリック。
GitLabとslackを連携には、**Web API アプリケーション** が必要なので、そちらを作成していきます。 アクセス後、画面上にある「**Create an app**」をクリック。
![スクリーンショット 2022-10-06 16.28.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/2668cb27-c8ca-d354-38e7-f7a068e5c517.png)

モーダルの画面が出てきます。ここでは、アプリのスコープと設定方法を選択します。
最初から設定を行うので、「**From scratch**」をクリック。
![スクリーンショット 2022-10-06 16.47.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/1278bedf-c843-c827-2eec-457398ea0852.png)

次に、アプリに名前を付け、該当するワークスペースを選択します。
***App Name***  :  slackに通知される際のタイトルを設定。(基本的にプロジェクト名)
***Pick a workspace to develop your app in***  :  該当するワークスペースを選択。

:::note warn
該当するワークスペースが出てこない場合は、下記画像の青い枠で囲われているところへアクセスしましょう。slackのログインページに飛ぶので、ログインを行うと管理されているワークスペース全てが選択肢にでてきます。選択後、自動で上の画像のような画面に切り替わるので、再度設定していきましょう。
:::
これでWeb API アプリケーションを作成する上での設定が完了しましたので、「**Create App**」をクリック。
![スクリーンショット 2022-10-06 17.19.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/a717ce00-02e2-aca6-4350-401c458a9d6c.png)

これで、Web API アプリケーションが作成されました。次は、作成したアプリを用いて、Git Labに接続するためのWebhook URLを作成しましょう。
## 2. Git Labに接続するための Webhook URLを作成
外部(GitLab)からのメッセージをSlackに投稿するので、「**Incoming Webhooks**」をクリック。
![スクリーンショット 2022-10-06 17.50.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/9f84a36b-7c70-4673-7c85-37735971397f.png)

ここでは、Webhooksの有効化を設定します。
本文をざっと要約すると、
> **「Incoming webhooksは、外部ソースからSlackにメッセージを投稿するシンプルな方法。JSONペイロードを持つ通常のHTTPリクエストを使用します。Webhookを追加するにはボットユーザーが必要なので、アプリにボットユーザーがいなかったら自動で作成します」**
> 
らしい、、翻訳かけただけです。ここを「 **on** 」にします。
![スクリーンショット 2022-10-06 17.58.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/bef42354-c366-2043-f648-c2155a39ac3a.png)

onにすると、下にコンテンツが出てきます。Webhookはまだ追加されてないよと言われているので、「**Add New Webhook to Workspace**」をクリック。
![スクリーンショット 2022-10-06 18.27.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/995b021c-b2dd-b90a-5aab-3f8e715327d6.png)

次に、作成したアプリの投稿先を設定し、アクセス権限のリクエストの許可を設定します。
こちらは該当するチャンネルを選択して「**許可する**」をクリック。
![スクリーンショット 2022-10-06 18.32.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/f6b9cc02-0379-e589-125b-43c43d874569.png)

許可をすると、無事Git Labに接続するためのWebhook URLが生成されました。
こちらの赤い枠のURLを使用してGit Labとの接続を行なっていくので、「**copy**」を押しましょう。
![スクリーンショット 2022-10-06 18.42.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/83e2c077-9a2d-305b-66a8-b270d81f8526.png)

これで、Git Labに接続するための Webhook URLを作成しましたので、実際にGit Labで設定を行っていきましょう。
## 3. Git Lab上で、接続の設定を行う。
[Git Lab](https://gitlab.com/users/sign_in) にログインし、今回設定を行うプロジェクトへ入ります。
左下の「設定」にカーソルを合わせると、右側にコンテンツが出てきます。出てきたコンテンツ内の「**インテグレーション**」をクリック。
![スクリーンショット 2022-10-06 19.07.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/e0cbd365-b939-0cf8-87ea-3b2293b162a3.png)

インテグレーションに入り、下へスクロールをしてくと「**Slack notifications**」という項目がある。こちらは、slackの通知に関しての設定を行う場所なので、クリックしましょう。
![スクリーンショット 2022-10-06 19.26.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/9320077e-83cd-e1e7-aebb-a7c035b196e0.png)

Slack notifications内を下へスクロールしていくと、「**Webhook**」という項目があるのでこちらに先ほどコピーした Webhook URL を貼り付ける。一度赤い枠の「**test settings**」をクリックし、該当のチャンネルに投稿が自動反映されたかを確認する。

:::note warn
Slack notificationsの項目を変更しようとすると、全てグレーアウトになっており変更できない場合があります。そういった場合、Slack notifications内の右上に「**Use default settings**」と選択されている項目があるかと思います。そちらを「**Use custom settings**」に変更すると全て変更可能になります。
:::
![スクリーンショット 2022-10-07 11.09.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/689f9bd7-d151-456e-9950-b2707359193c.png)

slackの画面を見ると、このようにtest settingsで通知がslackに自動反映されているのがわかります。自動反映が確認できたら、変更を保存し実際にマージリクエストをした際に通知がいくのかを確認しましょう。
![スクリーンショット 2022-10-07 11.29.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/bac52526-56f4-ba7a-5287-964512787782.png)

マージリクエストした際のslack画面です。
しっかり自動反映されたことが確認できました。
![スクリーンショット 2022-10-07 12.48.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/9e078e52-dc8f-b7f9-f6a7-d2d67569fb22.png)

これでGitLabとslackを連携が完了です。プロジェクトを立ち上げた際は必ずこの作業を行いましょう。