コンテンツにスキップ

ワーカーをページ関数にリファクタリングする

このガイドでは、フォーム送信を受け取るために作成されたワーカーを、Cloudflare Pagesアプリケーションでホストできるページ関数にリファクタリングする方法を学びます。Pages Functionsは、アプリケーションと同じプロジェクトディレクトリ内に存在し、Cloudflare Pagesと共にデプロイされるサーバーレス関数です。これにより、専用のサーバーを運用することなく、動的な機能を追加するサーバーサイドコードを実行できます。ワーカーをページ関数にリファクタリングしたい理由は次のいずれかです：

  1. ページアプリケーションが依存しているサーバーレス関数を管理しており、ワーカーを別のサービスとして管理せずにロジックを出荷したい場合。
  2. ワーカーをページ関数に移行して、ページ関数のルーティングおよびミドルウェア機能を利用したい場合。

一般的なリファクタリング手順

  1. addEventListener()メソッドとそのイベント応答を削除し、適切なOnRequestメソッドに置き換えます。関数に適切なメソッドを選択するには、Functionsを参照してください。
  2. contextオブジェクトを新しいOnRequestメソッドの引数として渡し、request、env、params、およびnextのプロパティにアクセスします。
  3. ルートハンドラーの前または後に実行する必要があるロジックを処理するためにミドルウェアを使用します。Functionsドキュメントでミドルウェアの使用について詳しく学んでください。

背景

リファクタリングのプロセスを説明するために、このガイドではシンプルなフォーム送信の例を使用します。

フォーム送信はワーカーによって処理できますが、特定のアプリケーションに特有のものであるため、ページ関数の良い使用例でもあります。

すでにワーカーを使用してフォームを処理していると仮定すると、このワーカーをデプロイし、HTMLフォームのアクション属性にURLを追加しているはずです。これは、ワーカーが送信を処理する方法を変更すると、ワーカーのスクリプトに変更を加える必要があることを意味します。ワーカーのロジックが複数のアプリケーションで使用されている場合、ページ関数は良い使用例ではありません。

ただし、アプリケーションと同じプロジェクトディレクトリ内で関数ロジックを整理したい場合は、Pages Functionを使用することが有益です。

ページ関数を使用してアプリケーションを構築することで、クライアントとサーバーレスロジックを同じ場所で管理し、コードの記述とデバッグを容易にすることができます。

Airtableとワーカーでフォームエントリを処理する

Airtable ↗は、コラボレーティブアプリケーションを構築するためのローコードプラットフォームです。ワークフローをカスタマイズし、コラボレーションし、フォーム送信を処理するのに役立ちます。この例では、Airtableのフォーム送信機能を利用します。

Airtable ↗は、同じアカウントの異なるテーブルに情報のエントリを保存するために使用できます。送信ロジックを処理するためのワーカーを作成する際の最初のステップは、Wranglerを使用して、特定のフォルダー内またはアプリケーションのルートに新しいワーカーを初期化することです。

このステップでは、Airtable送信ワーカーを書くためのボイラープレートが作成されます。ワーカーを書いた後、プロジェクトをデプロイ用に構成した後、Cloudflareのグローバルネットワークにデプロイできます。ワーカーでのフォーム送信の処理に関する完全なチュートリアルについては、ワーカーのドキュメントを参照してください。

以下のコードブロックは、Airtableフォーム送信を処理するワーカーの例を示しています。

すべてのワーカーは、fetchアクションに対するデフォルトの応答を持ち、requestハンドラーがあります。ワーカーのパス名が/submitの場合、submitHandler非同期関数が呼び出されます。この関数は、リクエストメソッドがPOSTリクエストであることを確認し、その後、フォームエントリを解析して、あなたの資格情報を使用してAirtableに投稿します。資格情報は、Wrangler secretを使用して保存できます。

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});




async function handleRequest(request) {
  const url = new URL(request.url);


  if (url.pathname === "/submit") {
    return submitHandler(request);
  }


  return fetch(request.url);
}


async function submitHandler(request) {
  if (request.method !== "POST") {
    return new Response("Method not allowed", {
      status: 405,
    });
  }
  const body = await request.formData();


  const { first_name, last_name, email, phone, subject, message } =
    Object.fromEntries(body);


  const reqBody = {
    fields: {
      "First Name": first_name,
      "Last Name": last_name,
      Email: email,
      "Phone number": phone,
      Subject: subject,
      Message: message,
    },
  };


  return HandleAirtableData(reqBody);
}


const HandleAirtableData = (body) => {
  return fetch(
    `https://api.airtable.com/v0/${AIRTABLE_BASE_ID}/${encodeURIComponent(
      AIRTABLE_TABLE_NAME
    )}`,
    {
      method: "POST",
      body: JSON.stringify(body),
      headers: {
        Authorization: `Bearer ${AIRTABLE_API_KEY}`,
        "Content-type": `application/json`,
      },
    }
  );
};

ワーカーをリファクタリングする

上記のワーカーをリファクタリングするには、ページプロジェクトディレクトリに移動し、/functionsフォルダーを作成します。/functions内にform.jsファイルを作成します。このファイルはフォーム送信を処理します。

次に、form.jsファイルで単一のonRequestPostをエクスポートします：

export async function onRequestPost(context) {
  return await submitHandler(context);
}

すべてのワーカーにはfetchイベントをリッスンするaddEventListenerがありますが、ページ関数ではこれを必要としません。代わりに、単一のonRequest関数をexportし、処理するHTTPSリクエストに応じて名前を付けます。関数に適切なメソッドを選択するには、Function documentationを参照してください。

上記のコードは、requestとenvを引数として受け取り、これらのプロパティをsubmitHandler関数に渡します。この関数は、元のワーカーから変更されていません。ただし、関数ではHTTPSリクエストタイプを指定できるため、ワーカー内のrequest.methodチェックを削除できます。これは、onRequestハンドラーの名前付けによってページ関数によって処理されます。

次に、submitHandler関数を導入し、envパラメータをプロパティとして渡します。これにより、以下のHandleAirtableData関数内でenvにアクセスできるようになります。この関数は、Airtableの資格情報を使用してAirtableにPOSTリクエストを行います：

export async function onRequestPost(context) {
  return await submitHandler(context);
}


async function submitHandler(context) {
  const body = await context.request.formData();


  const { first_name, last_name, email, phone, subject, message } =
    Object.fromEntries(body);


  const reqBody = {
    fields: {
      "First Name": first_name,
      "Last Name": last_name,
      Email: email,
      "Phone number": phone,
      Subject: subject,
      Message: message,
    },
  };


  return HandleAirtableData({ body: reqBody, env: env });
}

最後に、HandleAirtableData関数を作成します。この関数は、Airtableの資格情報とリクエストのボディを使用してAirtableにfetchリクエストを送信します：

// ..
const HandleAirtableData = async function onRequest({ body, env }) {
  return fetch(
    `https://api.airtable.com/v0/${env.AIRTABLE_BASE_ID}/${encodeURIComponent(
      env.AIRTABLE_TABLE_NAME
    )}`,
    {
      method: "POST",
      body: JSON.stringify(body),
      headers: {
        Authorization: `Bearer ${env.AIRTABLE_API_KEY}`,
        "Content-type": `application/json`,
      },
    }
  );
};

Wranglerを使用してローカルで関数をテストできます。このガイドを完了することで、フォーム送信ワーカーをフォーム送信ページ関数に正常にリファクタリングしました。

関連リソース

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings