← Cloudflare Pages / pages / tutorials

Vytvoření API pro frontend pomocí Pages Functions

V tomto tutoriálu vytvoříte full-stack aplikaci v Pages. Vaše aplikace bude obsahovat:

• Frontend vytvořený pomocí Cloudflare Pages a Framework React.
• JSON API vytvořené pomocí Pages Functions, která vrací příspěvky na blogu, jež lze načíst a vykreslit na vašem frontendu.

Pokud pro vykreslování obsahu svého blogu dáváte přednost headless CMS před API, přečtěte si tutoriál pro headless CMS.

Nejprve vytvořte novou aplikaci Pages pomocí frameworku React.

V terminálu vytvořte nový projekt React s názvem blog-frontend pomocí create-vite příkaz. Přejděte do nově vytvořeného blog-frontend adresář a spusťte lokální vývojový server:

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

Chcete-li nastavit svůj projekt React:

1. Nainstalujte React Router ↗ v kořenovém adresáři vašeho blog-frontend adresář.

npm i react-router-dom@6

2. Vymažte obsah src/App.js. Zkopírujte a vložte následující kód, kterým naimportujete React Router do App.js, a nastavte nový router se dvěma trasami:

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. V src adresáři vytvořte novou složku s názvem components.
4. V components adresáři vytvořte dva soubory: posts.js, a post.js. Tyto soubory načtou příspěvky na blogu z vašeho API a vykreslí je.
5. Naplňte posts.js s následujícím kódem:

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. Naplňte post.js s následujícím kódem:

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;

Nyní vytvoříte Pages Functions, které ukládá obsah vašeho blogu a načítá jej přes JSON API.

Chcete-li vytvořit funkci Pages Function, která bude fungovat jako vaše JSON API:

1. Vytvořte functions adresář ve vašem blog-frontend adresář.
2. V functions, vytvořte adresář s názvem api.
3. V api, vytvořte posts.js soubor v api adresář.
4. Naplňte posts.js s následujícím kódem:

import posts from "./post/data";

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

Tento kód načítá data blogu (z data.js, který vytvoříte v kroku 8) a vrátí jej jako odpověď JSON z cesty /api/posts.

5. V api adresáři vytvořte adresář s názvem post.
6. V post adresáři vytvořte data.js .
7. Naplňte data.js s následujícím kódem. Právě zde se nachází obsah blogu, jeho název a další informace o blogu.

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. V post adresáři vytvořte [[id]].js .
9. Naplňte [[id]].js s následujícím kódem:

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 je dynamická trasa která slouží k přijetí příspěvku na blogu id.

Jakmile nakonfigurujete aplikaci Pages a Pages Function, nasaďte projekt pomocí Wrangler nebo přes dashboard.

Ve vašem blog-frontend adresáři spusťte wrangler pages deploy a nasaďte projekt do dashboardu Cloudflare.

wrangler pages deploy blog-frontend

Chcete-li nasazovat přes Cloudflare dashboard, musíte pro svůj projekt Pages vytvořit nový repozitář Git a připojit jej ke Cloudflare. Tento návod používá jako poskytovatele Git službu GitHub.

Vytvořte nový repozitář GitHub na repo.new ↗. Po vytvoření nového repozitáře v terminálu spusťte následující příkazy, kterými připravíte a odešlete svou místní aplikaci na 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

Nasaďte svou aplikaci na Pages:

1. V dashboardu Cloudflare přejděte na Workers & Pages stránce.

   Přejděte na Workers & Pages ↗

2. Vyberte Vytvoření aplikace > Pages > Importujte existující repozitář Git.

3. Vyberte nově vytvořený repozitář GitHub a v Nastavení sestavení a nasazení sekci uveďte následující informace:

Po nakonfigurování webu spusťte první nasazení. Měli byste vidět, jak Cloudflare Pages instaluje blog-frontend, závislosti projektu a sestavuje web.

Dokončením tohoto tutoriálu jste vytvořili full-stack aplikaci Pages.

• Přečtěte si o Směrování v Pages Functions