使用Cloudflare工人為jamstack站點進行處理

>本教程演示了使用CloudFlare Workers為您的Jamstack網站或單頁應用程序（SPA）建立形式處理服務，這是一個無服務器平台，提供速度和成本效益。 JAMSTACK的構建時間HTML渲染和邊緣服務器部署提供了快速的加載時間，但是處理服務器端任務（例如Form Processing）需要一種不同的方法。

>

>傳統的服務器端解決方案（例如PHP簡化了表單處理），但Jamstack受益於無服務器功能。本教程使用CloudFlare工人來創建用於形式處理的微服務，為專用服務器提供成本優勢，並通過與AirTable等服務集成來啟用複雜的工作流程。

鍵優點：

利用CloudFlare工人在Jamstack站點上處理無服務器形式的處理可提高性能並降低成本。
• 解決動態功能的jamstack限制，例如通過無服務器微服務架構表單。
探索現有的第三方服務（Formspree，NetLify表格等）的使用來快速集成。
• >用Cloudflare工人建造自定義表單處理程序，以較低的每次提交和量身定制的安全性。 >
>利用Cloudflare的邊緣網絡減少延遲。
• >直接瀏覽器側表格提交處理與JavaScript，包括CORS PREFLIGHT請求管理。
在自定義域上部署和測試以進行實時性能監視。
• 第三方形式處理程序：
• 諸如Formspree，GetForm，FormData和NetLify表單之類的服務提供了電子郵件通知，垃圾郵件過濾，第三方集成（Zapier），儀表板，儀表板，文件上傳和CSV導出。 雖然方便且經常提供免費的層，但對於大量使用而言，它們可能會成本高昂。
>
• 建立自己的服務（福利）：

>

>使用CloudFlare工人建立自定義解決方案提供：

每次提交的成本較低。

>可自定義的安全策略。

>無限服務集成。

降低了由於邊緣計算而引起的延遲。

靈活性添加第三方服務中不可用的功能。

>
>諸如sendgrid和mailgun之類的電子郵件服務提供免費的層，但是對於直接數據庫或應用程序集成，每百萬提交的成本可能明顯低於第三方表單處理程序。
Cloudflare工人：
CloudFlare工人（一個無服務器平台）避免了其他無服務器產品中常見的“冷啟動”問題，由於其V8運行時和邊緣計算體系結構，提供了近乎固有的響應時間。
• >
• 項目概述：

>該教程通過構建CloudFlare Worker的應用程序並將其與預先構建的React Spa（提供的源代碼鏈接）集成在一起。 該教程側重於工人後端，而不是UI開發。

>先決條件：

Visual Studio Code

vs代碼ret client Extension

帳戶設置：

自定義域（推薦）：
1. >自定義域簡化部署，提供實時日誌訪問並改善電子郵件的交付性。 建議使用域註冊和電子郵件託管FastComet。 >
mailgun設置：
2. 創建一個Mailgun帳戶（免費計劃），驗證它，記錄您的API密鑰和基本URL，並添加授權的收件人電子郵件地址。測試電子郵件使用提供的捲發命令發送。 建議使用自定義域，以進行更高的發送限制和改進的收件箱交付。 CloudFlare工人設置：
註冊Cloudflare工人帳戶，安裝Wrangler CLI（
3. ），登錄（），然後驗證安裝（>）。 如果登錄失敗，請參閱原始教程中的故障排除步驟。 如果使用自定義域，請將其添加到CloudFlare，更改名稱服務器，然後下載/configurenpm install -g @cloudflare/wrangler。 wrangler login wrangler --version cloudflared

項目開發：

1. 生成項目：使用wrangler generate cloudflare-form-service，cd cloudflare-form-service和npm install>。使用您的帳戶ID進行更新wrangler.toml，並在package.json中設置腳本以進行開發和格式。
>
2. >>處理帖子請求：修改index.js來處理髮布請求，讀取請求正文（JSON或表單數據），然後返回適當的響應（包括錯誤處理）。
>
3. 架構驗證：install @cfworker/json-schema（npm install @cfworker/json-schema），將wrangler.toml更改為"type = "webpack">，使用JSON架構和驗證邏輯創建> 。 validator.js index.js
電子郵件集成：
4. 創建，和email-service.js。 設置環境變量（MailGun API密鑰，Mailgun API基礎URL，從電子郵件地址到電子郵件地址）或使用CloudFlare儀表板。 將email-text-template.js集成到email-html-template.js>。 wrangler secret put>email-service.js>添加CORS：index.js>添加
到
5. 並處理前閃式選項請求，以確保與瀏覽器安全模型的兼容性。 > corsHeaders項目部署：index.js

>部署表單處理工人服務：>使用

部署到Cloudflare的Workers.dev子域。 在

>中使用更新的HTTP請求進行測試
1. 自定義域部署（可選）：>在wrangler publish>中設置登台和生產環境，在您的Cloudflare DNS設置中創建CNAME記錄，並使用test.http發佈到生產。 使用
重新上傳環境變量。 對您的自定義域的請求進行測試。
2. >部署表單用戶界面：wrangler.toml使用提供的react spa，使用您的工人應用程序配置wrangler publish -e production文件，然後部署到諸如Cloudflare頁面之類的平台，NetLify或vercel。 wrangler secret put
3. 摘要和常見問題解答： >教程以摘要和全面的常見問題解答結束，涵蓋了jamstack，Cloudflare工人，替代形式的處理方法，成本考慮因素和限制。 常見問題解答還探索其他Cloudflare工人的功能和功能。 所提供的圖像保留在其原始格式和位置。 .env

以上是使用Cloudflare工人為jamstack站點進行處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！