使用 Pages Functions 为前端构建 API

在本教程中，你将构建全栈 Pages 应用。应用将包含：

使用 Cloudflare Pages 和 React 框架构建的前端。
使用 Pages Functions 构建的 JSON API，返回可在前端检索和渲染的博客文章。

若你更倾向于使用无头 CMS 而非 API 来渲染博客内容，请参阅无头 CMS 教程。

视频教程

1. 构建前端

首先，使用 React 框架创建新的 Pages 应用。

创建新的 React 项目

在终端中，使用 create-vite 命令创建名为 blog-frontend 的新 React 项目。进入新创建的 blog-frontend 目录并启动本地开发服务器：

Create a new React applicationsh

npx create-vite -t react blog-frontend
cd blog-frontend
npm install
npm run dev

设置 React 项目

设置 React 项目的步骤：

在 blog-frontend 目录根目录安装 React Router ↗。

npm i react-router-dom@6

yarn add react-router-dom@6

pnpm add react-router-dom@6

bun add react-router-dom@6

清空 src/App.js 的内容。复制并粘贴以下代码，将 React Router 导入 App.js，并设置包含两个路由的新路由器：

import { Routes, Route } from "react-router-dom";

import Posts from "./components/posts";
import Post from "./components/post";

function App() {
	return (
		<Routes>
			<Route path="/" element={<Posts />} />
			<Route path="/posts/:id" element={<Post />} />
		</Routes>
	);
}

export default App;

在 src 目录中，创建名为 components 的新文件夹。
在 components 目录中，创建两个文件：posts.js 和 post.js。这些文件将从 API 加载博客文章并渲染。
用以下代码填充 posts.js：

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";

const Posts = () => {
	const [posts, setPosts] = useState([]);

	useEffect(() => {
		const getPosts = async () => {
			const resp = await fetch("/api/posts");
			const postsResp = await resp.json();
			setPosts(postsResp);
		};

		getPosts();
	}, []);

	return (
		<div>
			<h1>Posts</h1>
			{posts.map((post) => (
				<div key={post.id}>
					<h2>
						<Link to={`/posts/${post.id}`}>{post.title}</Link>
					</h2>
				</div>
			))}
		</div>
	);
};

export default Posts;

用以下代码填充 post.js：

import React, { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";

const Post = () => {
	const [post, setPost] = useState({});
	const { id } = useParams();

	useEffect(() => {
		const getPost = async () => {
			const resp = await fetch(`/api/post/${id}`);
			const postResp = await resp.json();
			setPost(postResp);
		};

		getPost();
	}, [id]);

	if (!Object.keys(post).length) return <div />;

	return (
		<div>
			<h1>{post.title}</h1>
			<p>{post.text}</p>
			<p>
				<em>Published {new Date(post.published_at).toLocaleString()}</em>
			</p>
			<p>
				<Link to="/">Go back</Link>
			</p>
		</div>
	);
};

export default Post;

2. 构建 API

现在你将创建 Pages Functions，用于存储博客内容并通过 JSON API 检索。

编写 Pages Function

创建作为 JSON API 的 Pages Function 的步骤：

在 blog-frontend 目录中创建 functions 目录。
在 functions 中，创建名为 api 的目录。
在 api 中，创建 posts.js 文件。
用以下代码填充 posts.js：

import posts from "./post/data";

export function onRequestGet() {
	return Response.json(posts);
}

此代码从博客数据（来自你将在步骤 8 中创建的 data.js）获取数据，并从 /api/posts 路径返回 JSON 响应。

在 api 目录中，创建名为 post 的目录。
在 post 目录中，创建 data.js 文件。
用以下代码填充 data.js。博客内容、标题及其他信息存储于此。

const posts = [
	{
		id: 1,
		title: "My first blog post",
		text: "Hello world! This is my first blog post on my new Cloudflare Workers + Pages blog.",
		published_at: new Date("2020-10-23"),
	},
	{
		id: 2,
		title: "Updating my blog",
		text: "It's my second blog post! I'm still writing and publishing using Cloudflare Workers + Pages :)",
		published_at: new Date("2020-10-26"),
	},
];

export default posts;

在 post 目录中，创建 [[id]].js 文件。
用以下代码填充 [[id]].js：

[[id]].jsjs

import posts from "./data";

export function onRequestGet(context) {
	const id = context.params.id;

	if (!id) {
		return new Response("Not found", { status: 404 });
	}

	const post = posts.find((post) => post.id === Number(id));

	if (!post) {
		return new Response("Not found", { status: 404 });
	}

	return Response.json(post);
}

[[id]].js 是动态路由，用于接受博客文章 id。

3. 部署

配置 Pages 应用和 Pages Function 后，使用 Wrangler 或通过仪表板部署项目。

使用 Wrangler 部署

在 blog-frontend 目录中，运行 wrangler pages deploy 将项目部署到 Cloudflare 仪表板。

wrangler pages deploy blog-frontend

通过 Cloudflare 仪表板部署

要通过 Cloudflare 仪表板部署，需要为 Pages 项目创建新的 Git 仓库并将 Git 仓库连接到 Cloudflare。本教程使用 GitHub 作为 Git 提供商。

创建新仓库

访问 repo.new ↗ 创建新的 GitHub 仓库。创建仓库后，在终端运行以下命令准备并将本地应用推送到 GitHub：

git init
git remote add origin https://github.com/<YOUR-GH-USERNAME>/<REPOSITORY-NAME>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

使用 Cloudflare Pages 部署

将应用部署到 Pages：

在 Cloudflare 仪表板中，前往 Workers & Pages 页面。
Go to Workers & Pages ↗
选择 Create application（创建应用程序） > Pages > Import an existing Git repository（导入现有 Git 仓库）。
选择你创建的 GitHub 仓库，在 Set up builds and deployments（设置构建和部署） 部分提供以下信息：

配置选项	值
Production branch	`main`
Build command	`npm run build`
Build directory	`build`

配置站点后，即可开始首次部署。你将看到 Cloudflare Pages 安装 blog-frontend、项目依赖并构建站点。

完成本教程后，你已创建全栈 Pages 应用。