← Cloudflare Pages / pages / tutorials

Создание API для внешнего интерфейса с помощью Pages Functions

В этом руководстве вы создадите full-stack приложение на Pages. Ваше приложение будет включать:

• Фронтенд, созданный с использованием Cloudflare Pages и Фреймворк React.
• JSON API, созданный с помощью Pages Functions, которая возвращает записи блога, доступные для получения и отображения на фронтенде.

Если для отображения контента блога вы предпочитаете использовать headless CMS, а не API, ознакомьтесь с руководство по headless CMS.

Для начала создайте новое приложение Pages с использованием фреймворка React.

В терминале создайте новый проект React с именем blog-frontend с помощью create-vite команду. Перейдите в только что созданную blog-frontend директорию и запустите локальный сервер разработки:

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

Чтобы настроить проект React:

1. Установите React Router ↗ в корне вашего blog-frontend каталог.

npm i react-router-dom@6

2. Очистите содержимое 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;

3. В src директории создайте новую папку с именем components.
4. В components директории создайте два файла: posts.js, а также post.js. Эти файлы будут загружать записи блога из вашего API и отображать их.
5. Заполните 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;

6. Заполните 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;

Теперь вы создадите Pages Functions, которая сохраняет содержимое блога и получает его через JSON API.

Чтобы создать Pages Function, которая будет работать как JSON API:

1. Создайте functions директория в вашем blog-frontend каталог.
2. В functions, создайте директорию с именем api.
3. В api, создайте posts.js файл в api каталог.
4. Заполните posts.js следующим кодом:

import posts from "./post/data";

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

Этот код получает данные блога (из data.js, который вы создадите в шаге 8, и вернёт его в виде JSON-ответа по пути /api/posts.

5. В api директории создайте директорию с именем post.
6. В post директории создайте data.js файл.
7. Заполните 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;

8. В post директории создайте [[id]].js файл.
9. Заполните [[id]].js следующим кодом:

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.

После того как вы настроите приложение Pages и Pages Function, разверните проект с помощью Wrangler или через панель управления.

В вашем blog-frontend директории выполните wrangler pages deploy чтобы развернуть проект через панель управления Cloudflare.

wrangler pages deploy blog-frontend

Чтобы развернуть проект через Cloudflare dashboard, создайте новый Git-репозиторий для проекта Pages и подключите его к Cloudflare. В этом руководстве в качестве Git-провайдера используется GitHub.

Создайте новый репозиторий GitHub, перейдя по адресу repo.new ↗. После создания нового репозитория подготовьте локальное приложение и отправьте его в 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

Разверните ваше приложение на Pages:

1. На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.

   Перейдите в Workers & Pages ↗

2. Выберите Создать приложение > Pages > Импорт существующего репозитория Git.

3. Выберите созданный вами новый репозиторий GitHub и в разделе Настройка сборок и деплоев раздел и укажите следующую информацию:

После настройки сайта запустите первый деплой. Вы увидите, как Cloudflare Pages устанавливает blog-frontend, зависимостей вашего проекта и сборку сайта.

После выполнения этого руководства вы создали full-stack приложение на Pages.

• Подробнее о Маршрутизация Pages Functions