6 שלב האינטגרציה

Full-Stack חינמי — חיווט הכל ביחד, והחלטת Pay-or-Not

הלומד יחבר full-stack SaaS שלם וחי על ה-free tier בלבד (Worker + Static Assets + D1 + R2 + KV + Workers AI + RAG + Turnstile + Access), ויקבל החלטת pay-or-not מבוססת מספרים — לכל primitive: מה המגבלה שתיפול ראשונה, מתי לשדרג ל-$5, וכמה זה יעלה ב-1,000 משתמשים

כול למערכת SaaS (תוכנה כשירות) שלמה וחינמית לחלוטין. בפרק הזה נלמד לחווק את כל שירותי הענן של Cloudflare לפלט

מה יהיה לך ביד בסוף הפרק
מטרות למידה
מה צריך לפני שמתחילים
חוט הפרויקט

הפרק הקודם: בפרק הקודם הגדרנו את חומת האבטח והאימות באמצעות Turnstile ו-Zero Trust וייצרנו לוגים ראשוניים עם Analytics Engine.

הפרק הזה: הלומד יחבר full-stack SaaS שלם וחי על ה-free tier בלבד (Worker + Static Assets + D1 + R2 + KV + Workers AI + RAG + Turnstile + Access), ויקבל החלטת pay-or-not מבוססת מספרים — לכל primitive: מה המגבלה שתיפול ראשונה, מתי לשדרג ל-$5, וכמה זה יעלה ב-1,000 משתמשים

הפרק הבא: מכאן הסטודנט ממשיך לאפליקציה מלאה באוויר, ויכול לקבל את ההחלטה האם לשדרג ל-Workers Paid לפי התרחיש הפיננסי המדויק.

מילון מונחים — פרק 6
מונחהסבר
full-stack on free tierפיתוח מלא של צד שרת וצד לקוח על תשתית חינמית ללא שרתים ייעודיים.
binding compositionשילוב מספר משאבים (D1, KV, R2) תחת הגדרת ה-Worker הבודד בקובץ קונפיגורציה אחד.
first-limit-to-fallניתוח המזהה את המגבלה הספציפית שתגרום לקריסת ה-Free Tier של האפליקציה ראשונה.
Neuronsיחידת המדידה והתמחור של קריאות ה-AI ב-Cloudflare (מגבלה של 10k ביום ב-Free).
Turnstileחלופת ה-CAPTCHA החינמית והפרטית של Cloudflare שאינה דורשת אינטראקציה מעיקה מהמשתמש.
Analytics Engineשירות לוגים ואיסוף מטריקות מבוסס SQL של Cloudflare המאפשר ניתוח ביצועים ב-$0.
wrangler secret putכלי שורת הפקודה להזנת משתני סביבה מוצפנים ללא חשיפתם בגיט.
בינוני5 דקותחינםarchitecture

ארכיטקטורת ה-Free Full-Stack: מבנה הצינורות של אפליקציית Vibe מנצחת

בעולם פיתוח התוכנה המודרני, פיתוח יישום מלא בקצה (Full-Stack on Free Tier) — גישה המאפשרת להריץ גם את ממשק המשתמש (Client) וגם את קוד השרת ובסיס הנתונים (Server & DB) תחת מסלולים חינמיים לחלוטין של ספקי ענן — הפך לנשק הסודי של ה-Vibe Coders. במקום להסתבך עם הגדרות שרתים מורכבות, ניהול קונטיינרים (Containers) כבדים או חיווט ידני מתיש בין ספקים שונים (שרת ב-Vercel, בסיס נתונים ב-Supabase ואחסון קבצים ב-AWS), ארכיטקטורת הצינורות המודרנית של Cloudflare מרכזת את כל משאבי היישום תחת קורת גג אחת, ללא עלות ועם אפס "זמן עלייה קרה" (Cold Start). מודל זה מבוסס על מנוע בידוד V8 (V8 Isolate — טכנולוגיית הרצת קוד קלילה במיוחד של דפדפנים, המאפשרת להריץ פונקציות שרת ללא השהיית הפעלה ראשונית ובשבריר מהזיכרון שדורש שרת מסורתי).

החל משנת 2026, תבנית מוכנה לפיתוח מוצר (Free Full-Stack SaaS Starter) נשענת על שרתים חסרי שרת (Serverless Compute) המכונים Cloudflare Workers, בשילוב הדור החדש של Workers Static Assets (מנגנון מובנה לאירוח קבצים סטטיים ישירות מה-CDN). המשמעות היא שהאתר הסטטי שלכם (React, Vue או HTML פשוט) וכל נתיבי ה-API שלכם רצים יחד על אותה פלטפורמה קלה. החיבור לבסיס הנתונים נעשה באמצעות Cloudflare D1, בסיס נתונים יחסי מסוג SQLite המבוזר בקצה הרשת, בעוד שקבצים כבדים או תמונות נשמרים ב-Cloudflare R2, שירות אחסון קבצים (Object Storage) תואם S3 המצטיין באפס דמי תעבורה יוצאת (Egress Fees — העמלות שחברות הענן הגדולות גובות מכם כאשר קבצים או מידע יוצאים משרתי האחסון שלהן אל המשתמשים). ארכיטקטורה זו מבטיחה שהאפליקציה שלכם תישאר מהירה בצורה קיצונית ותעלה לכם בדיוק 0 שקלים כל עוד אתם בטווח מגבלות החינם.

החיווט המעשי: מבנה הצינורות בתוך קובץ ה-Wrangler

כדי לחבר את כל הרכיבים הללו יחד, אנו משתמשים ב-ממשק שורת פקודה Wrangler (Wrangler CLI — כלי הפיתוח הרשמי שבאמצעותו מנהלים, בודקים ומפיצים פרויקטים לפלטפורמה של Cloudflare). כל החיווטים והקשרים בין השרת, התיקיות הסטטיות, בסיס הנתונים ורכיבי הבינה המלאכותית מוגדרים בקובץ הגדרות יחיד בשם wrangler.toml. בקובץ זה אנו מייצרים "bindings" (קישורים ישירים) המאפשרים לקוד השרת לגשת למשאבים השונים כמשתנים גלובליים פשוטים ללא צורך בהגדרת מחרוזות חיבור (Connection Strings) מורכבות או מפתחות אבטחה המועברים ברשת.

שימו לב לשינוי המהותי של שנת 2026: בעוד שבעבר הייתם צריכים לנהל פרויקטים נפרדים ב-Cloudflare Pages וב-Cloudflare Workers, כיום מומלץ להשתמש ב-Workers Static Assets. הגדרת תיקיית הנכסים הסטטיים מתבצעת ישירות תחת בלוק ה-[assets] בקובץ הקונפיגורציה. כאשר תריצו פקודת פריסה, ה-CLI יעלה את התיקייה הסטטית לקצה הרשת, והקוד של ה-Worker שלכם ישמש כשרת ה-API ומנוע הניתוב הדינמי שלכם תחת אותו דומיין בדיוק, ללא שום בעיות של חלוקת משאבים בין מקורות שונים (CORS).

מתי לשלם ומתי להישאר בחינם? מטריצת ההחלטה (Pay-or-Not)

אחת הטעויות הנפוצות של מפתחי Vibe היא חוסר הבנה של מגבלות מסלול החינם, דבר המוביל לקריסת האפליקציה ברגע שמשתמשים ראשונים מתחילים להזרים מידע. כדי לקבל החלטה מושכלת מתי לשדרג למסלול בתשלום (שעלותו מתחילה ב-5$ בלבד לחודש ומעניקה נפחים עצומים), עליכם להכיר את צווארי הבקבוק האמיתיים של המערכת. הטבלה הבאה מרכזת את המגבלות הקריטיות ומתי הן מחייבות מעבר למסלול Paid:

רכיב במערכת מגבלת מסלול החינם (Free Tier) טריגר שדרוג נפוץ (Upgrade Trigger) מה מקבלים במסלול Paid ($5/mo)
Workers (Compute) 100,000 בקשות ביום / 10ms זמן מעבד (CPU) בלבד לבקשה. צורך בעיבוד כבד (כמו פענוח קבצי JSON גדולים או ריצת ביטויים רגולריים מורכבים המותחים את ה-CPU מעבר ל-10 מילי-שניות). חשוב: זמן המתנה ל-fetch חיצוני לא נספר כ-CPU! 10 מיליון בקשות בחודש / עד 30 שניות זמן CPU לבקשה כברירת מחדל.
D1 Database (SQLite) 5 מיליון שורות קריאה ביום / 100,000 שורות כתיבה ביום / נפח מקסימלי 5GB. אפליקציות עתירות כתיבה (כמו מעקב לוגים או צ'אט חי) שעוברות את רף ה-100 אלף כתיבות ביום, או שאילתות לא יעילות שמבצעות סריקת טבלה מלאה (Full Table Scan) ומרוקנות את מכסת הקריאה. 25 מיליארד שורות קריאה בחודש / 50 מיליון שורות כתיבה בחודש / 5GB כלולים (וניתן להרחיב בתוספת תשלום קטנה).
R2 Object Storage 10GB שטח אחסון / מיליון פעולות כתיבה (Class A) / 10 מיליון פעולות קריאה (Class B) בחודש. חריגה מנפח 10GB של קבצי מדיה של משתמשים. (העברת הנתונים עצמה תמיד נשארת בחינם, ללא דמי Egress). שלם לפי שימוש מעבר לחינם: $0.015 לכל GB נוסף לחודש, תעריפים מזעריים לפעולות קריאה/כתיבה נוספות.
Workers AI (Inference) 10,000 "ניורונים" (Neurons) ביום עבור מודלים מארחים (כמו Llama 3.1 8B). שימוש כבד במודלים של שפה או ייצור תמונות. שימו לב: שימוש ב-AI Gateway לניתוב ל-OpenAI אינו צורך ניורונים ומבוסס על ה-API key שלכם שם. חיוב מדויק של $0.011 לכל 1,000 ניורונים מעבר למכסה היומית החינמית.
טעות נפוצה: שכחה של קובץ .assetsignore בעת שימוש ב-Workers Static Assets

למה זה מפתה: אנחנו רגילים שפלטפורמות כמו Vercel או Netlify מזהות אוטומטית את קובץ ה-package.json שלנו ומעלות רק את תוצרי הבנייה (כמו תיקיית dist או build) תוך התעלמות אוטומטית מתיקיית הקידוד הכבדה node_modules.

למה זה טעות: בניגוד לפלטפורמות אלו, הפיצ'ר החדש של Workers Static Assets מעלה את כל מה שנמצא בתיקייה שהגדרתם ב-wrangler.toml ללא פילטרים אוטומטיים. אם לא תגדירו קובץ התעלמות, Wrangler ינסה להעלות עשרות אלפי קבצים קטנים מתוך node_modules, מה שיגרום לכם לעבור מיידית את מגבלת 20,000 הקבצים במסלול החינמי ולזמני פריסה (Deployment) ארוכים ומתישים.

מה לעשות במקום: צרו תמיד קובץ בשם .assetsignore בשורש הפרויקט שלכם, והוסיפו אליו שורות ברורות שמתעלמות מקבצי הפיתוח ומתיקיית המקור הלא-מהודרת, בדומה לקובץ .gitignore:

node_modules/
.git/
.DS_Store
src/
wrangler.toml
הקמת תבנית Full-Stack חינמית מקומית 12 דקות

בצעד זה נקים פרויקט מלא באמצעות כלי הפיגומים החדש של Cloudflare, נחבר אותו לבסיס נתונים D1 מקומי, ונשתמש ב-Wrangler Local Explorer (ממשק הדפדפן החדש משנת 2026) כדי לבחון את המידע שלנו.

  1. פתחו את מסוף הפקודות (Terminal) והריצו את פקודת ההקמה הבאה ליצירת פרויקט חדש המבוסס על שלד קוד נקי של JavaScript/TypeScript:
    npm create cloudflare@latest vibe-fullstack -- --template=vanilla
    במהלך הריצה, אינכם חייבים להתחבר לחשבון Cloudflare שלכם עדיין (בחרו No בשאלת ה-Deploy). התהליך ייצור תיקייה חדשה בשם vibe-fullstack.
  2. היכנסו לתיקייה שנוצרה ופתחו את קובץ ה-wrangler.toml שלכם. החליפו את תוכנו בהגדרות הבאות, המגדירות את אירוח הקבצים הסטטיים מתוך תיקיית public ומחברות בסיס נתונים מקומי בשם DB:
    name = "vibe-fullstack"
    main = "src/index.js"
    compatibility_date = "2026-03-19"
    
    [assets]
    directory = "./public"
    binding = "ASSETS"
    
    [[d1_databases]]
    binding = "DB"
    database_name = "vibe-db"
    database_id = "local-only-db-id"
  3. צרו תיקייה בשם public ובתוכה קובץ index.html פשוט שישמש כממשק המשתמש שלנו:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Vibe SaaS Starter</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>ברוכים הבאים לאפליקציית ה-Vibe שלכם!</h1>
        <button onclick="fetchData()">משוך נתונים מהשרת</button>
        <pre id="output"></pre>
    
        <script>
            async function fetchData() {
                const res = await fetch('/api/todos');
                const data = await res.json();
                document.getElementById('output').innerText = JSON.stringify(data, null, 2);
            }
        </script>
    </body>
    </html>
  4. כתבו את קוד השרת בקובץ src/index.js. קוד זה יאזין לנתיב ה-API ויבצע שאילתה מבסיס הנתונים הקיים ב-binding שלנו:
    export default {
      async fetch(request, env, ctx) {
        const url = new URL(request.url);
        
        // ניתוב נתיב ה-API שלנו
        if (url.pathname === "/api/todos") {
          try {
            const { results } = await env.DB.prepare(
              "SELECT * FROM todos"
            ).all();
            return new Response(JSON.stringify(results), {
              headers: { "Content-Type": "application/json" }
            });
          } catch (err) {
            return new Response(JSON.stringify({ error: err.message }), {
              status: 500,
              headers: { "Content-Type": "application/json" }
            });
          }
        }
        
        // החזרת קבצים סטטיים כברירת מחדל
        return env.ASSETS.fetch(request);
      }
    };
  5. ניצור קובץ הגדרת טבלה ראשונית בשם schema.sql בשורש הפרויקט כדי לאתחל את בסיס הנתונים:
    DROP TABLE IF EXISTS todos;
    CREATE TABLE todos (id INTEGER PRIMARY KEY, title TEXT, completed INTEGER);
    INSERT INTO todos (title, completed) VALUES ('להקים אפליקציה חינמית', 1);
    INSERT INTO todos (title, completed) VALUES ('להפוך ל-Vibe Coder מקצוען', 0);
  6. כעת, הריצו את פקודת ההרצה המקומית המדמה את בסיס הנתונים שלכם על המחשב המקומי (באמצעות Miniflare המובנה):
    npx wrangler d1 execute DB --local --file=./schema.sql
    הפלט הצפוי יראה אישור על הרצת קובץ ה-SQL ויצירת בסיס נתונים מקומי זמני בקובץ מוסתר במחשב שלכם.
  7. הריצו את השרת המקומי עם ממשק ה-Local Explorer פתוח:
    npx wrangler dev

פלט נראה לעין שתסיים איתו: הדפדפן שלכם יפתח בכתובת http://localhost:8787. לחיצה על הכפתור "משוך נתונים מהשרת" תבצע קריאת API לקוד ה-Worker שלכם, שימשוך את שתי השורות שהזנתם לתוך בסיס הנתונים ה-D1 המקומי ויציג אותן על המסך בפורמט JSON נקי. במקביל, הטרמינל יציג קישור ל-Wrangler Local Explorer המאפשר לכם לצפות בטבלאות בתוך הדפדפן בזמן אמת.

בינוני5 דקותחינםconfiguration

קובץ wrangler.toml אחד למשול בכולם: קומפוזיציית bindings מלאה

כשאתם בונים אפליקציית Full-Stack מסורתית, שלב החיווט של חלקי המערכת השונים הוא לעיתים קרובות כאב ראש לא קטן. אתם צריכים לנהל מפתחות API, להגדיר משתני סביבה בקובצי .env מקומיים, לדאוג לאבטחה שלהם בשרת, ולכתוב קוד אתחול (Boilerplate) ארוך ומייגע רק כדי להתחבר למסד הנתונים או לשירות ה-AI שלכם. בתוך האקוסיסטם של Cloudflare, הארכיטקטורה הזו מפנה את מקומה לטובת קונספט מהפכני שנקרא קומפוזיציית קישורים (Binding Composition). קישור (Binding) הוא הדרך שבה Cloudflare מזריקה משאבי תשתית – כמו מסדי נתונים, שטחי אחסון, הגדרות, ואפילו מודלי בינה מלאכותית – ישירות לתוך הקוד שלכם. במקום לפתוח חיבורי רשת ידניים או לנהל סיסמאות, המשאבים הללו פשוט מופיעים כאובייקטים חיים על אובייקט ה-env של ה-Worker שלכם בזמן הריצה. קובץ ה-wrangler.toml הוא המקום היחיד שבו מתרחש הקסם הזה. הוא משמש כחוזה הרשמי בין הקוד שלכם לבין התשתיות הפיזיות שרצות ב-300+ ערים ברחבי העולם על גבי מנועי הרצה מבודדים (V8 Isolates) – טכנולוגיה קלת-משקל המריצה קוד במהירות ובלי זמני עליה קרים (Cold Starts). בשנת 2026, פלטפורמת ה-Workers עברה שדרוג משמעותי: היא מציעה כעת תאימות מלאה לנכסים סטטיים (Workers Static Assets), המאפשרת לארח את כל ה-Frontend (קובצי HTML, CSS ו-JS) לצד ה-API באותו פרויקט בדיוק, תוך החלפת פלטפורמת Pages הישנה. המשמעות עבורכם כ-Vibe Coders היא דרמטית: קובץ wrangler.toml אחד ויחיד מגדיר את ה-Frontend, ה-Backend, מסד הנתונים SQLite שלכם (D1), זיכרון המטמון המהיר (KV), ואפילו את הגישה למודלי שפה גדולים (LLMs). הכל מוגדר במקום אחד, מאובטח כברירת מחדל, ומסובסד לחלוטין במסגרת השכבה החינמית הנדיבה של Cloudflare.

המבנה של קובץ wrangler.toml מאוחד

בואו נראה כיצד נראה המבנה הכללי של קובץ הקונפיגורציה שמאחד את כל חלקי הפאזל. הקובץ מגדיר את נקודת הכניסה של האפליקציה, את תיקיית הנכסים הסטטיים של ממשק המשתמש, ואת כל הקישורים לשירותי הנתונים וה-AI.
name = "vibe-fullstack-app"
main = "src/index.ts"
compatibility_date = "2026-03-19"

# 1. Frontend: הגדרת נכסים סטטיים (Static Assets)
[assets]
directory = "./public"
binding = "ASSETS"

# 2. Database: קישור למסד הנתונים SQLite (D1)
[[d1_databases]]
binding = "DB"
database_name = "vibe-production-db"
database_id = "YOUR_D1_DATABASE_ID_GOES_HERE"

# 3. Cache & Secrets: קישור ל-Workers KV (Key-Value)
[[kv_namespaces]]
binding = "KV_STORE"
id = "YOUR_KV_NAMESPACE_ID_GOES_HERE"

# 4. Generative AI: קישור מובנה ל-Workers AI ללא מפתחות API
[ai]
binding = "AI"
בקונפיגורציה הזו, הגדרנו ארבעה סוגי קישורים שונים. ה-[assets] מורה ל-Wrangler (כלי הפיתוח והפריסה הרשמי של Cloudflare) להעלות את כל הקבצים שבתיקיית public ישירות ל-CDN הגלובלי. קבצים אלו יוגשו בחינם ובאופן בלתי מוגבל. ה-[[d1_databases]] מקשר בין מסד הנתונים SQL שלנו לקוד תחת השם DB. ה-[[kv_namespaces]] יוצר גישה לזיכרון ה-Key-Value המהיר תחת השם KV_STORE, והבלוק [ai] מאפשר לנו להריץ מודלי שפה מקומיים כמו Llama 3.1 ישירות על גבי המעבדים הגרפיים (GPUs) של Cloudflare בקצה, תחת הקישור AI.

איך צורכים את הקישורים האלה בקוד?

היופי בקומפוזיציית הקישורים הוא המעבר החלק לקוד. נשתמש ב-Hono, מסגרת עבודה (Framework) קלת-משקל ומהירה במיוחד המותאמת אישית לסביבות קצה (Edge), כדי לקבל את הטיפוסים החזקים (TypeScript Types) של הקישורים שלנו וליהנות מהשלמה אוטומטית של קוד בזמן הפיתוח. בואו נבחן דוגמה מעשית של נתיב (API Route) המשלב את כל המשאבים יחד:
import { Hono } from 'hono';

// הגדרת הטיפוסים של הקישורים שלנו לצורך השלמה אוטומטית (IntelliSense)
type Env = {
  DB: D1Database;
  KV_STORE: KVNamespace;
  AI: Ai;
};

const app = new Hono<{ Bindings: Env }>();

app.post('/api/summarize', async (c) => {
  // 1. קריאה מתוך KV לבדיקה האם התכונה מאופשרת במערכת
  const isAiEnabled = await c.env.KV_STORE.get('feature_ai_enabled');
  if (isAiEnabled !== 'true') {
    return c.json({ error: 'AI service temporarily disabled' }, 503);
  }

  // 2. קריאה ממסד הנתונים D1 (SQLite) לשליפת המאמר האחרון
  const { results } = await c.env.DB.prepare(
    "SELECT id, title, content FROM articles ORDER BY created_at DESC LIMIT 1"
  ).all();

  const latestArticle = results[0];
  if (!latestArticle) {
    return c.json({ error: 'No articles found to summarize' }, 404);
  }

  // 3. שימוש ב-Workers AI להפקת סיכום מהיר באמצעות Llama 3.1 8B
  const aiOutput = await c.env.AI.run('@cf/meta/llama-3.1-8b-instruct', {
    prompt: `Summarize the following article in two sentences: ${latestArticle.content}`
  });

  return c.json({
    article_id: latestArticle.id,
    title: latestArticle.title,
    summary: aiOutput
  });
});

export default app;
שימו לב לקלות הביצוע: אין כאן אף קריאת fetch() חיצונית עם כותרי אבטחה (Headers), אין מפתחות API של OpenAI או Supabase, ואין צורך באתחול דרייברים מורכבים של מסדי נתונים. הכל פשוט זמין דרך c.env. הדבר לא רק מקל על כתיבת הקוד (מושלם עבור פיתוח מונחה AI שבו קל ל-LLM לעבוד עם ממשקים נקיים כאלו), אלא גם מבטיח ביצועים אולטרה-מהירים מאחר וכל התקשורת בין ה-Worker ל-D1, KV ו-AI מתבצעת בתוך הרשת הפנימית המאובטחת של Cloudflare ללא מעבר ברשת האינטרנט הציבורית.
משימה מהירה: חיווט ראשון והרצה מקומית 10 דקות

כדי להרגיש את כוחה של קומפוזיציית הקישורים, נקים כעת פרויקט מקומי מינימלי ונריץ אותו בסביבת הפיתוח המקומית המדמה את שירותי הענן של Cloudflare באופן מלא בעזרת Miniflare.

  1. פתחו את הטרמינל בתיקייה חדשה והריצו את הפקודה להתקנת Wrangler (אם אינו מותקן):
    npm install -g wrangler
  2. צרו קובץ חדש בשם wrangler.toml והדביקו בתוכו את התוכן הבא (נשתמש בקישורי D1 ו-KV מקומיים בלבד, ללא צורך בהקמתם בענן בשלב זה):
    name = "vibe-compose-demo"
    main = "index.js"
    compatibility_date = "2026-03-19"
    
    [[kv_namespaces]]
    binding = "DEMO_KV"
    id = "fake-local-kv-id"
    
    [[d1_databases]]
    binding = "DEMO_DB"
    database_name = "demo-db"
    database_id = "fake-local-d1-id"
  3. צרו קובץ בשם index.js והדביקו בו את קוד ה-Worker הפשוט הבא:
    export default {
      async fetch(request, env) {
        // כתיבה וקריאה מ-KV מקומי
        await env.DEMO_KV.put("last_access", new Date().toISOString());
        const lastAccess = await env.DEMO_KV.get("last_access");
    
        // יצירת טבלה ושאילתה ב-D1 מקומי (SQLite)
        await env.DEMO_DB.exec(`
          CREATE TABLE IF NOT EXISTS logs (id INTEGER PRIMARY KEY, message TEXT);
        `);
        await env.DEMO_DB.prepare("INSERT INTO logs (message) VALUES (?)").bind("Hello Vibe Coders!").run();
        
        const { results } = await env.DEMO_DB.prepare("SELECT * FROM logs").all();
    
        return new Response(JSON.stringify({
          message: "Bindings work perfectly!",
          kv_last_access: lastAccess,
          db_records: results
        }), {
          headers: { "content-type": "application/json" }
        });
      }
    };
  4. הריצו את פקודת הפיתוח המקומית בטרמינל:
    wrangler dev
    הטרמינל יציג לכם כתובת מקומית (למשל, http://localhost:8787). פתחו אותה בדפדפן.

פלט נראה לעין שתסיים איתו: בדפדפן יתקבל קובץ JSON המציג את תאריך הגישה שנשמר בתוך ה-KV המקומי שלכם, לצד רשומות שהוכנסו ונשלפו בהצלחה ממסד הנתונים D1 המקומי שנוצר אוטומטית על המחשב שלכם, ללא צורך בהגדרת שרתי SQL חיצוניים.

שליטה במגבלות החינמיות של הקישורים

כאשר משתמשים בקומפוזיציה של מספר שירותים, חשוב מאוד להבין את נקודות התורפה של המגבלות החינמיות (Free Tier quotas) של כל קישור כדי להימנע מהפתעות או מהשבתה פתאומית של האפליקציה:
שם הקישור מכסה יומית חינמית (Free Tier) מתי תצטרכו לשלם? (Overage / Pay-or-Not)
Workers Compute 100,000 בקשות ביום, מקסימום 10ms זמן מעבד (CPU time) לריצה. מעבר לתוכנית Workers Paid בעלות של 5$ לחודש. נדרש אם תרוצו מעל 100k בקשות ביום או אם תבצעו פעולות כבדות של עיבוד נתונים או פיענוח JSON מסיבי שיחרגו מ-10ms זמן מעבד אמיתי.
Workers KV 100,000 פעולות קריאה ביום, 1,000 פעולות כתיבה ביום, 1GB נפח אחסון. מגבלת 1,000 פעולות הכתיבה ביום היא החומה הראשונה שנתקלים בה. אם האפליקציה שלכם כותבת נתוני סשן או אנליטיקה ל-KV בכל בקשה של משתמש, תגיעו לתקרת התשלום מהר מאוד ותאלצו לעבור למסלול ה-Paid שמספק מיליון כתיבות בחודש.
D1 Database 5 מיליון שורות קריאה (Rows Read) ביום, 100,000 שורות כתיבה (Rows Written) ביום, 5GB נפח אחסון כולל. היזהרו משאילתות לא יעילות (ללא אינדקסים או עם SELECT * ללא הגבלה), שכן הן מבצעות סריקת טבלה מלאה (Full Table Scan) ומבזבזות את מכסת ה-5 מיליון קריאות במהירות. חריגה מהמכסה תגרום ל-API להחזיר שגיאה (Error) מיידית במקום להיכשל בשקט.
Workers AI 10,000 נוירונים (Neurons - יחידת חישוב מנורמלת של GPU) ביום עבור מודלים מאוחסנים (Hosted Models). מספיק לכ-350 קריאות למודל Llama 3.1 8B ביום. שימו לב: מודלים המופנים לשירותים חיצוניים (Proxied Models דרך AI Gateway) אינם נהנים ממכסה חינמית ומחויבים ישירות דרך צד שלישי (כמו OpenAI/Anthropic).
הבנת המגבלות הללו מאפשרת לכם לתכנן נכון את הארכיטקטורה שלכם: השתמשו ב-KV בעיקר עבור קריאות תכופות של הגדרות מערכת (שם תקבלו 100,000 קריאות בחינם), והימנעו מכתיבות חוזרות ונשנות אליו. שמרו את המידע הדינמי והטרנזקציונלי ב-D1, וודאו שאתם מגדירים אינדקסים (Indexes) מתאימים על עמודות השאילתה שלכם כדי לשמור על מדד שורות הקריאה נמוך ככל האפשר. בעזרת ניהול קפדני זה, תוכלו להריץ אפליקציות Full-Stack שלמות ומתוחכמות, המחוטבות לחלוטין תחת קובץ wrangler.toml יחיד, מבלי להוציא אפילו דולר אחד מהכיס.
בינוני5 דקותחינםcode

ראוטינג אלגנטי עם Hono: תעבורת API, Middleware וטיפול ב-Static Assets

ריצו את פקודת ההתקנה של ה-CLI הרשמי create-cloudflare (המכונה c3) כדי לייצר פרויקט חדש:
npm create cloudflare@latest vibe-hono-app -- --framework=hono
פלט צפוי בטרמינל: כלי ההתקנה ישאל אתכם מספר שאלות. בחרו ב-TypeScript, ואשרו התקנה של Wrangler במידה ותתבקשו.
  • עברו לתיקיית הפרויקט החדשה שנוצרה:
    cd vibe-hono-app
  • צרו תיקייה חדשה בשם public בשורש הפרויקט שבה נשמור את קבצי ה-Frontend הסטטיים שלנו:
    mkdir public
  • צרו קובץ חדש בשם public/index.html והדביקו בתוכו את קוד ה-HTML וה-JavaScript הבא:
    <!DOCTYPE html>
    <html lang="he" dir="rtl">
    <head>
        <meta charset="UTF-8">
        <title
    
    
    
    

    חיווט מנוע ה-RAG לתוך ה-SaaS: חיבור Workers AI, Vectorize ו-D1

    ` div, right after the `

    פלט נראה לעין שתסיים איתו: ...

    ` element. Let's place: `` 19. **Strict HTML Tags Checks**: - No ``, ``, ``, ``, ``, ``, ``, `

    `, `

    `. - No `