CloudFlareワーカーを使用したJamstackサイトのフォームハンドリング

このチュートリアルでは、速度と費用対効果を提供するサーバーレスプラットフォームであるCloudFlareワーカーを使用して、Jamstack Webサイトまたはシングルページアプリケーション（SPA）のフォーム処理サービスの構築を実証しています。 JamstackのビルドタイムHTMLレンダリングとエッジサーバーの展開は、ロード時間が高速で提供されますが、フォーム処理などのサーバー側のタスクの処理には別のアプローチが必要です。

PHPのような従来のサーバー側のソリューションは、フォームの処理を簡素化しますが、Jamstackはサーバーレス機能の恩恵を受けます。このチュートリアルでは、CloudFlareワーカーを使用して、フォーム処理用のマイクロサービスを作成し、専用サーバーよりもコストの利点を提供し、AirTableなどのサービスと統合することにより複雑なワークフローを有効にします。

主要な利点：

Jamstackサイトでのサーバーレスフォームの処理のためにCloudFlareワーカーを活用すると、パフォーマンスが向上し、コストが削減されます。 サーバーレスマイクロサービスアーキテクチャを介したフォームなどの動的な機能のジャムスタックの制限への対処。 既存のサードパーティサービス（Formspree、Netlifyフォームなど）の使用を迅速に統合するための使用。

サブメッションごとに低コストとカスタマイズされたセキュリティのために、クラウドフレーワーカーを備えたカスタムフォームハンドラーを構築します。

cloudflareのエッジネットワークを使用して、レイテンシを減らします。
直接ブラウザサイドフォームjavascriptを使用したcors preflight request managementを含む送信処理。
• >
リアルタイムのパフォーマンス監視のためのカスタムドメインでの展開とテスト。
• サードパーティフォームハンドラー：
• Formspree、GetForm、FormData、Netlify Formなどのサービスは、電子メール通知、スパムフィルタリング、サードパーティ統合（ZAPIER）、ダッシュボード、ファイルアップロード、CSVエクスポートなどの機能を提供します。 便利でしばしば無料の層を提供していますが、大量の使用に費用がかかる可能性があります。
• 独自のサービスの構築（メリット）：
• CloudFlare Workersを使用してカスタムソリューションを構築することは、
を提供します

提出あたりのコストが低い。

カスタマイズ可能なセキュリティポリシー 無制限のサービス統合。

エッジコンピューティングによるレイテンシの低下

サードパーティのサービスで利用できない機能を追加する柔軟性。

SendGridやMailgunなどの電子メールサービスは無料のティアを提供しますが、直接データベースまたはアプリケーション統合の場合、100万回の提出物はサードパーティのフォームハンドラーよりも大幅に低くなります。 CloudFlare労働者：

サーバーレスプラットフォームであるCloudFlareワーカーは、他のサーバーレス製品で一般的な「コールドスタート」の問題を回避し、V8ランタイムとエッジコンピューティングアーキテクチャのために近視の応答時間を提供します。

プロジェクトの概要：
• このチュートリアルは、CloudFlare Workersアプリケーションを構築し、事前に構築されたReact SPA（ソースコードリンクが提供）と統合することをガイドします。 チュートリアルは、UI開発ではなく、ワーカーバックエンドに焦点を当てています。
  前提条件：
  node.js
  • Visual Studioコード
  • vsコード休憩クライアント拡張機能
  アカウントのセットアップ：

カスタムドメイン（推奨）：
1. カスタムドメインは展開を簡素化し、リアルタイムのログアクセスを提供し、電子メールの配信を改善します。 Domain登録と電子メールホスティングにはFastCometがお勧めします MailGunセットアップ：
MailGunアカウント（無料プランが利用可能）を作成し、確認し、APIキーとベースURLに注意し、認定受信者のメールアドレスを追加します。提供されたCurlコマンドを使用して電子メール送信をテストします。 より高い送信制限と改善された受信ボックス配信には、カスタムドメインが推奨されます。
2. CloudFlare Workersセットアップ：）をインストールし、ログイン（
）、およびインストール（
3. ）を確認します。 ログインが失敗した場合は、元のチュートリアルのトラブルシューティング手順を参照してください。 カスタムドメインを使用している場合は、CloudFlareに追加し、名前を変更して、をダウンロード/構成します。 npm install -g @cloudflare/wrangler wrangler loginwrangler --version cloudflared
プロジェクト開発：

1. プロジェクトの生成：wrangler generate cloudflare-form-service、cd cloudflare-form-service、およびnpm installを使用します。アカウントIDを使用してwrangler.tomlを更新し、開発とフォーマットのためにスクリプトを設定します。package.json
2. 投稿リクエストの取り扱い：index.js投稿リクエストを処理するには、リクエストボディ（JSONまたはフォームデータ）を読み取り、適切な応答（エラー処理を含む）を返します。
3. スキーマ検証：インストール（@cfworker/json-schema）、npm install @cfworker/json-schemaを変更してwrangler.tomlに変更し、JSONスキーマと検証ロジックを使用して"type = "webpack"を作成し、validator.js> 。index.js
4. 電子メール統合：作成、email-service.js、およびemail-text-template.jsを作成します。 email-html-template.jsまたはCloudFlareダッシュボードを使用して、環境変数（Mailgun APIキー、Mailgun API Base URL、電子メールアドレスまで）をセットアップします。 wrangler secret put email-service.jsindex.jscorsの追加：
ブラウザーセキュリティモデルとの互換性を確保するために、
5. を追加してプリライトオプションリクエストを処理します。 corsHeadersindex.jsプロジェクトの展開：

フォーム処理ワーカーサービスの展開サービス：

を使用して、CloudFlareのWorkers.devサブドメインに展開します。 更新されたHTTPリクエストを使用してテスト
1. 。 wrangler publishカスタムドメインデプロイメント（オプション）：test.httpステージング環境と生産環境の設定
、CloudFlare DNS設定でCNAMEレコードを作成し、
2. を使用して生産に公開します。 を使用して環境変数を再アップロードします。 カスタムドメインへのリクエストを使用してテストします。 wrangler.tomlwrangler publish -e productionフォームユーザーインターフェイスの展開：wrangler secret put提供されたReactスパを使用して、ワーカーアプリケーションのURLで
ファイルを構成し、CloudFlareページ、Netlify、またはVercelなどのプラットフォームに展開します。
3. 概要とFAQ：.env

チュートリアルは、Jamstack、CloudFlare Workers、代替形式の取り扱い方法、コストの考慮事項、および制限をカバーする概要と包括的なFAQセクションで締めくくります。 FAQはまた、他のCloudFlareワーカーの機能と機能を探ります。 提供された画像は、元の形式と場所のままです。

以上がCloudFlareワーカーを使用したJamstackサイトのフォームハンドリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。