Github Action Bot

1 views
Github Action Vercel Bot
Github Action Bot
Loading...

1.前言

是一个精简的开源技术博客项目模版，支持 Vercel 一键部署，支持评论、搜索等功能，欢迎大家体验。

目前我自己的 项目也是基于 DevNow 来部署在 Vercel 上的，看到很多项目都基于 TG Bot 来进行一些消息通知和维护，就想着自己也维护一个 DevNow 开源项目频道，看到一些好的前端技术文章也会同步进来，也希望可以给大家提供一个交流的平台。

2.如何把消息通知到 Telegram

2.1 创建Tg Bot

首先要去 BotFather 里 创建一个 Bot，然后获取到 Bot 的 Token，然后把 Bot 添加到你想要通知的 频道 或者 APP 中，我合理选择的是APP，我作为官方的来推送一些内容，然后大家可以在 Chat 频道 进行交流，这样就不会出现消息太多，不方便查看的情况。

2.2 获取 chat_id

当我们将 bot 添加到对应的 APP 或者 频道中，发送一个对话后，我们可以通过以下命令来获取对应的 chat_id ：

Terminal window
curl https://api.telegram.org/bot<token>/getUpdates

结果大概类似：

{
  "ok": true,
  "result": [
    {
      "update_id": 123456789,
      "message": {
        "message_id": 123,
        "from": {
          "id": -123456789,
          "is_bot": true,
          "first_name": "My Bot",
          "username": "my_bot"
        },
        "chat": {
          "id": -123456789,
          "type": "private",
          "title": "My Chat",
          "username": "my_chat"
        },
        "date": 123456789,
        "text": "Hello, world!"
      }
    }
  ]
}

记录下对应的 chat_id 和 bot Token ，我们在后续的部署过程中会使用到。

3 部署相关的通知服务

3.1 通过 Github WebHook 部署

import Koa from 'koa';
import Router from 'koa-router';
import bodyParser from 'koa-bodyparser';
import TelegramBot from 'node-telegram-bot-api';
import { Context } from 'koa';
import config from './config';


// Configuration
const token = config.token;
const TELEGRAM_CHAT_ID = process.env.TELEGRAM_CHAT_ID || config.chat_id; // Add your chat ID here


// Initialize Koa and Router
const app = new Koa();
const router = new Router();


// Initialize Telegram bot
// 这里是因为 Vercel 的服务问题，不支持轮训，只支持 Functions，所以用需要改成 webhook 形式
const bot = new TelegramBot(token, {
  webHook: {
    port: 3003
  }
});


// Middleware
app.use(bodyParser());


interface GitHubWebhookPayload {
  commits: {
    added: string[]
  }[]
}


// GitHub webhook endpoint
router.post('/tg/github', async (ctx: Context) => {
  const payload = ctx.request.body as GitHubWebhookPayload;


  try {
    // Handle push events
    if (ctx.headers['x-github-event'] === 'push') {
      const commits = payload.commits || [];
      const newFiles: string[] = [];


      for (const commit of commits) {
        const addedFiles = commit.added || []; // Get added files from the commit
        for (const file of addedFiles) {
          // Check if the file is in the specified directory
          if (file.startsWith('src/content/doc/')) {
            const fileName = file.split('/').pop() as string; // Get the file name
            const url = `https://www.laughingzhu.cn/posts/${fileName}`;
            const telegramMessage = `🔔 New Post: ${url}`;
            await bot.sendMessage(TELEGRAM_CHAT_ID, telegramMessage, {
              parse_mode: 'HTML',
              disable_web_page_preview: false
            });
          }
        }
      }
    }
    ctx.status = 200;
    ctx.body = { success: true };
  } catch (error) {
    console.error('Error processing webhook:', error);
    ctx.status = 500;
    ctx.body = { success: false, error: error instanceof Error ? error.message : 'Unknown error' };
  }
});


// Use router middleware
app.use(router.routes());
app.use(router.allowedMethods());


export default app.callback();

大致的思路就是我在发布新的文章时，会将文件内容推送到 Github 仓库中，然后通过 Github 配置的 WebHook（push） 会将这个事件推送到 webhook 的地址，我们可以进行相应的处理，通过对 commits.added 进行判断新增的文章，这样就可以实现对新文章的推送到 Telegram 上了。

遇到的问题

由于我是通过 Vercel 部署的，所以当 Github push commit 触发 webhook 的时候， Vercel 才开始编译，所以这个时候文章可能还没有生成，如果用的是 SSG 的模式的话，就需要构建这些新的内容，如果是 SSR 的渲染模式，那么还好。这里的问题就是我希望推送可以加载出来 open-graph 这些内容，所有是期望 Vercel 部署成功后再推送。这里就不好整， Github webhook 没有对应的事件，理论上是需要 Vercel 的 来通知，但是 Vercel 的 Webhook 不知道啥时候变成 Pro 及以上版本的权益了，免费版不支持，所以这个方案就被pass了。

3.2 通过 Github Action 部署 （推荐）

name: Tg Deploy Notification
on: deployment_status


jobs:
  notify:
    runs-on: ubuntu-latest
    if: github.event.deployment_status.state == 'success'
    steps:
      - name: Send Telegram Notification
        env:
          BOT_TOKEN: ${{ secrets.BOT_TOKEN }}
          CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
        run: |
          # 获取最近修改的文件
          FILES=$(curl -s -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
            "https://api.github.com/repos/${{ github.repository }}/commits/${{ github.sha }}" \
            | jq -r '.files[].filename')


          # 遍历文件并发送通知
          echo "$FILES" | while read -r file; do
            if [[ $file == src/content/* ]] && [[ $file == *.md* ]]; then
              filename=$(basename "$file")
              name="${filename%.*}"
              URL="https://www.laughingzhu.cn/posts/${name}"
              MESSAGE="🔔 新文章已发布: ${URL}"


              curl -s -X POST \
                "https://api.telegram.org/bot${BOT_TOKEN}/sendMessage" \
                -d "chat_id=${CHAT_ID}" \
                -d "text=${MESSAGE}" \
                -d "parse_mode=HTML" \
                -d "disable_web_page_preview=false"
            fi
          done

这样就可以再部署成功后进行推送了，这个方式是最简单的，如果有更好的方案可以大家可以分享下。

写到这里才发现这个部署的 webhook 也是有的，，所以理论上也可以在方案一的基础上进行扩展实现。

不过相比在 Vercel 部署一个服务的话， Github Action 还是最简单的，俺也推荐大家使用这种方式。

接下来看效果图：

部署后的效果图

最后 👏🏻 欢迎大家加入 学习交流，摸鱼也可以。

相关文章