「使用 Vercel Storage 给Astro站点添加浏览量统计功能」

·

Vercel Storage

目前Vercel Storage一共有四种类型:

  • Edge Config:以key-value形式存储的配置文件,用于边缘函数在运行时以环境变量的方式获取。
  • KV:基于Redis的存储方案。
  • Postgres:基于Postgre SQL的Serverless数据库。
  • Blob:Fast object storage, 暂未开放。

image-20230523155000808

这里选用KV来实现网站浏览量统计(PV)的功能。

具体实现

Astro 配置

由于后续会用到Astro的服务器渲染(SSRAPI端点,因此需要在astro.config.mjs文件中进行如下配置:

astro.config.mjs
import { defineConfig } from 'astro/config'
import netlify from '@astrojs/netlify/functions'

export default defineConfig({
  output: 'server',
    adapter: netlify(),
})

其中adapter可以自己任意选择

逻辑

Redis的数据是以key-value格式存储的,因此可以将网站的完整URL作为key,浏览量作为value。利用Redis的INCR命令,可以将指定的key值加1并返回新的key值,如果key值不存在,则会将 key 的值设置为0,然后再进行加1操作。

因此,只要在每次进入一个页面后,将页面的URL作为key值,去进行INCR操作,再获取到新的浏览量值即可。

服务端

Vercel官方发布的npm包@vercel/kv中已经封装好了对Redis各种操作的API,直接使用即可。这里给每个key加上PV_的前缀,方便后续统一查看与统计。

src/pages/api文件夹下新建一个setPV.ts文件,具体代码如下:

setPV.ts
import type { APIRoute } from 'astro'
import { createClient } from '@vercel/kv'

const KV_REST_API_URL = import.meta.env.KV_REST_API_URL
const KV_REST_API_TOKEN = import.meta.env.KV_REST_API_TOKEN

export const get: APIRoute = async (ctx) => {
  try {
    if (!KV_REST_API_URL || !KV_REST_API_TOKEN)
      throw new Error('missing env')

    const v = ctx.url.searchParams.get('v') || '404'
    const client = createClient({
      url: KV_REST_API_URL,
      token: KV_REST_API_TOKEN
    })

    const number = await client.incr(`PV_${v}`)
    return {
      body: JSON.stringify({
        state: 'ok',
        message: number
      })
    }
  }
  catch (error) {
    return {
      body: JSON.stringify({
        state: 'fail',
        message: error
      })
    }
  }
}

客户端代码

在你需要统计的页面中添加以下脚本,其中#pv-count是显示浏览量统计的DOM元素:

    <script>
      (async () => {
        const pvUrl = `/api/setPV?v=${encodeURIComponent(
          window.location.href
        )}`;

        const rawData = await fetch(pvUrl);
        const jsonData = await rawData.json();
        document.querySelector('#pv-count')!.innerHTML = jsonData.message + ' views'
      })()
    </script>

查看Redis数据

在Vercel的KV Storage页面有一个交互式的CLI,可以直接输入Redis的相关命令来查看Redis中的数据

image-20230523164811977