Pengendalian bentuk untuk laman web jamStack menggunakan pekerja Cloudflare

Tutorial ini menunjukkan membina perkhidmatan pengendalian bentuk untuk laman web Jamstack atau aplikasi tunggal halaman (SPA) menggunakan pekerja CloudFlare, platform tanpa pelayan yang menawarkan kelajuan dan keberkesanan kos. Jamstack's Build-Time HTML Rendering dan EDGE Server Deployment menyediakan masa pemuatan cepat, tetapi mengendalikan tugas-tugas sisi pelayan seperti pemprosesan borang memerlukan pendekatan yang berbeza.

Penyelesaian sisi pelayan tradisional seperti PHP memudahkan pengendalian bentuk, tetapi manfaat jamStack dari fungsi tanpa pelayan. Tutorial ini menggunakan pekerja Cloudflare untuk membuat mikroservis untuk pemprosesan borang, menawarkan kelebihan kos ke atas pelayan yang berdedikasi dan membolehkan aliran kerja kompleks dengan mengintegrasikan dengan perkhidmatan seperti Airtable.

Kelebihan utama:

memanfaatkan pekerja Cloudflare untuk pengendalian bentuk tanpa pelayan di laman web jamStack meningkatkan prestasi dan mengurangkan kos.

Menangani batasan jamStack untuk ciri -ciri dinamik seperti bentuk melalui seni bina microservices tanpa pelayan.
meneroka penggunaan perkhidmatan pihak ketiga yang sedia ada (FormSpree, Netlify Forms, dll.) Untuk integrasi pesat.
Membina pengendali bentuk tersuai dengan pekerja Cloudflare untuk kos yang lebih rendah setiap penyerahan dan keselamatan yang disesuaikan.
menggunakan rangkaian kelebihan Cloudflare untuk latensi yang dikurangkan.
Pengendalian penyerahan borang penyemak imbas langsung dengan JavaScript, termasuk Pengurusan Permintaan Preflight Cors.
Menggunakan dan menguji pada domain tersuai untuk pemantauan prestasi masa nyata.
Pengendali bentuk pihak ketiga:

Perkhidmatan seperti FormSpree, GetForm, FormData, dan Netlify menawarkan ciri-ciri seperti pemberitahuan e-mel, penapisan spam, integrasi pihak ketiga (Zapier), papan pemuka, muat naik fail, dan eksport CSV. Walaupun mudah dan sering menawarkan peringkat percuma, mereka boleh menjadi mahal untuk kegunaan volum tinggi.

Membina Perkhidmatan Anda Sendiri (Manfaat):

Membina penyelesaian tersuai menggunakan pekerja Cloudflare menawarkan:

kos yang lebih rendah setiap penyerahan.

Dasar keselamatan yang disesuaikan.

• integrasi perkhidmatan tanpa had.
• Latihan yang dikurangkan disebabkan oleh pengkomputeran kelebihan.
• fleksibiliti untuk menambah ciri yang tidak tersedia dalam perkhidmatan pihak ketiga.
Perkhidmatan e-mel seperti SendGrid dan Mailgun menawarkan peringkat percuma, tetapi untuk pangkalan data langsung atau integrasi aplikasi, kos per juta penyerahan boleh jauh lebih rendah daripada pengendali bentuk pihak ketiga.
Pekerja Cloudflare:

Pekerja Cloudflare, platform tanpa pelayan, mengelakkan masalah "permulaan sejuk" yang biasa berlaku dalam tawaran tanpa pelayan yang lain, menyediakan masa tindak balas yang hampir-hampir disebabkan oleh arsitektur pengkomputeran V8 dan kelebihannya.

Gambaran keseluruhan projek:

Tutorial ini membimbing anda melalui membina aplikasi pekerja Cloudflare dan mengintegrasikannya dengan spa React Pra-dibina (pautan kod sumber disediakan). Tutorial memberi tumpuan kepada backend pekerja, bukan pembangunan UI.

Prasyarat:

• node.js
• Visual Studio Code
• vs code rest extension client

Persediaan Akaun:

1. Domain Custom (disyorkan): Domain tersuai memudahkan penggunaan, menyediakan akses log masa nyata, dan meningkatkan kebolehlaksanaan e-mel. Fastcomet dicadangkan untuk pendaftaran domain dan hosting e -mel.
Persediaan Mailgun Mailgun:
2. Buat akaun Mailgun (pelan percuma tersedia), sahkannya, perhatikan kunci API dan URL asas anda, dan tambahkan alamat e -mel penerima yang diberi kuasa. Ujian e -mel menghantar menggunakan perintah curl yang disediakan. Domain tersuai disyorkan untuk had penghantaran yang lebih tinggi dan penghantaran peti masuk yang lebih baik.
Persediaan Pekerja Cloudflare:
3. Daftar untuk akaun pekerja CloudFlare, pasang Wrangler CLI (), log masuk (), dan sahkan pemasangan (npm install -g @cloudflare/wrangler). Jika log masuk gagal, rujuk langkah penyelesaian masalah dalam tutorial asal. Jika menggunakan domain tersuai, tambahkannya ke CloudFlare, tukar Nameservers, dan muat turun/konfigurasi wrangler login. wrangler --version cloudflared

Pembangunan Projek:

1. menghasilkan projek: Gunakan wrangler generate cloudflare-form-service, cd cloudflare-form-service, dan npm install. Kemas kini wrangler.toml dengan ID akaun anda dan sediakan skrip dalam package.json untuk pembangunan dan pemformatan.
2. Mengendalikan permintaan pos: Ubah suai index.js untuk mengendalikan permintaan pos, baca badan permintaan (JSON atau data borang), dan mengembalikan respons yang sesuai (termasuk pengendalian ralat).
3. Pengesahan skema: Pasang @cfworker/json-schema (npm install @cfworker/json-schema), tukar wrangler.toml ke "type = "webpack", buat validator.js dengan skema JSON dan logik pengesahan, dan mengintegrasikannya ke index.js .
4. Integrasi e -mel: create email-service.js, email-text-template.js, dan email-html-template.js. Sediakan pembolehubah persekitaran (Kunci API Mailgun, URL Pangkalan API Mailgun, dari alamat e -mel, ke alamat e -mel) menggunakan wrangler secret put atau papan pemuka CloudFlare. Mengintegrasikan email-service.js ke index.js.
5. Menambah CORS: Tambah corsHeaders ke index.js dan mengendalikan permintaan pilihan preflight untuk memastikan keserasian dengan model keselamatan penyemak imbas.

Penyebaran Projek:

1. Menyebarkan Perkhidmatan Pekerja Pengendalian Borang: Gunakan wrangler publish untuk digunakan ke Subdomain Workers.Dev Cloudflare. Uji dengan permintaan HTTP yang dikemas kini dalam test.http.
2. Penyebaran Domain Custom (Pilihan): Sediakan persekitaran pementasan dan pengeluaran dalam wrangler.toml, buat rekod CNAME dalam tetapan DNS CloudFlare anda, dan diterbitkan ke Pengeluaran Menggunakan wrangler publish -e production. Muat naik semula pembolehubah persekitaran menggunakan wrangler secret put. Uji dengan permintaan ke domain tersuai anda.
3. menggunakan antara muka pengguna borang: Gunakan spa React Spa yang disediakan, konfigurasikan fail .env dengan url aplikasi pekerja anda, dan gunakan ke platform seperti halaman Cloudflare, Netlify, atau Vercel.

Ringkasan dan Soalan Lazim:

Tutorial disimpulkan dengan ringkasan dan seksyen FAQ yang komprehensif yang meliputi jamStack, pekerja Cloudflare, kaedah pengendalian bentuk alternatif, pertimbangan kos, dan batasan. Soalan Lazim juga meneroka ciri dan keupayaan pekerja Cloudflare yang lain. Imej yang disediakan kekal dalam format dan lokasi asalnya.

Atas ialah kandungan terperinci Pengendalian bentuk untuk laman web jamStack menggunakan pekerja Cloudflare. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!