コンテンツにスキップ

Pages Functionsを使用してフロントエンド用のAPIを構築する

Last reviewed: over 1 year ago

このチュートリアルでは、フルスタックのPagesアプリケーションを構築します。あなたのアプリケーションには以下が含まれます：

  • Cloudflare PagesとReactフレームワークを使用して構築されたフロントエンド。
  • フロントエンドで取得してレンダリングできるブログ投稿を返すPages Functionsで構築されたJSON API。

ブログコンテンツをレンダリングするためにAPIではなくヘッドレスCMSを使用したい場合は、ヘッドレスCMSチュートリアルを参照してください。

フロントエンドを構築する

まず、Reactフレームワークを使用して新しいPagesアプリケーションを作成します。

新しいReactプロジェクトを作成する

ターミナルで、create-react-appコマンドを使用してblog-frontendという名前の新しいReactプロジェクトを作成します。新しく作成されたblog-frontendディレクトリに移動し、ローカル開発サーバーを起動します：

新しいReactアプリケーションを作成する
npx create-react-app blog-frontend
cd blog-frontend
npm start

Reactプロジェクトを設定する

Reactプロジェクトを設定するには：

  1. blog-frontendディレクトリのルートにReact Router ↗をインストールします。

npmを使用して：

Terminal window
npm install react-router-dom@6

yarnを使用して：

Terminal window
yarn add react-router-dom@6
  1. src/App.jsの内容をクリアします。以下のコードをコピーしてApp.jsに貼り付け、React Routerをインポートし、2つのルートを持つ新しいルーターを設定します：
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;
  1. srcディレクトリにcomponentsという新しいフォルダを作成します。
  2. componentsディレクトリにposts.jsとpost.jsという2つのファイルを作成します。これらのファイルはAPIからブログ投稿を読み込み、レンダリングします。
  3. 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>投稿</h1>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>
            <Link to={`/posts/${post.id}`}>{post.title}</Link>
          </h2>
        </div>
      ))}
    </div>
  );
};


export default Posts;
  1. 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>公開日 {new Date(post.published_at).toLocaleString()}</em>
      </p>
      <p>
        <Link to="/">戻る</Link>
      </p>
    </div>
  );
};


export default Post;

APIを構築する

次に、ブログコンテンツを保存し、JSON APIを介して取得するPages Functionsを作成します。

Pages Functionを書く

JSON APIとして機能するPages Functionを作成するには：

  1. blog-frontendディレクトリにfunctionsディレクトリを作成します。
  2. functions内にapiという名前のディレクトリを作成します。
  3. api内にposts.jsファイルを作成します。
  4. posts.jsに以下のコードを追加します：
import posts from "./post/data";


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

このコードはブログデータ（ステップ8で作成するdata.jsから）を取得し、/api/postsパスからJSONレスポンスとして返します。

  1. apiディレクトリ内にpostという名前のディレクトリを作成します。
  2. postディレクトリ内にdata.jsファイルを作成します。
  3. data.jsに以下のコードを追加します。ここにブログコンテンツ、ブログタイトル、およびブログに関するその他の情報が格納されます。
const posts = [
  {
    id: 1,
    title: "私の最初のブログ投稿",
    text: "こんにちは世界！これは私の新しいCloudflare Workers + Pagesブログの最初のブログ投稿です。",
    published_at: new Date("2020-10-23"),
  },
  {
    id: 2,
    title: "ブログの更新",
    text: "私の2番目のブログ投稿です！Cloudflare Workers + Pagesを使用してまだ書いて公開しています :)",
    published_at: new Date("2020-10-26"),
  },
];


export default posts;
  1. postディレクトリ内に[[id]].jsファイルを作成します。
  2. [[id]].jsに以下のコードを追加します：
[[id]].js
import posts from "./data";


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


  if (!id) {
    return new Response("見つかりません", { status: 404 });
  }


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


  if (!post) {
    return new Response("見つかりません", { status: 404 });
  }


  return Response.json(post);
}

[[id]].jsは動的ルートであり、ブログ投稿のidを受け入れるために使用されます。

デプロイ

PagesアプリケーションとPages Functionを設定した後、Wranglerまたはダッシュボードを使用してプロジェクトをデプロイします。

Wranglerでデプロイ

blog-frontendディレクトリ内で、wrangler pages deployを実行して、プロジェクトをCloudflareダッシュボードにデプロイします。

Terminal window
wrangler pages deploy blog-frontend

ダッシュボード経由でデプロイ

Cloudflareダッシュボードを介してデプロイするには、Pagesプロジェクト用の新しいGitリポジトリを作成し、GitリポジトリをCloudflareに接続する必要があります。このチュートリアルでは、GitHubをGitプロバイダーとして使用します。

新しいリポジトリを作成

repo.new ↗を訪れて新しいGitHubリポジトリを作成します。新しいリポジトリを作成した後、ターミナルで以下のコマンドを実行して、ローカルアプリケーションをGitHubに準備してプッシュします：

Terminal window
git init
git remote add origin https://github.com/<YOUR-GH-USERNAME>/<REPOSITORY-NAME>
git add .
git commit -m "初回コミット"
git branch -M main
git push -u origin main

Cloudflare Pagesでデプロイ

アプリケーションをPagesにデプロイします：

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pages > アプリケーションを作成 > Pages > Gitに接続を選択します。
  3. 作成した新しいGitHubリポジトリを選択し、ビルドとデプロイの設定セクションで以下の情報を提供します：
設定オプション値
プロダクションブランチmain
ビルドコマンドnpm run build
ビルドディレクトリbuild

サイトの設定が完了したら、最初のデプロイを開始します。Cloudflare Pagesがblog-frontend、プロジェクトの依存関係をインストールし、サイトをビルドしているのが表示されるはずです。

このチュートリアルを完了することで、フルスタックのPagesアプリケーションを作成しました。

関連リソース

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings