CloudflareでWebアプリ開発[2/3] Cloudflare Pages Functionsを作成する

はじめに

今回は、React（Vite）のプロジェクトでCloudflare Pages Functionsを作成したいと思います。

この記事はこんな人におすすめ！

• React（Vite）でWebサイトを作成したい人
• Cloudflare PagesでWebサイトを公開したい人
• Cloudflare Pages Functionsを作成したい人

前の記事

前回は、React（Vite）でWebサイトを作成し、Cloudflare Pagesで公開することができました。
https://zenn.dev/kinakokyoryu/articles/ee93e3e8b24826

1. Cloudflare Pages Functionsを作成

1. Reactのプロジェクトフォルダに「functions」というフォルダを作成します。
2. 「functions」フォルダ内にTypeScriptのファイルを作成します。
   ファイル名は「index」以外、拡張子は「.ts」にします。
   ここでは「helloworld.ts」とします。

       vite-project
   +   ├── functions
   +   │   └── helloworld.ts
       ├── node_modules
       ├── public
       │   └── favicon.ico
       ├── src
       │   ├── App.tsx
       │   ├── main.tsx
       │   └── vite-env.d.ts
       ├── .gitignore
       ├── eslint.config.js
       ├── index.html
       ├── package-lock.json
       ├── package.json
       ├── README.md
       ├── tsconfig.app.json
       ├── tsconfig.json
       ├── tsconfig.node.json
       └── vite.config.ts
   

3. 「helloworld.ts」に以下コードを記載します。
   helloworld.ts

   export const onRequestPost = (): Response => {
     return new Response(JSON.stringify({ output: "hello world!" }), {
       headers: { "Content-Type": "application/json" },
     });
   };
   

2. Cloudflare Pages Functionsにリクエストする

1. src/App.tsxを以下コードで上書きし、「送信」ボタンを押すと、Cloudflare Pages FunctionsにPOSTリクエストできるようにします。
   また、レスポンスを画面に表示するようにします。
   App.tsx

   import { useState } from "react";
   
   interface Data {
     output: string;
   }
   
   function App() {
     const [output, setOutput] = useState<string>("");
   
     const send = async () => {
       const response = await fetch("/helloworld", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
       });
   
       const data: Data = await response.json();
       setOutput(data.output);
     };
   
     return (
       <>
         <button onClick={send}>送信</button>
         <p>{output}</p>
       </>
     )
   }
   
   export default App
   

2. Cloudflare Pagesにデプロイして確認してみます。
   ターミナル

   npm run git
   

3. Cloudflare PagesのWebサイトを開くと、「送信」ボタンが表示されます。
   
4. 「送信」ボタンを押下し、ボタンの下に「hello world!」が表示されたら成功です。
   

さいごに

React（Vite）のプロジェクトでCloudflare Pages Functionsを作成することができました。
Cloudflare Pages Functionsをさらに編集し、バックエンドでの処理を実現してみてください。

無料のCloudflare Workers （Pages Functions）には厳しい制限があります。

• リクエスト数：10万 件 / 日、1000 件 / 分
• ファイルサイズ：3 MB / プロジェクト
• CPU処理時間：10 ms / リクエスト

他の制限は以下の記事をご覧ください。
https://zenn.dev/kinakokyoryu/articles/7c858acdec5020

次の記事

次回は、Cloudflare Workers AIを使用して、文章生成AIのWebアプリを作成します。
https://zenn.dev/kinakokyoryu/articles/21176e575a6ad7