PracticU

ריאקט - העלאת אתר לענן - Firebase - חלק 3

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › ריאקט - העלאת אתר לענן - Firebase - חלק 3
מילון מושגים:
Firebase - פלטפורמת ענן של גוגל לפיתוח אפליקציות, הכוללת מסד נתונים, אימות, אחסון ושירותים נוספים.
טרמינל - חלון או תוכנה שמספקים ממשק שורת פקודה להקלדת פקודות למערכת ההפעלה.
HTTPS - הגרסה המאובטחת של HTTP, שמצפינה את התקשורת בין הדפדפן לשרת בעזרת TLS ומאמתת את זהות האתר.
GitHub - שירות ענן לאחסון מאגרי קוד מבוססי Git, המאפשר שיתוף פעולה, מעקב גרסאות וניהול פרויקטים.
HTML - שפת הסימון שבה בונים את מבנה ותוכן דפי האינטרנט, באמצעות תגיות שמגדירות כותרות, פסקאות, קישורים ועוד.
Localhost - שם המפנה למחשב המקומי עצמו (כתובת 127.0.0.1), המשמש לבדיקת שירותים הרצים על אותו מחשב.
צד שרת - החלק של היישום שרץ בשרת ואחראי על הלוגיקה, מסדי הנתונים והעיבוד שמאחורי הקלעים.
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.

ריאקט - העלאת אתר לענן - Firebase - חלק 3
בהרצאה מעלים את תיקיית build לפרויקט ה-Firebase דרך הטרמינל, ובסוף האתר רץ באוויר בכתובת HTTPS.
שלבי ההעלאה
1. התקנת ה-CLI: מתקינים את סדרת הפקודות של Firebase פעם אחת בלבד לכל משתמש או מכונה, בהתקנה גלובלית עם -g על החבילה firebase-tools.
2. התחברות: firebase login, עם האימייל והסיסמה של החשבון. אפשר לסרב לשליחת מידע לגוגל. מתנתקים עם firebase logout.
3. הגדרת הפרויקט: firebase init שואל שאלות אבל לא מעלה כלום. מאשרים את ההמשך, בוחרים ב-Hosting ובמקש רווח מסמנים את האפשרות הארוכה, זו שכוללת גם GitHub Action Deploys.
4. בחירת פרויקט ותיקייה: בוחרים Use an existing project ואת הפרויקט שנפתח. כשנשאלים על התיקייה מקלידים build ולא משאירים את public כברירת מחדל.
5. Single page application: עונים yes. כך כל כתובת שהגולש מבקש מחזירה את index.html, במקום שגיאת 404.
6. דרישות נוספות: חיבור ל-GitHub עונים no. כשנשאלים אם לדרוס את index.html שב-build עונים no, כי הוא חלק מהפרויקט.
7. העלאה: firebase deploy מעלה את הקבצים (34 במקרה זה) ומחזיר שני קישורים, אחד ל-console ואחד לאתר החי.
בדיקת התוצאה
האתר נפתח בכתובת של Firebase עם מנעול HTTPS ולא ב-localhost. דף הבית, העובדים והמוצרים עובדים. הנתונים מהשרת לא מוצגים למי שאין לו Backend מקומי, כי כתובת ה-production היא של שרת מקומי. ההתחברות, ההתנתקות והרענון עובדים.
אחרי ההרצאה אפשר להקים פרויקט Hosting ב-Firebase ולפרסם בו אפליקציית React.
השיעור הבא בקורס: ריאקט - עדכון של Firebase

פרקי ההרצאה: ריאקט - העלאת אתר לענן - Firebase - חלק 3

  1. 00:00

    העלאת התיקייה דרך הטרמינל

  2. 00:37

    התקנת firebase-tools הגלובלית

  3. 01:37

    התחברות עם firebase login

  4. 02:35

    הרצת הפקודה firebase init

  5. 03:17

    בחירת שירות ה-Hosting

  6. 04:14

    בחירת פרויקט קיים

  7. 04:50

    בחירת התיקייה להעלאה

תמלול ההרצאה: ריאקט - העלאת אתר לענן - Firebase - חלק 3

הטקסט המלא של הדקות הראשונות בהרצאה «ריאקט - העלאת אתר לענן - Firebase - חלק 3» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

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

  2. 00:20

    רגע, מאיפה יש במחשב הזה פקודות פיירבייס? כל פקודה כזאת שקיימת במחשב, כל סדרת פקודות כאלה, ראינו שנקראת CLI Command Line Interface, הראשי תיבות של CLI ודרושה התקנה שמכילה את סדרת הפקודות האלה.

  3. 00:37

    ההתקנה שדרושה עבור סדרת הפקודות של Firebase NPMI כמובן כל התקנת CLI צריכה להיות מינוס G היא התקנה גלובלית במחשב שמבוצעת פעם אחת פר היוזר או פר מכונה תלוי וההתקנה נקראת Firebase/Pools Go בואו תתקינו את זה אם אתם עושים את זה יחד איתי ויש לנו ברגע שההתקנה הזאת מסתיימת סדרת פקודות CLI שמתחילות ב

  4. 01:09

    firebase ושמאפשרות לנו להעלות את הפרויקט שלנו לאוויר והנה הוא הולך לסיים יופי וכמובן משהו שאנחנו צריכים לעשות פעם אחת בלבד גם אם מחר נרצה להתקין או להעלות עוד פרויקט אנחנו לא צריכים לעשות את ההתקנה הזאת עוד פעם כמובן הדבר הבא שאנחנו צריכים לעשות זה זה to log in על ידי הקונסול firebase login go כאן הוא יבקש מאיתנו את ה-credential שלנו

  5. 01:41

    מה ה-user name ומה ה-password ה-user name הכוונה האימייל בואו נכניס אותם קודם כל הוא שואל אותנו האם אנחנו רוצים לאפשר לו לקבל מידע נגיד לו no אל תיקח לי מידע מהקונסול go והוא פותח לנו מסך לוגין בואו בואו נבחר את החשבון ונגיד לו allow והוא כותב לנו שהצלחנו to log in עבור הקונסול הזה.

  6. 02:12

    זה גם כן משהו שעושים פעם אחת פר יוזר והנה logged in as שם החשבון שלנו. אם אתם רוצים לצאת או לבצע logout זה יהיה firebase logout ואז הוא מוציא אתכם אני לא אעשה logout כרגע.

  7. 02:28

    אחרי שעשינו log in ננקה טיפה. כאן אנחנו רוצים עכשיו את הפקודה Firebase Init. זאת פקודה שהוא שואל אותנו סדרה של שאלות בשביל לדעת בדיוק מה לעשות, איזה תיקייה לעלות, לאיזה פרויקט לעלות אותה, כל מיני נתונים שאנחנו רוצים, אבל הוא עדיין לא מעלה את התיקייה, הוא רק שואל אותנו מבחינת Settings,

  8. 02:54

    מה ה-Settings שאנחנו רוצים עבור הפרויקט הזה. אז בואו נתחיל את ה-Settings שלב שלב ונראה מה אנחנו צריכים לענות. שלב ראשון, are you ready to proceed? נראה לי שכן, בואו נגיד לו yes.

  9. 03:08

    שלב שני, איזה שירותים אתה רוצה להשתמש בהם? לפי השירותים האלה הוא ידע מה בעצם לבצע. אז חצים, אם החצי חצי למעלה, חצי למטה, אתם יכולים לרדת ולעלות ואנחנו צריכים את זה.

  10. 03:25

    הוסטינג, יש פה שניים, שימו לב לאיזה אני צריך. Figure files for Firebase Hosting and Optionally Setup GitHub Action Deploys. אוקיי, יש פה עוד אחד של הוסטינג, Setup GitHub Action Deploys, אנחנו לא רוצים את הקצר, אנחנו רוצים את הארוך. מה שאנחנו צריכים לעשות עכשיו זה פשוט ללחוץ ספייס, ספייס מסמן לי בכוכבית וזה אומר שזה הפיצ'ר

  11. 03:51

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

  12. 04:07

    אתה רוצה להשתמש בפרויקט קיים או ליצור פרויקט חדש או לחבר פיירבייס עם איזשהו גוגל פרויקט או לא לעשות כלום בעצם? אנחנו רוצים use an existing project כי יש לנו כבר פרויקט שפתחנו.

  13. 04:23

    אגב, אם הייתם בוחרים create a new project אז הוא היה שואל אתכם כל מיני שאלות שהוא שאל אותנו כשפתחנו את הפרויקט. מה השם של הפרויקט?

  14. 04:31

    השם של האתר אינטרנט שאתם רוצים. פחות מומלץ לעשות את זה כאן, אני אוהב יותר לעשות את זה בקלאוד שלהם, בקונסול שלהם. Use an existing Project זה מה שאנחנו רוצים, אז אני לוחץ Enter.

  15. 04:42

    השאלה הבאה שהוא שואל אותנו, שאלה לגבי איזה פרויקט אנחנו רוצים לבחור שקיים בחשבון Firebase שלנו. יש לנו רק אחד שם, הוא נקרא PracticU Northwind Raiders ואת זה אנחנו רוצים, אז אני פשוט בוחר אותו על ידי Enter.

  16. 04:59

    שאלה הבאה סופר חשובה לא לטעות בשאלה הזאת אחרת הכל אבוד והוא שואל אותנו פשוט איזו תיקייה אנחנו רוצים להעלות האם אתם רוצים להעלות תיקיית public אם אתם לוחצים עכשיו enter הוא חושב שאתם רוצים את הפאבליק אנחנו לא רוצים את

לקורס המלא: קורס ריאקט אונליין

ההרצאה הקודמת: ריאקט - העלאת אתר לענן - Firebase - חלק 2

ההרצאה הבאה: ריאקט - עדכון של Firebase

הרצאות קשורות מקורסים אחרים

  • העלאת אתר Wordpress לאירוח
  • מבוא לענן פרטי עם OpenStack
  • לוגין לענן - az login
  • אתר Netcraft

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס NodeJS