首页 > web前端 > js教程 > 使用Cloudflare工人为jamstack站点进行处理

使用Cloudflare工人为jamstack站点进行处理

Lisa Kudrow
发布: 2025-02-10 11:10:12
原创
672 人浏览过

>本教程演示了使用CloudFlare Workers为您的Jamstack网站或单页应用程序(SPA)建立形式处理服务,这是一个无服务器平台,提供速度和成本效益。 JAMSTACK的构建时间HTML渲染和边缘服务器部署提供了快速的加载时间,但是处理服务器端任务(例如Form Processing)需要一种不同的方法。

>

Form Handling for Jamstack Sites Using Cloudflare Workers

>传统的服务器端解决方案(例如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。>
    2. mailgun设置:
    3. 创建一个Mailgun帐户(免费计划),验证它,记录您的API密钥和基本URL,并添加授权的收件人电子邮件地址。测试电子邮件使用提供的卷发命令发送。 建议使用自定义域,以进行更高的发送限制和改进的收件箱交付。 CloudFlare工人设置:
    4. 注册Cloudflare工人帐户,安装Wrangler CLI(
    5. ),登录(),然后验证安装(>)。 如果登录失败,请参阅原始教程中的故障排除步骤。 如果使用自定义域,请将其添加到CloudFlare,更改名称服务器,然后下载/configurenpm install -g @cloudflare/wranglerwrangler login wrangler --version cloudflared

    Form Handling for Jamstack Sites Using Cloudflare Workers 项目开发:

    1. 生成项目:使用wrangler generate cloudflare-form-servicecd cloudflare-form-servicenpm install>。使用您的帐户ID进行更新wrangler.toml,并在package.json中设置脚本以进行开发和格式。
    2. >
    3. >>处理帖子请求:修改index.js来处理发布请求,读取请求正文(JSON或表单数据),然后返回适当的响应(包括错误处理)。
    4. >
    5. 架构验证:install @cfworker/json-schemanpm install @cfworker/json-schema),将wrangler.toml更改为"type = "webpack">,使用JSON架构和验证逻辑创建> 。validator.js index.js
    6. 电子邮件集成:
    7. 创建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>添加
    8. 并处理前闪式选项请求,以确保与浏览器安全模型的兼容性。> corsHeaders项目部署:index.js

    >部署表单处理工人服务:>使用

    部署到Cloudflare的Workers.dev子域。 在
      >中使用更新的HTTP请求进行测试
    1. 自定义域部署(可选):>在wrangler publish>中设置登台和生产环境,在您的Cloudflare DNS设置中创建CNAME记录,并使用test.http发布到生产。 使用
    2. 重新上传环境变量。 对您的自定义域的请求进行测试。
    3. >部署表单用户界面:wrangler.toml使用提供的react spa,使用您的工人应用程序配置wrangler publish -e production文件,然后部署到诸如Cloudflare页面之类的平台,NetLify或vercel。 wrangler secret put
    4. 摘要和常见问题解答: >教程以摘要和全面的常见问题解答结束,涵盖了jamstack,Cloudflare工人,替代形式的处理方法,成本考虑因素和限制。 常见问题解答还探索其他Cloudflare工人的功能和功能。 所提供的图像保留在其原始格式和位置。.env

    以上是使用Cloudflare工人为jamstack站点进行处理的详细内容。更多信息请关注PHP中文网其他相关文章!

    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    作者最新文章
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板