Project Joey · 给朋友的解释

这个老友记搜索引擎,
到底是怎么做出来的?

用大白话从零开始解释 — 服务器、GitHub、Cloudflare、Pages、Workers、ffmpeg 都是啥, 它们怎么拼成了一个能在全球被访问的网站。

读完约 15 分钟 无需任何编程基础 读完能跟朋友讲明白
01
想做什么

先说结论:这个项目想干嘛

你看《老友记》看了很多遍,某天突然想起来 Joey 那句经典的 "How you doin?", 想找到所有他说这句话的截图。怎么办?

传统办法是把视频从头到尾看一遍。一集 22 分钟,10 季 236 集,你要看 86 个小时。

Project Joey 让你做这件事用 1 秒钟。

在搜索框打 "How you doin",网页瞬间显示出所有出现这句台词的截图, 任意点开能看到当集前后所有上下文,还能跳转去 B 站直接看视频。

这个想法不是新的。2016 年有人给《辛普森一家》做过类似网站,叫 Frinkiac。Project Joey 就是老友记版本。

02
需要什么零件

要做这个,需要拼起来 4 样东西

点开任意一张卡片看详细解释。

A一个网站界面
+

就是你打开 projectjoey.com 看到的那个搜索框、按钮、图片墙。

专业说法叫"前端",意思是"用户能看到的部分"。

类比 餐厅的菜单、桌椅、装修。客人(用户)能直接看到摸到的东西。
B一个能搜索的"大脑"
+

当你在搜索框输入 "coffee",肯定不能让你的浏览器去把 9 万条字幕全翻一遍。 你需要一个程序在某个服务器上,接到你的请求 → 去数据库找匹配的字幕 → 返回结果。

专业说法叫"后端"或"API"。

类比 餐厅的厨房。客人下单(搜索),厨房(后端)做菜(查数据), 然后把菜端出来(返回结果)。客人看不见厨房,但是厨房不在的话啥都没了。
C一个字幕数据库
+

9 万多条字幕的元数据:每条字幕属于哪一季哪一集、出现在第几秒、英文是什么、中文是什么、对应的截图叫什么文件名。

这些数据存在一个叫"数据库"的东西里,大概 30MB。

类比 Excel 表格。每一行是一条字幕,列是 "ID、季数、集数、时间、英文、中文、图片名"。 只是数据库比 Excel 快得多 —— 你搜 "coffee",它毫秒级就能找到所有匹配的行。
D一个图片仓库
+

9 万张高清截图,每张大概 70KB,加起来约 6GB。这些图片不能塞数据库里(数据库不擅长存大文件), 需要专门的"对象存储"来存,然后通过 URL 访问。

每张图的 URL 长这样:

https://joeyimge.baidou.work/S01E01_137170.webp

意思是:第 1 季第 1 集第 137,170 毫秒的截图。

类比 一个超大的衣柜。每件衣服有自己的位置和编号,你说"第 3 排第 7 件", 服务员立刻给你拿出来。
03
名词扫盲

服务器、GitHub、Cloudflare 都是啥

上面说的"网站"、"后端"、"数据库"、"图片仓库"都不能跑在你自己电脑上 —— 你电脑一关机,网站就挂了,朋友访问不到。它们需要跑在一种叫"服务器"的东西上。

服务器什么是服务器
+

简单说:一台 24 小时不关机、放在某个机房里、专门用来响应请求的电脑。

你刷抖音的时候,字节跳动的服务器在某处响应你;你打开淘宝,阿里的服务器在响应你。

类比 一家 24 小时不打烊的便利店。你(浏览器)走进去说"我要个三明治"(发请求), 店员(服务器)从架子上拿一个给你(返回数据)。便利店永远不关门,所以你半夜也能买。

买一台真实服务器很贵(几万块起),还要管电费、网络、散热。 所以现在基本没人自己买,都是租用云服务公司的服务器。Cloudflare 就是这种公司之一。

GitHub什么是 GitHub
+

一个专门用来存代码的云端仓库。

你写的所有代码文件传到 GitHub,会自动:

  • 记录每次改动(谁、什么时候、改了什么)
  • 支持多人协作(朋友也能看你的代码、提建议)
  • 提供网页界面,在浏览器里能看代码、留评论
  • 能回滚到任何历史版本(写错了不怕)
类比 像 Google Drive,但是版本管理超级强。每次改文件都自动存一个新版本, 你想看 "上周三下午我改了什么" 一秒钟就能查出来。

Project Joey 的代码就在 GitHub 上, 地址 github.com/yuanchaokun/project-joey (private 仓库,需要被邀请才能看)。

Cloudflare什么是 Cloudflare
+

一家美国公司,在全球 300 多个城市都有数据中心。

它原本是做"网站加速"的(让你的网站全球访问更快),但是后来扩展成了"全家桶": 从网站托管、到代码运行、到数据库、到文件存储,啥都能干。

对个人开发者最爽的是:大部分服务都有慷慨的免费额度。Project Joey 整套跑下来月成本 $0。

Cloudflare 的"全家桶"里我们用到了 4 个服务: Pages、Workers、D1、R2。下面分别解释。

Pages什么是 Cloudflare Pages
+

专门用来托管"静态网站"的服务。

"静态网站"的意思是:网页本身就是几个 HTML/CSS/JS 文件,不需要在服务器上跑什么程序。 用户访问时,Cloudflare 直接把文件发给浏览器就行。

你把网站文件丢到 Pages,它会:

  • 免费给你一个域名(类似 xxx.pages.dev)
  • 把文件复制到全球 300+ 个数据中心
  • 用户访问时从最近的数据中心拿,速度极快
  • 带宽不收费,流量再大也是 $0
类比 你写了一本书,把电子版交给一家全球连锁书店。书店在世界各地都开了分店, 读者就近去最近那家拿。你不用付印刷费、运费、店租。
Workers什么是 Cloudflare Workers
+

用来跑后端代码的服务。

当用户搜索 "coffee",浏览器会发一个请求到一个 URL(比如 joeybackendapi.baidou.work/api/search?q=coffee)。 Workers 就是那个接到请求然后跑代码的东西。

它的特别之处:

  • 代码不是跑在某一台服务器上,而是跑在离用户最近的那个数据中心
  • 响应速度通常 < 50 毫秒
  • 免费额度:每天 10 万次请求
  • 不用管服务器维护、扩容
类比 麦当劳的"得来速"窗口。你开车过来点单, 店员立刻在窗口处理(没人去后厨慢慢做),几十秒就给你东西。 而且每个城市都有,你不用去总部。
D1什么是 Cloudflare D1
+

Cloudflare 的云端数据库。

所有 9 万条字幕的数据存在这里。Workers 接到搜索请求时,就向 D1 发一条 SQL 查询:

SELECT * FROM subtitles WHERE text_en LIKE '%coffee%'

D1 几毫秒返回结果,Workers 把结果包装好发给浏览器。

类比 一个超快的图书馆管理员。你说"找所有提到 coffee 的字幕", 他/她瞬间从 9 万本书里找出来。

D1 也是免费的(5GB 存储 + 每天 500 万次查询), Project Joey 数据库才 30MB,完全在免费范围内。

R2什么是 Cloudflare R2
+

Cloudflare 的云端文件仓库(专业说法叫"对象存储")。

所有 9 万张截图存在这里。每张图都有一个 URL,浏览器直接通过 URL 加载。

R2 的杀手级特点:"出口流量"完全免费。

什么意思?如果你用其他类似服务(比如亚马逊 S3),用户每下载 1GB 图片你就要付一笔钱。 R2 不收这个钱。所以即使有 100 万人来看 Project Joey,你不用为图片流量付一分钱。

类比 Dropbox,但是别人下载你的文件不收你的钱。这就是 Cloudflare 的核心商业策略 —— 把流量做成"白菜价",抢市场份额。
ffmpeg什么是 ffmpeg
+

一个免费的视频处理工具,几乎能对视频做任何事:

  • 剪切视频(从第 30 秒到第 60 秒)
  • 转换格式(MP4 → AVI → MOV)
  • 提取音频(只要声音)
  • 压缩视频(减小文件大小)
  • 提取截图(在任意时间点截一帧画面) ← 我们用这个

Project Joey 用 ffmpeg 在每条字幕的开始时间截一帧,就有了 9 万张截图。 一行命令就能做:

ffmpeg -ss 137.170 -i S01E01.mp4 -frames:v 1 S01E01_137170.webp

这行命令的意思:打开 S01E01.mp4,跳到第 137.17 秒,截一张图,存成 S01E01_137170.webp。

类比 Photoshop 之于图片,ffmpeg 之于视频。命令行操作而已,没有图形界面。
04
怎么拼起来

一次"用户搜索"的完整流程

知道了所有零件之后,看看一次搜索是怎么走完整个流程的。

1
用户
浏览器打开 projectjoey.com
在搜索框输入 "coffee" 并按回车
2
Cloudflare Pages
前端网页加载
浏览器从最近的 Cloudflare 节点拿到 HTML / JS / CSS
JavaScript 发起 API 请求 ↓
3
Cloudflare Workers
后端代码处理请求
收到 GET /api/search?q=coffee, 准备查数据库
4a
Cloudflare D1
数据库查询
SELECT 出所有匹配的字幕
4b
Cloudflare R2
图片 URL 准备
每条字幕对应的截图地址
结果汇总返回给浏览器 ↑
5
用户屏幕
浏览器渲染搜索结果
字幕文字 + 截图墙呈现给用户

整个过程通常在 200-500 毫秒内完成。用户感觉就是"输入,瞬间出结果"。

没有任何一台"服务器"在做这件事。 所有零件都是分布式的、跑在全球 300+ 个城市。

用户在北京访问就由香港节点服务,在纽约访问就由弗吉尼亚节点服务。 这就是为什么响应这么快。

05
数据从哪来

9 万条字幕、9 万张截图,是怎么准备的

上面说的都是"网站怎么响应用户请求"。但你可能在想:那些数据是从哪冒出来的?

答案是:一个一次性的"数据流水线",在网站上线之前在我自己电脑上跑完的。

原料
10 季《老友记》视频文件 + 双语字幕 (.srt) 从公开渠道找到的,需要自己有视频文件
步骤 1
用 ffmpeg 在每条字幕的开始时间截一帧 每集大约 200-400 条字幕,就生成 200-400 张截图
步骤 2
同时生成一个 CSV 文件,记录每条字幕的元数据 列: id, 季, 集, 时间戳, 英文, 中文, 对应的截图文件名
步骤 3
把 CSV 灌进本地 SQLite 数据库 一个轻量数据库文件 joey.db (~30MB)
步骤 4
把 SQLite 转换成 D1 兼容的 SQL 文件,用 wrangler 上传到 D1 切成 15 个小文件 (D1 单文件 1MB 限制),需要 5-10 分钟
步骤 5
用 Python 脚本把 9 万张截图上传到 R2 20 个并发线程,需要 1-2 小时

整个流水线如果你有完整视频,跑完大概要一个下午到一晚上。

这套流水线的所有脚本都在仓库的 scripts/data-prep/ 文件夹里, 朋友拿到仓库后可以重新跑一遍。

06
成本

等等,这一切真的免费?

是的。Cloudflare 的免费额度对个人项目来说大得离谱。

R2 存储
~6 GB 免费 10GB 内
R2 出口流量
任意 永久免费
D1 存储
~30 MB 免费 5GB 内
D1 查询
< 1 万/天 免费 500 万/天
Workers 请求
< 1 万/天 免费 10 万/天
Pages 流量
任意 永久免费
月度总成本
$0/ 月

真的要付费,需要日活破万。我和朋友自己玩,永远摸不到这个上限。

唯一花钱的地方:域名年费,projectjoey.com 大概 100 块/年。 你也可以用免费域名(xxx.pages.dev)完全 $0 部署。

07
试一下

在这个页面里直接搜

下面这个搜索框直接调用线上 API。输入任意词或短语,看实际返回的截图。

LIVE · Cloudflare Workers API

实时搜索 Project Joey

POST joeybackendapi.baidou.work/api/search

点击 "搜 索" 试试。
08
你也可以

部署一份属于你自己的

仓库里详细写了三种部署方式,根据你的情况选:

A · 最快

零成本试玩

约 10 分钟
复用我现有的 R2 截图桶,只创建你自己的 D1 + Workers + Pages。适合想快速跑起来玩玩。
B · 推荐

完全独立部署

约 1 小时
我私下给你 ~6GB 截图压缩包,你上传到自己的 R2,完全独立运行。适合想正式拥有项目。
C · 最完整

从原始视频生成

约半天到一天
自己有视频,跑数据生成脚本从头来。也可以改造成《生活大爆炸》之类的其他剧。

三种方式的详细步骤都在仓库的 SETUP.md。你只需要会:

不需要会写代码 —— 全程跟着教程跑就行。