🔔 GitHub Actions 串接 Slack 通知教學｜自動發送 CI/CD 結果到 Slack 頻道

📖 文章摘要（Meta Description）

想讓你的 CI/CD 流程更即時透明？本篇教學將手把手教你如何串接 GitHub Actions 與 Slack，當建構、部署成功或失敗時自動推播通知到指定頻道，提升開發與團隊協作效率！

---

💡 為什麼要在 GitHub Actions 加入 Slack 通知？

當我們使用 GitHub Actions 進行 CI/CD，自動化建構與部署後，常會碰到這個問題：

👉 「我怎麼知道 pipeline 成功了？」
👉 「誰來幫我盯部署結果？」

這時，只要整合 Slack，就能：

✅ 自動通知成功或失敗結果
✅ 即時同步開發狀態給整個團隊
✅ 節省來回檢查 GitHub Actions 頁面時間
✅ 可針對不同階段（build/deploy）設定不同通知樣式

---

🧰 前置準備

在開始之前，你需要準備以下幾項：

1. ✅ Slack 工作區 & 權限

2. ✅ 一個 Slack App 並啟用 Webhook 功能

3. ✅ 一個公開或私有的 Slack 頻道

4. ✅ GitHub Repository 並啟用 Actions 功能

---

🔐 Step 1：建立 Slack Webhook URL

1. 進入 Slack App 管理頁

2. 建立新 App → From Scratch

3. 點選左側 Incoming Webhooks → 啟用

4. 點選 Add New Webhook to Workspace

5. 選擇要接收通知的頻道（如 #dev-ci）

6. 複製產生的 Webhook URL

例如：

https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX

---

🔐 Step 2：在 GitHub 設定 Secrets

打開你的 GitHub 專案頁 → Settings > Secrets and variables > Actions

新增一個 secret：

Name	Value（你的內容）
SLACK_WEBHOOK	剛剛複製的 Webhook URL

---

✍️ Step 3：撰寫 GitHub Actions 通知腳本

在 .github/workflows/ci.yml 中新增以下內容：

name: CI Build
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Build project
        run: echo "🛠 假裝在建構中..."
      - name: Notify Slack on Success
        if: success()
        uses: slackapi/slack-github-action@v1.24.0
        with:
          payload: |
            {
              "text": ":white_check_mark: Build Success on *${{ github.repository }}* (branch: ${{ github.ref_name }}) by ${{ github.actor }}",
              "attachments": [{
                "color": "good",
                "fields": [
                  { "title": "Job", "value": "${{ github.job }}", "short": true },
                  { "title": "Commit", "value": "${{ github.sha }}", "short": true }
                ]
              }]
            }
        env:
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}
      - name: Notify Slack on Failure
        if: failure()
        uses: slackapi/slack-github-action@v1.24.0
        with:
          payload: |
            {
              "text": ":x: Build Failed on *${{ github.repository }}* by ${{ github.actor }}",
              "attachments": [{
                "color": "danger",
                "fields": [
                  { "title": "Branch", "value": "${{ github.ref_name }}", "short": true },
                  { "title": "Check Logs", "value": "${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}", "short": false }
                ]
              }]
            }
        env:
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}





💬 Slack 訊息範例
成功訊息會像這樣顯示：

✅ Build Success on my-repo (branch: main) by @username

🔗 Commit: a1b2c3d4

失敗訊息會像這樣顯示：

❌ Build Failed on my-repo by @username

🔗 Check Logs: GitHub Actions Run Log


🧪 Step 4：Push 並測試！
Push 到 main 分支後，進入 Slack 頻道觀察是否成功收到通知！
若沒收到，可以：


查看 GitHub Actions 的 Log，確認 webhook URL 是否正確


確認該 Slack 頻道是否允許 bot 發言


檢查 secret 名稱拼寫與 workflow 一致性



🧠 Bonus：更進階的通知方式
你也可以加入：
🎨 自定義 icon 或 emoji
👥 Mention 特定使用者（如 <!here> 或 <@UXXXX>）
📦 不同 Job 發送不同訊息（如 Deploy、Test）
⏰ 使用 cron 定期提醒 build 狀況



🔚 結語
將 Slack 串入 GitHub Actions 流程，不只是好用的「通知工具」，更是強化開發與部署透明度的絕佳方式。

不論是團隊開發、獨立維運、還是自動化部署，你都值得擁有一套「會說話的 CI/CD」！