CloudFlare Workers를 사용하여 Jamstack 사이트에 대한 양식 처리

이 자습서는 속도와 비용 효율성을 제공하는 서버리스 플랫폼 인 CloudFlare Workers를 사용하여 Jamstack 웹 사이트 또는 단일 페이지 응용 프로그램 (SPA)을위한 양식 처리 서비스를 구축하는 것을 보여줍니다. Jamstack의 빌드 타임 HTML 렌더링 및 에지 서버 배포는 빠른로드 시간을 제공하지만 폼 처리와 같은 서버 측 작업을 처리하려면 다른 접근 방식이 필요합니다.

PHP와 같은 기존 서버 측 솔루션은 양식 처리를 단순화하지만 JAMSTACK은 서버리스 기능의 이점을 얻습니다. 이 튜토리얼은 CloudFlare Workers를 사용하여 양식 처리를위한 마이크로 서비스를 만들고 전용 서버에 대한 비용 이점을 제공하며 Airtable과 같은 서비스와 통합하여 복잡한 워크 플로우를 가능하게합니다. 주요 장점 :

Jamstack 사이트에서 서버리스 양식 처리를 위해 CloudFlare 작업자 활용 서버리스 마이크로 서비스 아키텍처를 통한 양식과 같은 동적 기능에 대한 jamstack 제한 주소. 빠른 통합을 위해 기존 타사 서비스 (Formspree, Netlify Forms 등)의 사용을 탐색합니다. 제출 당 비용을 낮추고 맞춤형 보안을 위해 CloudFlare 근로자가있는 맞춤형 양식 핸들러 구축. 지연 감소를 위해 CloudFlare의 에지 네트워크 사용 CORS Preflight Request Management를 포함하여 JavaScript를 사용한 직접 브라우저 측 양식 제출. 실시간 성능 모니터링을 위해 사용자 정의 도메인에 배포 및 테스트를 배포하고 테스트합니다.

타사 양식 처리기 :

Formspree, GetForm, FormData 및 NetLify Form과 같은 서비스는 이메일 알림, 스팸 필터링, 제 3 자 통합 (ZAPIER), 대시 보드, 파일 업로드 및 CSV 내보내기와 같은 기능을 제공합니다. 편리하고 종종 무료 계층을 제공하지만 대량 사용 비용이 많이들 수 있습니다.

자신의 서비스 구축 (혜택) : CloudFlare Workers를 사용하여 사용자 정의 솔루션을 구축합니다 _{제출 당 비용 저렴한 비용. 사용자 정의 가능한 보안 정책. 무제한 서비스 통합. 에지 컴퓨팅으로 인한 대기 시간 감소 타사 서비스에서 사용할 수없는 기능을 추가 할 수있는 유연성}

Sendgrid 및 Mailgun과 같은 이메일 서비스는 무료 계층을 제공하지만 직접 데이터베이스 또는 응용 프로그램 통합의 경우 백만 건의 비용이 타사 양식 처리기보다 상당히 낮을 수 있습니다.

CloudFlare Workers : 서버리스 플랫폼 인 CloudFlare Workers는 다른 서버리스 오퍼링에서 공통적 인 "콜드 스타트"문제를 피하며 V8 런타임 및 에지 컴퓨팅 아키텍처로 인해 거의 불완전한 응답 시간을 제공합니다. 프로젝트 개요 :
• 이 튜토리얼은 CloudFlare Workers 애플리케이션을 구축하고 사전 구축 된 React SPA (소스 코드 링크)와 통합하여 안내합니다. 이 자습서는 UI 개발이 아닌 근로자 백엔드에 중점을 둡니다.

  전제 조건 :

  node.js 비주얼 스튜디오 코드 <rest vs code rest client extension> <strong> 계정 설정 : </strong> </rest>

  사용자 정의 도메인 (권장) : 사용자 정의 도메인은 배포를 단순화하고 실시간 로그 액세스를 제공하며 이메일 전달 가능성을 향상시킵니다. FastComet은 도메인 등록 및 이메일 호스팅을 위해 제안됩니다
  MailGun 설정 :
  • MailGun 계정을 만들고 (무료 계획 이용 가능) 확인하고 API 키 및 기본 URL을 기록한 후 공인 수신자 이메일 주소를 추가하십시오. 제공된 CURL 명령을 사용하여 이메일 보내기 테스트. 더 높은 발송 한도와받은 편지함 전달을 향상시키기 위해 사용자 정의 도메인이 권장됩니다.
  • CloudFlare Workers 설정 :
  CloudFlare Workers 계정에 가입하고 Wrangler CLI ()를 설치하고 로그인 ()을 설치하고 설치 ()를 확인하십시오. 로그인이 실패하면 원래 자습서의 문제 해결 단계를 참조하십시오. 사용자 정의 도메인을 사용하는 경우 CloudFlare에 추가하고 Nameservers를 변경하고 를 다운로드/구성하십시오.
  프로젝트 개발 :
  프로젝트 생성 :
  1. 사용 , 및 . 계정 ID로 를 업데이트하고 개발 및 서식을 위해 로 스크립트를 설정합니다. 게시 후 요청 처리 : 수정 게시물 요청을 처리하려면 요청 본문 (JSON 또는 양식 데이터)을 읽고 적절한 응답을 반환합니다 (오류 처리 포함). 스키마 유효성 검증 : 설치 ), 로 변경하고 를 JSON 스키마 및 유효성 검사 로직으로 생성하고 에 통합하십시오. . 전자 메일 통합 : wrangler generate cloudflare-form-service 생성 , cd cloudflare-form-service 및 . 환경 변수 (Mailgun API 키, Mailgun API Base URL, 이메일 주소에서 이메일 주소까지) 또는 CloudFlare 대시 보드를 설정하십시오. 에 npm install CORS 추가 : wrangler.toml에 package.json를 추가하고 브라우저 보안 모델과의 호환성을 보장하기 위해 프리 플라이트 옵션 요청을 처리합니다.
  2. 프로젝트 배포 : 배포 양식 처리 근로자 서비스 : 를 사용하여 CloudFlare의 Workers.dev subdomain에 배포하십시오. index.js 사용자 정의 도메인 배포 (선택 사항) :
  3. 에서 준비 및 생산 환경을 설정하고 CloudFlare DNS 설정에서 CNAME 레코드를 작성하고 를 사용하여 생산에 게시합니다. 를 사용하여 환경 변수를 다시 지원합니다. 사용자 정의 도메인에 대한 요청으로 테스트하십시오 배포 양식 사용자 인터페이스 배포 : 제공된 React Spa를 사용하고, Workers Application URL과 함께 @cfworker/json-schema 파일을 구성하고 CloudFlare Pages, NetLify 또는 Vercel과 같은 플랫폼에 배포하십시오. npm install @cfworker/json-schema 요약 및 FAQ : wrangler.toml 튜토리얼은 Jamstack, CloudFlare Workers, 대체 양식 처리 방법, 비용 고려 사항 및 제한 사항을 다루는 요약 및 포괄적 인 FAQ 섹션으로 마무리됩니다. FAQ는 또한 다른 CloudFlare Workers 기능 및 기능을 탐색합니다. 제공된 이미지는 원래 형식과 위치로 유지됩니다. "type = "webpack"

위 내용은 CloudFlare Workers를 사용하여 Jamstack 사이트에 대한 양식 처리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!