📘 תיעוד 48

שימוש ב-Direct Upload עם אינטגרציה רציפה

עודכן לאחרונה ב-18 בספטמבר 2026 | העתק כ-Markdown | הצג כ-Markdown | הגדרת סוכן

Cloudflare Pages תומך בהעלאה ישירה של נכסים שנבנו מראש (prebuilt assets), מה שמאפשר לך להשתמש בשלבי בנייה מותאמים אישית עבור היישומים שלך ולפרוס ל-Pages באמצעות Wrangler. מדריך זה ילמד אותך כיצד לפרוס את היישום שלך ל-Pages, באמצעות אינטגרציה רציפה.

#פריסה באמצעות Wrangler

בספריית הפרויקט שלך, התקן את Wrangler כדי שתוכל לפרוס תיקייה של נכסים שנבנו מראש על ידי הרצת הפקודה הבאה:

# Publish created project
$ CLOUDFLARE_ACCOUNT_ID=<ACCOUNT_ID> npx wrangler pages deploy <DIRECTORY> --project-name=<PROJECT_NAME>

#קבלת פרטי התחברות מ-Cloudflare

#יצירת API Token

כדי ליצור API token:

1. בלוח הבקרה של Cloudflare, עבור אל הדף API Tokens. עבור אל Account API tokens ↗
2. בחר ב-Create Token.
3. תחת Custom Token, בחר ב-Get started.
4. תן שם ל-API Token שלך בשדה Token name.
5. תחת Permissions, בחר ב-Account, ב-Cloudflare Pages וב-Edit:
6. בחר ב-Continue to summary > Create Token.

כעת, לאחר שיצרת את ה-API token שלך, תוכל להשתמש בו כדי לדחוף את הפרויקט שלך מפלטפורמות אינטגרציה רציפה.

#השגת מזהה החשבון של הפרויקט

כדי למצוא את מזהה החשבון שלך, עבור אל הדף Zone Overview בלוח הבקרה של Cloudflare.

עבור אל Overview ↗

מצא את מזהה החשבון שלך בחלק API בתפריט שבצד ימין.

אם לא הוספת zone, הוסף אחד על ידי בחירה ב-Add > Connect a domain. תוכל לרכוש דומיין מ-רשם הדומיינים של Cloudflare.

#שימוש ב-GitHub Actions

GitHub Actions ↗ היא פלטפורמת אינטגרציה רציפה ומסירה רציפה (CI/CD) שמאפשרת לך לבצע אוטומציה של תהליך הבנייה, הבדיקה והפריסה שלך בעת שימוש ב-GitHub. תוכל ליצור תהליכי עבודה (workflows) שבונים ובודקים כל pull request למאגר שלך, או פורסים pull requests שמוזגו אל סביבת הייצור.

לאחר הגדרת הפרויקט שלך, תוכל להגדיר GitHub Action כדי לבצע אוטומציה של הפריסות הבאות שלך עם Wrangler.

#הוספת פרטי התחברות של Cloudflare אל GitHub secrets

ב-GitHub Action שהגדרת, נדרשים משתני סביבה כדי לדחוף את הפרויקט שלך אל Cloudflare Pages. כדי להוסיף את הערכים של משתני סביבה אלה במאגר ה-GitHub של הפרויקט שלך:

1. עבור אל מאגר הפרויקט שלך ב-GitHub.
2. תחת שם המאגר שלך, בחר ב-Settings.
3. בחר ב-Secrets > Actions > New repository secret.
4. צור secret אחד והזן CLOUDFLARE_ACCOUNT_ID כשם, כאשר הערך הוא מזהה החשבון שלך ב-Cloudflare.
5. צור secret נוסף והזן CLOUDFLARE_API_TOKEN כשם, כאשר הערך הוא ה-API token שלך ב-Cloudflare.

הוסף את הערך של מזהה החשבון שלך ב-Cloudflare ואת ה-API token שלך ב-Cloudflare בתור CLOUDFLARE_ACCOUNT_ID ו-CLOUDFLARE_API_TOKEN, בהתאמה. פעולה זו תבטיח שה-secrets האלה מאובטחים, ובכל פעם שה-Action שלך ירוץ, הוא ייגש ל-secrets האלה.

#הגדרת workflow

צור קובץ .github/workflows/pages-deployment.yaml בשורש הפרויקט שלך. הקובץ .github/workflows/pages-deployment.yaml יכיל את ה-jobs שאתה מציין בבקשה, כלומר: on: [push] במקרה זה. זה יכול להיות גם בעת pull request. להסבר מפורט על תחביר GitHub Actions, עיין ב-תיעוד הרשמי ↗.

בקובץ pages-deployment.yaml שלך, העתק את התוכן הבא:

on: [push]
jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
    name: Deploy to Cloudflare Pages
    steps:
      - name: Checkout
        uses: actions/checkout@v6
      
# Run your project's build step
      
# - name: Build
      
#   run: npm install && npm run build
      - name: Deploy
        uses: cloudflare/wrangler-action@v4
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy YOUR_DIRECTORY_OF_STATIC_ASSETS --project-name=YOUR_PROJECT_NAME
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

בבלוק הקוד שלעיל, הגדרת Action שרץ כאשר אתה דוחף קוד למאגר. החלף את YOUR_PROJECT_NAME בשם הפרויקט שלך ב-Cloudflare Pages ואת YOUR_DIRECTORY_OF_STATIC_ASSETS בתיקיית הפלט של הפרויקט שלך, בהתאמה.

ה-${{ secrets.GITHUB_TOKEN }} יסופק אוטומטית על ידי GitHub Actions עם הרשאת contents: read ו-deployments: write. פעולה זו תאפשר ל-action של Cloudflare Pages ליצור Deployment בשמך.

הערה

תהליך עבודה זה מופעל אוטומטית בענף ה-git הנוכחי, אלא אם תוסיף אפשרות branch לחלק ה-with.

#שימוש ב-CircleCI עבור CI/CD

CircleCI ↗ היא פלטפורמת אינטגרציה רציפה ומסירה רציפה (CI/CD) נוספת שמאפשרת לך לבצע אוטומציה של תהליך הבנייה, הבדיקה והפריסה שלך. ניתן להגדיר אותה כך שתריץ ביעילות תהליכים מורכבים עם שמירה במטמון (caching), שמירת שכבות docker במטמון (docker layer caching), וסיווגי משאבים (resource classes).

בדומה ל-GitHub Actions, CircleCI יכול להשתמש ב-Wrangler כדי לפרוס באופן רציף את הפרויקטים שלך בכל פעם שאתה דוחף קוד.

#הוספת פרטי התחברות של Cloudflare אל CircleCI

לאחר שיצרת את ה-API token שלך ב-Cloudflare ומצאת את מזהה החשבון שלך בלוח הבקרה, תצטרך להוסיף אותם ללוח הבקרה של CircleCI כדי להשתמש במשתני הסביבה שלך בפרויקט.

כדי להוסיף משתני סביבה, ביישום הרשת של CircleCI:

1. עבור אל פרויקט ה-Pages שלך > Settings.
2. בחר ב-Projects בתפריט הצדדי.
3. בחר בלחצן שלוש הנקודות (...) בשורת הפרויקט. תראה את האפשרות להוסיף משתני סביבה.
4. בחר ב-Environment Variables > Add Environment Variable.
5. הזן את השם והערך של משתנה הסביבה החדש, שהם פרטי ההתחברות שלך ל-Cloudflare (CLOUDFLARE_ACCOUNT_ID ו-CLOUDFLARE_API_TOKEN).

#הגדרת workflow

צור קובץ .circleci/config.yml בשורש הפרויקט שלך. קובץ זה מכיל את ה-jobs שיבוצעו בהתאם לסדר של תהליך העבודה שלך. בקובץ config.yml שלך, העתק את התוכן הבא:

version: 2.1
jobs:
  Publish-to-Pages:
    docker:
      - image: cimg/node:18.7.0

    steps:
      - checkout
      
# Run your project's build step
      - run: npm install && npm run build
      
# Publish with wrangler
      - run: npx wrangler pages deploy dist --project-name=<PROJECT NAME> 
# Replace dist with the name of your build folder and input your project name

workflows:
  Publish-to-Pages-workflow:
    jobs:
      - Publish-to-Pages

תהליך האינטגרציה הרציפה שלך מחולק ל-jobs בעת שימוש ב-CircleCI. מבלוק הקוד שלעיל, תוכל לראות שקודם כול אתה מגדיר רשימה של jobs שרצים בכל commit. לדוגמה, המאגר שלך ירוץ על תמונת docker מוכנה מראש cimg/node:18.7.0. תחילה הוא מבצע checkout למאגר עם גרסת ה-Node שצוינה בתמונה.

הערה

Wrangler דורש גרסת Node של 16.17.0 לפחות. עליך לשדרג את גרסת ה-Node.js שלך אם הגרסה שלך נמוכה מ-16.17.0.

תוכל לשנות את פקודת Wrangler עם כל אחת מ-אפשרויות wrangler pages deploy.

לאחר כל השלבים שצוינו, הגדר workflow בסוף הקובץ שלך. תוכל ללמוד עוד על יצירת תהליך מותאם אישית באמצעות CircleCI מתוך ה-תיעוד הרשמי ↗.

#Travis CI עבור CI/CD

Travis CI הוא כלי אינטגרציה רציפה בקוד פתוח שמטפל במשימות ספציפיות, כגון pull requests ודחיפות קוד עבור תהליך העבודה של הפרויקט שלך. ניתן לשלב את Travis CI בפרויקטי GitHub, מסדי נתונים ושירותים מותקנים מראש אחרים שמופעלים בתצורת הבנייה שלך. כדי להשתמש ב-Travis CI, עליך להחזיק בחשבון GitHub, Bitbucket, GitLab או Assembla.

#הוספת פרטי התחברות של Cloudflare אל TravisCI

בפרויקט Travis שלך, הוסף את פרטי ההתחברות של Cloudflare שיצרת מלוח הבקרה של Cloudflare כדי לגשת אליהם בקובץ travis.yml שלך. עבור אל לוח הבקרה של Travis CI ובחר בפרויקט הנוכחי שלך > More options > Settings > Environment Variables.

הגדר את שם וערך משתנה הסביבה ואת הענף שאליו תרצה שהוא יוצמד. תוכל גם להגדיר את רמת הפרטיות של הערך.

#הגדרה

עבור אל Travis-ci.com ↗ והפעל את המאגר שלך על ידי התחברות עם הספק המועדף עליך. מדריך זה משתמש ב-GitHub. לאחר מכן, צור קובץ .travis.yml והעתק את התוכן הבא לתוך הקובץ:

language: node_js
node_js:
  - "18.0.0" 
# You can specify more versions of Node you want your CI process to support
branches:
  only:
    - travis-ci-test 
# Specify what branch you want your CI process to run on
install:
  - npm install

script:
  - npm run build 
# Switch this out with your build command or remove it if you don't have a build step
  - npx wrangler pages deploy dist --project-name=<PROJECT NAME>

env:
  - CLOUDFLARE_ACCOUNT_ID: { $CLOUDFLARE_ACCOUNT_ID }
  - CLOUDFLARE_API_TOKEN: { $CLOUDFLARE_API_TOKEN }

פעולה זו תגדיר את גרסת Node.js ל-18. כמו כן הגדרת ענפים שעבורם תרצה שהאינטגרציה הרציפה שלך תרוץ. לבסוף, הזן את ה-PROJECT NAME שלך בחלק ה-script ותהליך ה-CI שלך אמור לפעול כצפוי.

תוכל גם לשנות את פקודת Wrangler עם כל אחת מ-אפשרויות wrangler pages deploy.

האם זה עזר?

כן לא

#בדף זה

Docs

{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/#page","headline":"Use Direct Upload with continuous integration · Cloudflare Pages docs","description":"Deploy prebuilt assets to Cloudflare Pages using Wrangler in your CI/CD pipeline.","url":"https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-09-18","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}