自搭建部署vercount，毫秒级计数!

青萍叙事2025-04-23

✅ 前置要求

一台已安装 Docker 和 Docker Compose 的服务器
基本的命令行操作知识

第一部分：设置 Redis KV 存储

首先，我们需要设置用于存储计数器数据的 Redis 实例。

1 2	mkdir vercount-redis cd vercount-redis

创建 docker-compose.yml 文件：

services:
  redis:
    image: registry.cn-heyuan.aliyuncs.com/lusyoe/redis:latest
    environment:
      - REDIS_PASSWORD=${REDIS_PASSWORD}
    command: redis-server --requirepass ${REDIS_PASSWORD}
    volumes:
      - ./data:/data
    restart: unless-stopped
    ports:
      - "6379:6379"
    healthcheck:
      test: ["CMD-SHELL", "redis-cli -a ${REDIS_PASSWORD} ping | grep PONG"]
      interval: 3s
      timeout: 3s
      retries: 5

  serverless-redis-http:
    image: registry.cn-heyuan.aliyuncs.com/lusyoe/serverless-redis-http:latest
    ports:
      - '5002:80'
    environment:
      - SRH_MODE=env
      - SRH_TOKEN=${REST_TOKEN}
      - SRH_CONNECTION_STRING=redis://:${REDIS_PASSWORD}@redis:6379
    restart: unless-stopped
    depends_on:
      - redis

创建 .env 文件：

1 2	REDIS_PASSWORD=你的安全密码 REST_TOKEN=你的安全令牌

启动 Redis 服务：

1	docker compose up -d

第二部分：部署vercount应用

从 GitHub 克隆 Vercount 仓库：

1 2	git clone https://github.com/EvanNotFound/vercount.git cd vercount

创建Dockerfile文件(我是通过Docker部署到自己服务器的没有使用托管平台)：

FROM registry.cn-heyuan.aliyuncs.com/lusyoe/node:18-alpine AS base

# 设置镜像源为阿里云
RUN npm config set registry https://registry.npmmirror.com/

# 设置工作目录
WORKDIR /app

# 构建阶段
FROM base AS builder
# 复制包管理文件
COPY package.json package-lock.json* ./
# 安装依赖
RUN npm ci

# 复制源代码和配置文件
COPY . .

# 安装Prisma和生成客户端
RUN npm install -g prisma
RUN prisma generate

# 安装terser并压缩客户端JS
RUN npm install -g terser
RUN terser ./src/lib/client.js -o ./public/js/client.min.js --compress --timings --mangle --toplevel

# 构建应用
RUN npm run build

# 生产阶段
FROM base AS runner
WORKDIR /app

# 设置生产环境
ENV NODE_ENV production

# 创建系统用户运行应用
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
RUN mkdir .next
RUN chown nextjs:nodejs .next

# 复制构建产物和必要文件
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/prisma ./prisma

# 切换到非 root 用户
USER nextjs

# 设置容器启动参数
EXPOSE 3000
ENV PORT 3000
ENV HOSTNAME "0.0.0.0"

# 启动命令
CMD ["node", "server.js"]

💡 原项目使用的是 pnpm 构建，但我这里失败较多，因此改为 npm 构建。

修改配置文件

修改配置文件next.config.js：

const nextConfig = {
  // 添加standalone
  output: 'standalone',
  rewrites: async () => [
    {
      source: "/js",

修改配置文件：src/app/layout.tsx

// 将Base地址改为自己的
export const metadata: Metadata = {
	title: "Vercount - 网站流量计数器",
	//metadataBase: new URL("https://vercount.one"),
	metadataBase: new URL("https://vercount.lusyoe.com"),

修改配置文件：src/lib/client.js

// 将Base地址改为自己的
const getBaseUrl = () => {
 // return "https://events.vercount.one";
  return "https://vercount.lusyoe.com";
};

构建Docker镜像

1	docker build . -t lusyoe/vercount:latest

部署应用

docker run -dp 3000:3000 --name vercount \
  --restart unless-stopped \
  -e KV_URL=redis://:你的安全密码@你的服务器内网地址:6379 \
  -e KV_REST_API_URL=http://你的服务器内网地址:5002 \
  -e KV_REST_API_TOKEN=你安全令牌 \
  -e NEXTAUTH_SECRET=你的secret随便填 \
  -e NODE_ENV=production \
  lusyoe/vercount:latest

第三部分：配置使用

在你的网站中添加脚本标签，记得替换为你自己的域名，比如：

1	<script defer src="https://你的域名.com/js"></script>

在 HTML 中添加计数器元素：

1
2
3

阅读次数：<span id="vercount_value_page_pv">Loading</span>
访问次数：<span id="vercount_value_site_pv">Loading</span>
访客数量：<span id="vercount_value_site_uv">Loading</span>

✅ 完美兼容 busuanzi，如果之前是用的busuanzi也可以完全不用改span！

第四部分：查看Redis所有计数

这里再提供一个shell脚本用于查看Redis里面的所有计数：

redis-list.sh

#!/bin/bash
export REDISCLI_AUTH="你的安全密码"
redis-cli -n 0 --scan --pattern "*" | while read key; do
  value=$(redis-cli -n 0 GET "$key")
  echo "Key: $key | Value: $value"
done