NetLify Forms 및 NetLify 기능을 사용하여 이메일 가입 위젯을 구축합니다.

개인 웹 사이트를 구축하고 유지 관리하면 플랫폼의 소유권 및 웹 기술을 탐색 할 수있는 기회를 포함하여 수많은 이점이 있습니다. 최근에 나는 내 사이트를 시작으로 서버리스 기능을 탐구했습니다. 이 기사는 내 경험과 학습을 공유하여 직접 구축 할 수 있습니다!

서버리스 기능에 대한 빠른 소개

서버리스 함수 (Lambda 함수 또는 클라우드 기능이라고도 함)는 웹 사이트, 응용 프로그램 또는 기타 코드와 독립적으로 작성, 호스팅 및 실행할 수있는 자체 포함 코드 스 니펫입니다. 서버에서 실행되는 동안 서버 인프라를 관리하지 않습니다. 이것은 강력하고 확장 가능한 응용 프로그램의 개발을 단순화합니다.

보다 심층적 인 이해를 위해 CSS- 트릭의 가이드 인 "Serverless 프론트 엔드 개발자의 힘"은 훌륭한 리소스입니다.

프로젝트 목표 : 간단한 이메일 가입 양식

내 프로젝트는 특정 제약 조건이있는 이메일 가입 양식 작성에 중점을 두었습니다.

• JavaScript없는 기능 : 양식은 CSS 및 HTML만으로 작동하여 점진적인 향상을 허용해야합니다.
• 외부 의존성 없음 : 목표는 모든 코드를 직접 작성하는 것이 었습니다.
• 서버리스 기능 통합 : 이메일 데이터 처리는 클라이언트면이 아닌 서버 측이 발생합니다.

기술 스택 : 110, Netlify 및 Buttondown

내 웹 사이트는 정적 사이트 생성기 인 11ty를 사용하여 HTML 템플릿 생성을 허용합니다. Netlify는 배포를 처리하며 서버리스 기능에 중요합니다.

• 자동화 된 GitHub 배포 : 개발 워크 플로를 단순화합니다.
• netlify 양식 : 사용자 정의 코드없이 양식 제출을 관리합니다.
• Netlify 함수 : 폼 데이터를 기반으로 서버 측 작업을 활성화합니다.

Buttondown은 이메일 목록 관리 서비스 역할을합니다. 중요한 것은 개인 사이트의 경우 세 서비스 모두 무료 계층을 제공합니다.

양식의 HTML

내 이메일 구독 양식의 HTML은 간결하며 Netlify Forms 속성을 활용합니다.

귀하의 이메일 주소 구독하다

data-netlify="true" NetLify에게 양식을 처리하도록 지시합니다. bot-field ​​입력은 사용자로부터 자동으로 숨겨진 봇을 감지하는 허니 포트 역할을합니다. Netlify의 Akismet 통합은 스팸을 더욱 보호합니다. email 입력은 향상된 사용자 경험을 위해 브라우저 유효성 검사를 사용합니다.

JavaScript의 점진적 향상

Netlify Forms는 자동 리디렉션을 제공하지만 페이지에 사용자를 유지하는 것을 선호했습니다. 자바 스크립트 함수는 양식의 기능을 향상시킵니다.

 const processform = form => {
  // ... (리디렉션없이 양식을 제출하려면 API 코드를 가져옵니다) ...
};

제출 이벤트 리스너에 의해 트리거 된이 기능은 양식을 점차적으로 향상시켜 JavaScript 비활성화 된 상태에서도 기능을 보장합니다.

서버리스 기능

functions/submission-created.js 에 위치한 netlify 함수는 프로세스 양식 제출을 제공합니다.

 // ... (Node.js 코드는 Node-Fetch 및 환경 변수를 사용하여 데이터를 Buttondown으로 보내기) ...

이 기능은 이메일 주소를 검색하고 node-fetch 사용하여 API를 통해 Buttondown으로 보내고 디버깅 결과를 기록합니다. 환경 변수는 Buttondown API 키를 안전하게 저장합니다.

배포 및 로컬 테스트

함수를 작성한 후 netlify.toml 구성 및 환경 변수 설정을 작성하면 NetLify의 GitHub 통합을 통해 배포가 간단합니다. 폼 제출 테스트에는 미리보기 빌드가 필요하지만 Netlify Dev ( npm i netlify -g , netlify dev )를 사용하여 로컬 테스트가 가능합니다.

향후 개선

향후 개선 사항에는 이메일 주소가 이미 구독되었는지 표시와 같은 사용자에게 실시간 피드백을 제공하는 것이 포함될 수 있습니다.

결론

약 50 줄의 코드로 완전히 기능적인 이메일 가입 양식을 만들었습니다. HTML, CSS, JavaScript 및 NetLify의 서버리스 기능의 조합으로 인해 JavaScript 가용성에 관계없이 작동하는 스팸 방지 사용자 친화적 형태가 발생했습니다.

위 내용은 NetLify Forms 및 NetLify 기능을 사용하여 이메일 가입 위젯을 구축합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!