ผลงานทั้งหมด
แพลตฟอร์มเปลี่ยนข้อความเป็นเว็บไซต์

GreenLinks

ตัวอย่างงานวิศวกรรมผลิตภัณฑ์ครบวงจร ตั้งแต่การสร้างและแก้ไข ไปจนถึงการเผยแพร่ การวิเคราะห์ และโดเมนส่วนตัว

ผลงานผลิตภัณฑ์

GreenLinks ถูกสร้างขึ้นด้วยเป้าหมายเดียว คือทำให้การสร้างเว็บไซต์รู้สึกง่าย ทุกการโต้ตอบตั้งแต่คำอธิบายแรก การแก้ไข ไปจนถึงการเผยแพร่ได้รับการออกแบบอย่างใส่ใจ พร้อมค่าเริ่มต้นที่เหมาะสม การควบคุมที่ตอบสนองรวดเร็ว และหน้าเว็บที่โหลดไว

ความสามารถ

ผลิตภัณฑ์ที่ซับซ้อนแต่ใช้งานได้อย่างเป็นหนึ่งเดียว

01

เรียบง่ายโดยการออกแบบ

เส้นทางตั้งแต่คำอธิบายแรกจนเป็นเว็บไซต์สำเร็จยังคงชัดเจน ด้วยเครื่องมือที่ตรงจุดและค่าเริ่มต้นที่เหมาะสม

02

ใส่ใจในทุกฟีเจอร์

การแก้ไข สื่อ การเผยแพร่ การวิเคราะห์ การชำระเงิน และโดเมนส่วนตัวถูกออกแบบให้สอดคล้องกัน ไม่รู้สึกเหมือนส่วนที่นำมาต่อเพิ่ม

03

รวดเร็วทุกขั้นตอน

การแก้ไขที่ตอบสนองรวดเร็ว การส่งมอบที่มีประสิทธิภาพ และหน้าเว็บที่แคชบน Edge ช่วยให้ผู้สร้างและผู้ชมใช้งานได้อย่างรวดเร็ว

ภาพรวมทางเทคนิค

แพลตฟอร์มทำงานอย่างไร

ผลิตภัณฑ์ Next.js, backend API และการส่งมอบเว็บไซต์ที่เผยแพร่ทำงานเป็น Cloudflare Workers แยกจากกัน

เซสชัน WebSocket เชื่อมตัวแก้ไขกับ Durable Objects สองตัว โดย WebsiteGeneration สตรีมทั้งหน้า ส่วน SectionUpdate ดูแลการแก้ไขเฉพาะจุด

เกตเวย์แบบหลายผู้ให้บริการสตรีมผลลัพธ์โมเดล โดย R2 เก็บ HTML, Hyperdrive และ PostgreSQL จัดการเมทาดาทา และ site worker ส่งมอบ custom domain จาก edge

  • HTTPS API
  • WebSocket
  • Internal data
01ประสบการณ์ผลิตภัณฑ์
07เกตเวย์โมเดล
  • การเลือกผู้ให้บริการ
  • Streaming API
04เนื้อหาที่สร้าง
  • R2
  • HTML ที่สร้างแล้ว
02ประสบการณ์เว็บไซต์
  • Site worker
  • แคชที่ Edge
  • ซับโดเมนที่เผยแพร่
ระบบวิศวกรรม

การสร้างแบบสตรีม

HTML ที่สร้างถูกส่งถึงตัวแก้ไขทันที ขณะที่การประมวลผลและการบันทึกทำงานต่อในเบื้องหลัง

  1. Streaming API
  2. WebSocket
  3. R2

การแก้ไขเฉพาะส่วนแบบสด

การเปลี่ยนแปลงเฉพาะจุดใช้เซสชันแบบมีสถานะของตัวเอง โดยไม่ต้องสร้างทั้งหน้าใหม่

  1. ตัวแก้ไข
  2. WebSocket
  3. SectionUpdate DO

ไปป์ไลน์สื่อ

Cloudflare Images และ Cloudflare Stream รองรับการอัปโหลดโดยตรง พร้อม ThumbHash placeholder และการตรวจสอบด้วย CalmLens ผ่าน Queue

  1. Cloudflare Images
  2. Cloudflare Stream
  3. ThumbHash
  4. CalmLens

ระบบป้องกันสำหรับโปรดักชัน

Cloudflare Turnstile, rate limit ต่อผู้ใช้, Cloudflare Queues, งานเบื้องหลัง และ Sentry ปกป้องเส้นทางสำคัญ

  1. Cloudflare Turnstile
  2. Rate limiting
  3. Cloudflare Queues
  4. Sentry

สถาปัตยกรรมหลาย Worker

ผลิตภัณฑ์ Next.js, backend API และ site worker สำหรับ custom domain แยก deploy และสเกลจากกัน

  1. Next.js
  2. Cloudflare Workers
  3. Custom domains
วิศวกรรม

เทคโนโลยีที่เลือกให้เหมาะกับผลิตภัณฑ์