使用 Vercel 有选择地反向代理 GitHub API

在 2024 年 8 月 11 日，我使用 Fronti 这个开源的 Astro 主题构建了你们正在浏览的网站。当时非常匆忙，有两篇博文要写，首页就先保持初始状态了。

8 月 18 日，博文已经没有要写的了，就开始对首页进行大的整改，期间这几条 GitHub 统计数据可是花了我好多头发，但当时写的匆忙~~能跑不就行了~~，不知不觉~~明明知道~~给自己挖了一个坑

问题分析

我为了防止用户撞到 GitHub API 速率限制↗而无法加载我的 GitHub 统计数据，直接把我 GitHub 账号的 PAT (Personal access tokens) 令牌硬编码进请求头里让用户去请求数据，这样就出现了几个大问题：

每位用户都要去找 GitHub 请求数据，访问的人多起来或遭到 DDoS 攻击非常容易导致我的 GitHub 账号受到速率限制。
原因同上，有些用户无法访问 GitHub，他们也就无法正常加载我的 GitHub 统计数据。
虽然公开的是毫无权限的令牌，但有心之人可以拿我的令牌去不断请求 GitHub API，使我的 GitHub 账号受到速率限制，导致正常用户无法加载我的 GitHub 统计数据，我也会跟着遭殃。

如何实现

总的来说，我需要让服务端向 GitHub 请求数据，GitHub 把数据返回给服务端，服务端做一个缓存，然后把请求到的数据返回给用户，缓存未失效之前再有人访问时服务端会直接把数据发送给客户端，无需再向GitHub请求数据。

这，听起来反向代理挺适合的，但我不能完全代理 api.github.com↗，这样用户直接把我的反向代理当作镜像站来请求，这不就完犊子了！

那就给Astro加API端点吧！我这么想着，看了一会文档，开始尝试，构建失败7次，运行失败6次，我放弃了，开始寻找别的方法。

github-readme-stats 的启示

在那几条GitHub统计数据完工前，我首页贴着的是两张 github-readme-stats.vercel.app↗ 提供的卡片，这是一个开源项目，我便去他们的 GitHub 仓库↗翻了翻代码，找到了灵感。

最终的解决方案是使用 Vercel 的 Serverless 服务，实现一套带缓存的，只能访问特定的 GitHub API 地址的 API 端点。

实现过程

知道如何实现还不行，现在我对相关代码的编写还是一头雾水，还得寻找更多的资料。

首先，我在网络上搜集相关文档，翻到了 Serverless functions with Vercel↗ 这篇文章，了解了基本语法，顺便写了个Hello, world!。~~万事都从Hello, world!开始~~

1
export default async (
2
  _: any,
3
  res: {
4
    json: (data: any) => void;
5
    setHeader: (key: string, value: string) => void;
6
  },
7
) => {
8
  res.setHeader("Content-Type", "application/json");
9
  res.json({ "Hello, ": "world!" });
10
};

部署完后，使用 curl 访问刚部署的 API 地址，得到了以下结果

1
{ "Hello, ": "world!" }

接下来，就开始编写 API 吧！

获取项目信息的 API

先把要用到的常量保存在 src/consts.ts 文件中

1
const GITHUB_TOKEN = "ghp_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
2
export const GITHUB_NAME = "Buer-Nahida";
3

4
export const method = "POST";
5
export const headers = {
6
  "Content-Type": "application/json",
7
  Authorization: `Bearer ${GITHUB_TOKEN}`,
8
};
9

10
export const PROJECT_BODY = JSON.stringify({
11
  query: `{
12
    r0: repository(owner: "${GITHUB_NAME}", name: "antonym.nvim") {
13
      stargazerCount
14
      watchers { totalCount }
15
      forkCount
16
    }
17
    r1: repository(owner: "AkashaTerm", name: "AkashaTerminal") {
18
      stargazerCount
19
      watchers { totalCount }
20
      forkCount
21
    }
22
    r2: repository(owner: "${GITHUB_NAME}", name: "fcitx5-switch.nvim") {
23
      stargazerCount
24
      watchers { totalCount }
25
      forkCount
26
    }
27
  }`,
28
});

再创建 api/project.ts 文件，编写获取项目信息的 API：

1
import { PROJECT_BODY, headers, method } from "../src/consts";
2

3
export default async (
4
  _: any,
5
  res: {
6
    json: (data: any) => void;
7
    setHeader: (key: string, value: string) => void;
8
  },
9
) => {
10
  res.setHeader("Content-Type", "application/json");
11
  res.json(
12
    await fetch("https://api.github.com/graphql", {
13
      headers,
14
      method,
15
      body: PROJECT_BODY,
16
    }).then((r) => r.json()),
17
  );
18
};

推送到 Vercel 上部署，使用 curl 访问刚创建的 API，得到结果：

1
{
2
  "data": {
3
    "r0": {
4
      "stargazerCount": 1,
5
      "watchers": { "totalCount": 1 },
6
      "forkCount": 0
7
    },
8
    "r1": {
9
      "stargazerCount": 0,
10
      "watchers": { "totalCount": 0 },
11
      "forkCount": 0
12
    },
13
    "r2": {
14
      "stargazerCount": 1,
15
      "watchers": { "totalCount": 1 },
16
      "forkCount": 0
17
    }
18
  }
19
}

解决跨域问题

好，看起来没问题，那就修改下我的网站的代码试试看：

果然没有那么简单，遇到了跨域问题，但难不倒我，经过一番搜索，寻找到了解决方法：

先向 src/consts.ts 文件中添加下面这一行：

1
export const SIDE = "https://nahida.im";

再修改 api/project.ts 文件：

1
import { SIDE, PROJECT_BODY, headers, method } from "../src/consts";
2

3
export default async (
4
  _: any,
5
  res: {
6
    json: (data: any) => void;
7
    setHeader: (key: string, value: string) => void;
8
  },
9
) => {
10
  res.setHeader("Content-Type", "application/json");
11
  //+++++++++++++++++++++++++++++++++++++++++++++++//
12
  res.setHeader("Access-Control-Allow-Origin", SIDE);
13
  //+++++++++++++++++++++++++++++++++++++++++++++++//
14
  res.json(
15
    await fetch("https://api.github.com/graphql", {
16
      headers,
17
      method,
18
      body: PROJECT_BODY,
19
    }).then((r) => r.json()),
20
  );
21
};

然后获取项目信息的 API 就完成了！

获取除了 Commit 数量外的其它信息的 API

还是一样，先向 src/consts.ts 文件中添加代码：

1
export const STATS_BODY = JSON.stringify({
2
  query: `{
3
    user(login: "${GITHUB_NAME}") {
4
      pullRequests(first: 1) { totalCount }
5
      openIssues: issues(states: OPEN) { totalCount }
6
      closedIssues: issues(states: CLOSED) { totalCount }
7
      contributionsCollection { totalCommitContributions }
8
      repositories(first: 100) {
9
        nodes { stargazerCount }
10
        pageInfo { hasNextPage, endCursor }
11
      }
12
    }
13
  }`,
14
});

再创建 api/stats/index.ts 文件：

1
import { SIDE, STATS_BODY, headers, method } from "../../src/consts";
2

3
export default async (
4
  _: any,
5
  res: {
6
    json: (data: any) => void;
7
    setHeader: (key: string, value: string) => void;
8
  },
9
) => {
10
  res.setHeader("Content-Type", "application/json");
11
  res.setHeader("Access-Control-Allow-Origin", SIDE);
12
  res.json(
13
    await fetch("https://api.github.com/graphql", {
14
      headers,
15
      method,
16
      body: STATS_BODY,
17
    }).then((r) => r.json()),
18
  );
19
};

获取 Commit 数量的 API

创建 api/stats/total-commit-count.ts 文件：

1
import { SIDE, CACHE, GITHUB_NAME, headers } from "../../src/consts";
2

3
export default async (
4
  _: any,
5
  res: {
6
    json: (data: any) => void;
7
    setHeader: (key: string, value: string) => void;
8
  },
9
) => {
10
  res.setHeader("Content-Type", "application/json");
11
  res.setHeader("Access-Control-Allow-Origin", SIDE);
12
  res.json(
13
    await fetch(
14
      `https://api.github.com/search/commits?q=author:${GITHUB_NAME}&per_page=1`,
15
      { headers },
16
    )
17
      .then((r) => r.json())
18
      .then((v) => ({ total_count: v.total_count })),
19
  );
20
};

缓存功能

前面提到过，我不光要加快 api.github.com↗ 的访问速度，还要做一个缓存，在一番寻找后，我选择了 lru-cache↗ 这个库来实现缓存：

安装这个库

1
npm install lru-cache --save

修改相关代码 & 最终预览

`src/consts.ts`

1
import { LRUCache } from "lru-cache";
2

3
export const SIDE = "https://nahida.im";
4

5
export const CACHE = new LRUCache({
6
  max: 10,
7
  ttl: 1000 * 60 * 5,
8
});
9

10
const GITHUB_TOKEN = "ghp_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
11
export const GITHUB_NAME = "Buer-Nahida";
12

13
export const method = "POST";
14
export const headers = {
15
  "Content-Type": "application/json",
16
  Authorization: `Bearer ${GITHUB_TOKEN}`,
17
};
18

19
export const STATS_BODY = JSON.stringify({
20
  query: `{
21
    user(login: "${GITHUB_NAME}") {
22
      pullRequests(first: 1) { totalCount }
23
      openIssues: issues(states: OPEN) { totalCount }
24
      closedIssues: issues(states: CLOSED) { totalCount }
25
      contributionsCollection { totalCommitContributions }
26
      repositories(first: 100) {
27
        nodes { stargazerCount }
28
        pageInfo { hasNextPage, endCursor }
29
      }
30
    }
31
  }`,
32
});
33
export const PROJECT_BODY = JSON.stringify({
34
  query: `{
35
    r0: repository(owner: "${GITHUB_NAME}", name: "antonym.nvim") {
36
      stargazerCount
37
      watchers { totalCount }
38
      forkCount
39
    }
40
    r1: repository(owner: "AkashaTerm", name: "AkashaTerminal") {
41
      stargazerCount
42
      watchers { totalCount }
43
      forkCount
44
    }
45
    r2: repository(owner: "${GITHUB_NAME}", name: "fcitx5-switch.nvim") {
46
      stargazerCount
47
      watchers { totalCount }
48
      forkCount
49
    }
50
  }`,
51
});

`api/project.ts`

1
import { SIDE, CACHE, PROJECT_BODY, headers, method } from "../src/consts";
2

3
export default async (
4
  _: any,
5
  res: {
6
    json: (data: any) => void;
7
    setHeader: (key: string, value: string) => void;
8
  },
9
) => {
10
  const k = 0;
11
  let v = CACHE.get(k);
12
  if (!v) {
13
    v = await fetch("https://api.github.com/graphql", {
14
      headers,
15
      method,
16
      body: PROJECT_BODY,
17
    }).then((r) => r.json());
18
    CACHE.set(k, v);
19
  }
20
  res.setHeader("Content-Type", "application/json");
21
  res.setHeader("Access-Control-Allow-Origin", SIDE);
22
  res.json(v);
23
};

`api/stats/index.ts`

1
import { SIDE, CACHE, PROJECT_BODY, headers, method } from "../src/consts";
2

3
export default async (
4
  _: any,
5
  res: {
6
    json: (data: any) => void;
7
    setHeader: (key: string, value: string) => void;
8
  },
9
) => {
10
  const k = 0;
11
  let v = CACHE.get(k);
12
  if (!v) {
13
    v = await fetch("https://api.github.com/graphql", {
14
      headers,
15
      method,
16
      body: PROJECT_BODY,
17
    }).then((r) => r.json());
18
    CACHE.set(k, v);
19
  }
20
  res.setHeader("Content-Type", "application/json");
21
  res.setHeader("Access-Control-Allow-Origin", SIDE);
22
  res.json(v);
23
};

`api/stats/total-commit-count.ts`

1
import { SIDE, CACHE, GITHUB_NAME, headers } from "../../src/consts";
2

3
export default async (
4
  _: any,
5
  res: {
6
    json: (data: any) => void;
7
    setHeader: (key: string, value: string) => void;
8
  },
9
) => {
10
  const k = 3;
11
  let v = CACHE.get(k);
12
  if (!v) {
13
    v = await fetch(
14
      `https://api.github.com/search/commits?q=author:${GITHUB_NAME}&per_page=1`,
15
      { headers },
16
    )
17
      .then((r) => r.json())
18
      .then((v) => ({ total_count: v.total_count }));
19
    CACHE.set(k, v);
20
  }
21
  res.setHeader("Content-Type", "application/json");
22
  res.setHeader("Access-Control-Allow-Origin", SIDE);
23
  res.json(v);
24
};

全文完。

Thanks for reading!

使用 Vercel 有选择地反向代理 GitHub API

2024年八月 22日星期四

1793 字 · 13 分钟

技术文章 JavaScript TypeScript 服务器 Vercel 反向代理后端博客