前情提要

在 玩转云服务（9）：使用 Cloudflare Workers + D1 + R2 搭建免费的随机图片 API 一文中，我们介绍了基于 Coudflare Workers 这个无服务器函数的 API。但是，Workers 使用的 .workers.dev 域名在境内是不可访问的状态，需要自己绑个域名上去，而域名还是要花钱买的，不能做到真正的完全免费。

于是乎，Cloudflare Pages Functions 就进入了咱们“铁公鸡”的视野。Cloudflare Pages 我们在 玩转云服务（4）：Github Actions + Cloudflare Pages 部署静态网站 里介绍过，当时是用作纯静态网站的部署，不能包含后台计算的代码。不过，自从 Workers 出现之后，这种无服务器函数计算的服务很自然地就和 Pages 结合，可以打造出包含后台计算能力的可交互网站。

当然，以上并不是我们今天介绍 Functions 的理由，而是因为 Cloudflare Pages 所使用的 .pages.dev 域名可以正常访问。

免费额度

由于本质上是同一事物，Functions 和 Workers 共享免费额度。参见使用 Cloudflare Workers + D1 + R2 搭建免费的随机图片 API - 免费额度相应内容。

配置 R2 和 D1

和 玩转云服务（9）：使用 Cloudflare Workers + D1 + R2 搭建免费的随机图片 API 里的一模一样，这里不再赘述。

新建 Pages 项目

参见 玩转云服务（4）：Github Actions + Cloudflare Pages 部署静态网站 - 建立 Cloudflare Pages 项目 相应内容。

配置 Pages 环境变量

需要先配置环境变量再上传代码文件。

绑定 D1 数据库

变量名称为 PIC_DB，选择之前建立的 D1 数据库，保存。

设置变量

和 玩转云服务（9）：使用 Cloudflare Workers + D1 + R2 搭建免费的随机图片 API - 配置 Workers API 的变量一致。不过，因为两个版本的 js 代码都放在一个 page，所以两种变量放置在一起。

“制作”是必须的，“预览”可选配置，需要和“制作”一致。

上传项目

有两种选择：本地 wrangler 命令行推送和使用 Github Actions 推送。

方法一：Github Actions

注册了 Github 账号后，fork 一份我的代码仓库：GitHub - Eterance/cloudflare-workers-random-picture-api。

然后，按照 玩转云服务（4）：Github Actions + Cloudflare Pages 部署静态网站 里的步骤将 Cloudflare 用户账号和 API 密钥添加到你这个仓库的机密里，如下图所示。

在旁边的变量建一个 CF_PROJRCT_NAME 变量，内容是刚才建好的 Pages 项目名称。

然后去 Actions 里重新运行一次，等一段时间即可部署成功。

方法二：Wrangler

下载代码文件到本地

在本地建立一个 pic-api 文件夹（名字随意修改），里面建一个 functions 文件夹（不可改名）。将 functions 文件夹里面的所有文件下载并放置到 /pic-api/functions 里。

（或者你直接下载我的整个 repo，解压然后把里面除了 functions 文件夹的其他文件删了也行）

安装 Wrangler

虽然 Pages 可以通过网页直接上传，但是目前 functions 文件夹不行（不在 functions 文件夹里的 js 代码文件不会被识别）。

首先下载安装 node.js https://nodejs.org/en/download

然后在 CMD 里执行命令：

npm install wrangler -g

这将在你的电脑上全局安装 wrangler。

警告

不要按照官网的命令，本地安装 wrangler，可能发生无法正常识别并上传 /functions 文件夹的问题。

上传

命令行导航到 pic-api 文件夹下，输入命令

wrangler pages deploy ./ --project-name <pages 名字>

即可使用 https://<Pages名称>.pages.dev/rpicpro 访问高级版本的 API。