[꿀팁] Lighthouse CI와 GitHub Actions를 통한 웹 성능 모니터링과 Slack 알림 연동하기 (2)

in-ch·2024년 3월 5일

꿀팁

목록 보기

11/14

전편에 이어서 계속 진행해봅시다.

5. Slack 연동하기

5.1 Slack webhook 발급받기

slack api에 접속합니다.
1.1 만약 App이 없다면 [Create New App]을 통해 새 앱을 발급받습니다.
[Feature] -> [Incoming Webhooks]에 접속합니다.
[Add New Webhook to Workspace]을 클릭하여 새 Webhook을 발급받은 후 Webhook URL을 복사합니다.
위의 LHCI_GITHUB_APP_TOKEN을 저장했던 방법처럼 repository secret을 등록합니다.

6. Send Slack Message 추가

Stack 메시지를 보내기 위해 Slack Send GitHub Action을 사용할 겁니다.

PR Author, PR URL 변수 등록 Step 추가

      - name: Get PR URL
        id: pr-url
        run: echo "::set-output name=pr_url::${{ steps.cpr.outputs.pull-request-url }}"

      - name: Get PR Author
        id: pr-author
        run: echo "::set-output name=pr_author::${{ github.actor }}"

위의 스탭은 두 가지 작업을 수행합니다.

Get PR URL: 이 스탭은 GitHub Actions workflow의 이전 단계인 Create Pull Request 작업에서 생성된 pull request의 URL을 추출합니다.
추후 메시지를 받으면 이 링크를 통해서 바로 PR을 확인해 볼 수 있습니다.
Get PR Author: 이 스탭은 현재 pull request를 생성한 Author의 이름을 추출합니다.
여기서 github.actor 변수는 GitHub Actions의 작업을 수행하는 사용자의 이름을 뜻합니다.
이걸 pr_author라는 변수로 설정하여 사용할 수 있게 합니다.
추후 메시지를 받으면 PR을 작성한 작성자의 이름을 확인할 수 있게 합니다.

Slack Message 보내기

      - name: Send Slack Message
        id: slack
        uses: slackapi/slack-github-action@v1.25.0
        with:
          payload: |
            {
              "text": "새로운 PR이 도착했습니다. 😎 \n작성자: ${{ steps.pr-author.outputs.pr_author }}\n링크: ${{ steps.pr-url.outputs.pr_url }}"
            }
        env:
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

Slack Message를 보내기 위해서 slackapi/slack-github-action 액션을 사용합니다.

with 에서는 메시지의 내용을 담을 수 있는데 JSON 형태로 담아서 보낼 수 있습니다.

물론 다음과 같이 json을 그대로 넣기 보다는 메시지가 길어질 시 파일 형태로 전하는 것도 가능합니다.

- name: Send custom JSON data to Slack workflow
  id: slack
  uses: slackapi/slack-github-action@v1.25.0
  with:
    payload-file-path: "./payload-slack-content.json"
  env:
    SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

payload에는 앞서 등록했던 pr_author, pr_url을 메시지에 담아 메시지를 보낼 수 있도록 합시다.

메시지 보내기

이제 실제 코드를 push 하도록 합시다!

주의할 점은 git flow 전략에 맞게 브랜치가 되어 있어야 한다는 점입니다.
즉, feature 브랜치를 push 해야하며 GitHub Actions는 feature 브랜치를 develop 브랜치에 merge하는 pr을 생성하게 된다는 겁니다.
만약 이게 불가능하다면 workflow가 fail이 될 수 있습니다.