קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

React היא ספריית JavaScript פופולרית לבניית ממשקי משתמש פונקציונליים ביישומי אינטרנט דינמיים. אולי ביליתם הרבה שעות ארוכות בניפוי באגים בקוד React בניסיון לבנות את האינסטגרם או ה-Airbnb הבא.

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

עקוב אחר כך כדי ללמוד כיצד לפרוס את יישומי React שלך באמצעות כלי הפריסה הקלים לשימוש של Netlify.

מה זה Netlify?

Netlify היא פלטפורמת פיתוח מבוססת ענן עם תכונות שהופכות אירוח ופריסה של אפליקציות באינטרנט להרבה יותר קלות. במילים פשוטות, הוא מספק מגוון כלים ושירותים המייעלים ומפשטים את התהליך ומאפשרים לך לפרוס ולארח יישום אינטרנט תוך שניות.

התכונות העיקריות של Netlify

ל-Netlify מגוון תכונות המפשטות את תהליך הפריסה.

  • הוא מספק תכונות חיוניות של גישה ובקרת גרסאות כדי לאפשר לצוותי פיתוח לשתף פעולה ביעילות וביעילות בפרויקטים.
  • הוא מציע שירותי אירוח מאובטח שאתה יכול להתאים לצרכים שלך. בנוסף, הוא מספק גיבויים אוטומטיים במקרה של אובדן נתונים.
    instagram viewer
  • הוא משתלב בצורה חלקה עם שירותי פיתוח ענן פופולריים כגון GitHub, GitLab ו-Bitbucket.
  • הוא מספק תכונות המקלות על הגדרה והגדרה של כתובת אתר מותאמת אישית של דומיין ותעודת SSL עבור היישום שלך.

צור אפליקציית Demo React

  1. כדי להתחיל, תצטרך קודם כל צור אפליקציית React הדגמה שבסופו של דבר תפרוס ב-Netlify. הפעל את הפקודה למטה בטרמינל שלך כדי ליצור יישום React: 
    npx create-react-app demo-react-netlify-app
  2. לאחר מכן, הפעל את פקודת הטרמינל הזו כדי לסובב את שרת הפיתוח: 
    התחלה של npm
    קדימה והצג את התוצאות בדפדפן שלך בכתובת http://localhost: 3000.
  3. לבסוף, הפעל את הפקודה הזו כדי ליצור גרסה מוכנה לייצור של היישום שלך: 
    npm run build
    פקודה זו יוצרת את קבצי הייצור והנכסים הנדרשים בתוך תיקיה חדשה בספריית השורש בשם, build. תיקיית ה-build לוכדת גרסה ממוזערת של האפליקציה כולה, המכילה את כל הדרוש לפריסת האפליקציה.

פרוס את אפליקציית React ב-Netlify

Netlify מספקת שלוש שיטות שבהן אתה יכול להשתמש כדי לפרוס את אפליקציית React שלך. אתה יכול:

  • ייבא את הפרויקט שלך מארח מאגר Git כגון GitHub.
  • השתמש בתכונת גרור ושחרר.
  • השתמש בכלי שורת הפקודה, CLI של Netlify.

פריסה באמצעות תכונת ייבוא ​​GitHub

  1. התחל על ידי יצירת מאגר ב- GitHub כדי לאחסן את קבצי פרויקט אפליקציית React שלך. לחלופין, אתה יכול גם לארח את קבצי הפרויקט שלך בכל ספק Git נתמך אחר כגון GitLab, Bitbucket או Azure DevOps.
  2. לאחר מכן, הירשם לחשבון ב- Netlify. לאחר ההרשמה, נווט אל מרכז השליטה של ​​החשבון שלך ובחר ב- אתרים לשונית.
  3. הקלק על ה ייבוא ​​מ-Git לַחְצָן.
  4. בחר את פלטפורמת ספק Git המועדפת שלך. Netlify תבקש ממך לבצע אימות עם ספק Git שלך כדי להעניק לו גישה לחשבון ולמאגרים שלך.
  5. לאחר שתעשה זאת, Netlify תציג רשימה של מאגרים בספק ה-Git שלך. בחר את מאגר הפרויקטים של React שדחפת בהתחלה לספק Git שלך.
  6. לאחר בחירת המאגר, עליך לציין כיצד Netlify אמור לטפל בתהליך הפריסה. בדרך כלל, עבור אתרים סטטיים, אינך צריך לבצע שינויים, אולם עבור אתרים דינמיים כגון אפליקציות React, תצטרך להגדיר את הגדרות הבנייה. למרבה המזל, Netlify כברירת מחדל מזהה אוטומטית את המסגרת המשמשת לבניית האפליקציה וממלאת את השדות בהגדרות הבנייה הנדרשות.
  7. לבסוף, לחץ פריסת אתר כדי לסיים את התהליך.

לחץ על כתובת האתר שסופקה כדי להציג את היישום בדפדפן שלך. אם יש לך כתובת אתר מותאמת אישית של דומיין, תוכל להורות ל-Netlify להשתמש בה עם האתר שלך על ידי עדכון כתובת האתר מהגדרות האתר.

פרוס באמצעות תכונת גרור ושחרור

זוהי השיטה הפשוטה ביותר לפרוס את אפליקציית React שלך ב-Netlify. אתה רק צריך לגרור ולשחרר את תיקיית ה-build לתוך ממשק המשתמש של Netlify של גרירה ושחרור.

  1. בלוח המחוונים של Netlify, בחר את אֲתַר לשונית. לאחר מכן, לחץ על הוסף אתר חדש ולאחר מכן בחר פרוס באופן ידני מתוך אפשרויות התפריט הנפתח.
  2. בדף התכונות של גרור ושחרור, בחר את התיקיה המכילה את קבצי ה-React ושחרר אותה לממשק המשתמש הזה. הפרויקט ייפרס באופן מיידי ב-Netlify. לחלופין, אתה יכול ללחוץ על עיין להעלאה כדי לבחור את תיקיית ה-build שלך ממערכת הקבצים.

פרוס באמצעות ממשק שורת הפקודה של Netlify

באמצעות ממשק שורת הפקודה של Netlify (CLI), אתה יכול לפרוס את אפליקציית React שלך ישירות ממסוף. בנוסף, ה-CLI של Netlify מאפשר לך להגדיר פריסה רציפה כך שכאשר אתה מתחייב ודוחף עדכונים חדשים למאגר Git שלך, הם ייפרסו אוטומטית.

  1. הפעל את הפקודה למטה במסוף שלך כדי להתקין את ה-CLI של Netlify: 
    npm להתקין netlify-cli -g
  2. כעת, הפעל את הפקודה למטה כדי לפרוס את היישום שלך. ודא שאתה נמצא בספריית העבודה של הפרויקט לפני הפריסה. 
    פריסת netlify
    ה-CLI של Netlify יבקש ממך לאפשר לו לבצע שינויים בחשבונך. לאחר הענקת ההרשאה, ספק את שם חשבון הצוות שנתת בעת ההרשמה, לאחר מכן בחר אם לקשר את ספריית האפליקציה לאתר קיים או ליצור ולהגדיר אתר חדש אחד. סיים על ידי מתן שם אתר מותאם אישית ושם תיקיית הבנייה שלך.
  3. ה-CLI יפרוס גרסת טיוטה של ​​היישום שלך. תבדוק שהכל עובד כמצופה.
  4. לבסוף, הפעל את הפקודה למטה כדי לפרוס את האפליקציה שלך לייצור. 
    פריסת netlify --לְדַרבֵּן

השוואה בין שלוש שיטות הפריסה

שיטת הייבוא ​​של GitHub היא היעילה ביותר לפריסת אפליקציות ייצור מכיוון שהיא מאפשרת לך לקשר מאגר ה-Git שלך ישירות ל-Netlify ושמור את הקוד שלך מסונכרן עם האתר או האפליקציה החיים שלהם. כאשר אתה מתחייב ודוחף שינויים במאגר Git שלך, Netlify תעדכן אוטומטית את האתר.

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

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

כל שלוש השיטות שימושיות לפריסת אפליקציות ל-Netlify. בסופו של דבר, הבחירה באיזה שימוש תהיה תלויה בצרכים של כל פרויקט בנפרד.

שימוש ב-Netlify כדי לפרוס יישומים אחרים

Netlify הוא כלי רב עוצמה ורב-תכליתי שבו אתה יכול להשתמש כדי לפרוס יישומים אחרים שהם רק React. אתה יכול להשתמש בו כדי לפרוס ולארח אתרים סטטיים ויישומים דינמיים הבנויים עם מסגרות שונות כמו Angular.

הממשק הידידותי למשתמש מקל על התצורה, הניהול והפריסה של ממשקי ה-API שלך.