Serverless的2FA平台部署

背景

由于自己有不少2FA的账号，但是很多时候又懒得用手机，就想能不能找个部署在Cloudflare Pages上的2FA平台试试，找到了一个但是部署教程不是很明确，故以此文记录。

前期准备

npm环境

个人是因为本地npm是老版本不想升级所以弄的docker镜像，如果已有合适的npm版本可跳过该步。
这是Dockerfile:

# 使用最新 LTS 版本的 Node.js 作为基础镜像（自带新版本 npm）
FROM node:lts

# 安装 Wrangler（Cloudflare Workers 命令行工具）
RUN npm install -g wrangler@latest

# 可选：配置 npm 国内镜像源（加速后续安装）
RUN npm config set registry https://registry.npmmirror.com

# 设置容器默认工作目录
WORKDIR /app

按照上面内容构建了Dockerfile文件之后，在该文件相同目录下运行docker build -t my-wrangler:latest .进行镜像构建。
这是docker-compose.yml(和上面的Dockerfile在同一目录):

version: '3.8'
services:
  wrangler:
    image: my-wrangler:latest  # 使用预构建的 Wrangler 镜像
    volumes:
      - ./app:/app                 # 挂载当前目录到容器 /app [7,8](@ref)
      - ./data:/data            # 挂载宿主机 /data 到容器 /data（新增需求）[7,8](@ref)
      - ./key:/root/.wrangler  # 挂载本地 key 目录作为登录凭证（替代 $HOME）[7,8](@ref)
    tty: true                  # 保留交互式终端（-it 等效）
    stdin_open: true           # 允许标准输入（-i 等效）

在启动容器之前请在当前目录新建app、data、key文件夹。
运行docker compose up -d，如果容器起成功了那说明初始环境OK了。
进入容器docker exec -it 容器ID /bin/bash终端进行后续操作。

克隆Github项目

git clone https://github.com/lvbyte-bot/2faWeb即可。

安装npm所需库

在克隆项目之后依次运行以下命令：

cd 2fa-web
npm install
cd frontend && npm install
cd ../api && npm install

登录wrangler

wrangler login运行即可。
如果你和我一样是Remote终端，那在打开运行wrangler login之后显示的链接进行认证，此时浏览器会返回一个localhost的认证url，例如：

http://127.0.0.1:8976/oauth/callback?code=<Your-Auth-Code>&scope=account%3Aread%20user%3Aread%20workers%3Awrite%20workers_kv%3Awrite%20workers_routes%3Awrite%20workers_scripts%3Awrite%20workers_tail%3Aread%20zone%3Aread%20offline_access&state=<Your-State-Token>

这是your-callback-url。
你在相同终端中运行curl "<your-callback-url>"(如果你是在容器里运行的wrangler login那也在容器里运行)，即可认证成功。

项目部署

后端部署

创建D1数据库

1. 登录到Cloudflare Dashboard
2. 导航到”Workers & Pages” > “D1”
3. 点击”创建数据库”按钮
4. 输入数据库名称，例如”2fa_web_db”
5. 记下生成的数据库ID

或者，使用Wrangler CLI创建:

wrangler d1 create 2fa_web_db

创建Cloudflare KV命名空间

1. 登录到Cloudflare Dashboard

2. 导航到”Workers & Pages” > “KV”

3. 点击”创建命名空间”按钮

4. 输入命名空间名称，例如”2fa_web_sessions”

5. 记下生成的命名空间ID

   更新配置文件

6. 编辑api/wrangler.toml文件，更新以下内容:

   [vars]
   JWT_SECRET = "your_secure_jwt_secret"  # 生成一个安全的随机字符串
   FRONTEND_URL = "https://your-front-page.example.com"  # 你的前端域名
   
   [[d1_databases]]
   binding = "DB"
   database_name = "2fa_web_db"
   database_id = "your_d1_database_id"  # 步骤1中获取的ID
   
   [[kv_namespaces]]
   binding = "SESSIONS"
   id = "your_kv_namespace_id"  # 步骤2中获取的ID

   初始化数据库

运行以下命令创建数据库表:

cd api
wrangler d1 execute 2fa_web_db --file=./migrations/schema.sql

部署后端API

cd api
wrangler deploy

部署成功后，记录下你的后端URL(教程示例为https://your-backend-page.example.com)。

前端部署

更新环境变量

创建frontend/.env.production文件，示例如下:

VITE_API_URL=https://your-backend-page.example.com/api
VITE_APP_NAME=2FA Web
VITE_ENABLE_PERFORMANCE_MONITORING=false
VITE_DEBUG_MODE=false

后端链接一定要带API路径

构建前端

运行以下命令部署前端:

# 在项目根目录
npm run build:frontend

前端页面部署到Cloudflare Pages上

使用wrangler部署

# 安装Cloudflare Pages插件
npm install -g @cloudflare/wrangler

# 创建新的Pages项目
wrangler pages project create 2fa-web

# 部署
wrangler pages deploy frontend/dist --project-name=2fa-web

手动上传文件到Cloudflare Pages进行部署

1. 登录到Cloudflare Dashboard
2. 导航到”Pages”
3. 点击”创建应用程序”
4. 选择”直接上传”选项
5. 上传frontend/dist目录的内容
6. 设置项目名称，例如”2fa-web”
7. 点击”保存并部署”

   完成部署以及致谢

   完成部署之后访问你的前端域名(示例为https://your-front-page.example.com)，尝试注册账号，如果成功则说明部署完毕。
   最后再次感谢项目开发者！如果觉得实用请给原项目点个star吧