כיצד לפרוס אפליקציית React לפלטפורמת האפליקציות של DigitalOcean

הסופר בחר ב-Creative Commons לקבל תרומה כחלק מתוכנית Write for DOnations.

הקדמה

פלטפורמת App של DigitalOcean היא מוצר פלטפורמה כשירות (PaaS) שמאפשר לך להגדיר ולהפעיל אפליקציות ממאגר מקור. לאחר הגדרת האפליקציה שלך, DigitalOcean תבנה ותפרסם את האפליקציה בכל שינוי, מעניקה לך את יתרונות שרת האינטרנט המלא וקו פיתוח עם הגדרה מינימלית. זה יכול להיות דרך מהירה ויעילה להפיץ את האפליקציות שלך בעזרת React, ואם אתה משתמש ב-React לבניית אתר ללא שרת אחורי, תוכל להשתמש ב-השכבה החינמית של App Platform.

במדריך זה, תפרוש אפליקציית React לפלטפורמת האפליקציות של DigitalOcean באמצעות תוכנית ה-התחלת החינמית. תבנה אפליקציה עם Create React App, תעביר את הקוד למאגר GitHub, ואז תגדיר את האפליקציה כאפליקציה של DigitalOcean. תחבר את האפליקציה לקוד המקור שלך ותפרוש את הפרויקט כקובץ סטטי.

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

נדרש

• על המכשיר המקומי שלך, יהיה עליך להפעיל סביבת פיתוח המריצה את Node.js; המדריך הזה נבדק על Node.js גרסה 10.22.0 ו-npm גרסה 6.14.6. כדי להתקין זאת ב- macOS או Ubuntu 20.04, עקוב אחר השלבים ב- איך להתקין Node.js וליצור סביבת פיתוח מקומית ב- macOS או בקטע התקנת Node.js עם Apt באמצעות PPA של NodeSource של איך להתקין Node.js על Ubuntu 20.04.

• Git מותקן על המחשב המקומי שלך. תוכל לעקוב אחר המדריך תרומה לקוד פתוח: התחלה עם Git כדי להתקין ולהגדיר את Git על המחשב שלך.

• חשבון ב- DigitalOcean.

• חשבון ב- GitHub, שתוכל ליצור על ידי מעבר לעמוד צור את החשבון שלך.

• תצטרך גם ידע בסיסי של JavaScript, HTML ו-CSS, שתוכל למצוא בסדרת המדריכים שלנו כיצד לבנות אתר עם HTML, כיצד לבנות אתר עם CSS, וגם כיצד לכתוב ב-JavaScript.

שלב 1 — יצירת פרויקט React

בשלב זה, תיצור אפליקצית React באמצעות Create React App ותבנה גרסה שניתן לפרסם שלה.

להתחיל, צרו אפליקציה חדשה באמצעות Create React App על המחשב המקומי שלך. בטרמינל, הריצו את הפקודה כדי לבנות אפליקציה בשם digital-ocean-app

npx create-react-app digital-ocean-app

הפקודה npx תפעיל חבילת Node מבלי להוריד אותה למחשב שלך. תסקרין create-react-app יתקין את כל התלויות ויבנה פרויקט בסיסי בתיקיית digital-ocean-app. למידע נוסף על Create React App, ראו את המדריך כיצד להגדיר פרויקט React עם Create React App.

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

Output
Success! Created digital-ocean-app at your_file_path/digital-ocean-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd digital-ocean-app
  npm start

Happy hacking!

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

cd digital-ocean-app

הריצו את הפרויקט באמצעות תסריט npm start:

npm start

כאשר הפקודה תופעל, תקבלו פלט עם כתובת ה־URL לשרת הפיתוח המקומי:

Output
Compiled successfully!

You can now view digital-ocean-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.110:3000

Note that the development build is not optimized.
To create a production build, use npm build.

פתחו דפדפן בכתובת http://localhost:3000 ותמצאו את הפרויקט שלכם:

עצרו את הפרויקט על ידי הקלדת CTRL+C או ⌘+C בטרמינל.

עכשיו שיש לך אפליקציה פעילה של React, ניתן לדחוף את הקוד למאגר GitHub.

שלב 2 — דחיפת הקוד אל GitHub

כדי להריץ את האפליקציה שלך, פלטפורמת האפליקציות מאחזרת את קוד המקור שלך ממאגר קוד מארח. בשלב זה, תדחוף את קוד האפליקציה שלך ב־React אל מאגר GitHub כך שפלטפורמת האפליקציות תוכל לגשת אליו מאוחר יותר.

התחבר לחשבון GitHub שלך. לאחר שתתחבר, צור מאגר חדש בשם digital-ocean-app. אפשר להגדיר את המאגר כפרטי או כציבורי:

כאשר אתה משתמש בכלי Create React App, הפרוייקט יתחיל אוטומטית עם git, ולכן תוכל להגדיר דרך לדחוף את הקוד ישירות אל GitHub. תוסף את המאגר שברצונך להשתמש בו באמצעות הפקודה הבאה:

git remote add origin https://github.com/your_name/digital-ocean-app.git

בהמשך, הצהר כי ברצונך לדחוף אל ענף main עם הפקודה הבאה:

git branch -M main

לבסוף, דחוף את הקוד אל המאגר שלך:

git push -u origin main

הזן את הפרטים שלך בGitHub כאשר תתבקש לדחוף את הקוד שלך.

כאשר תדחוף את הקוד תקבל הודעת הצלחה. ההודעה שלך תהיה מעט שונה:

Output
Counting objects: 22, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (22/22), done.
Writing objects: 100% (22/22), 187.50 KiB | 6.94 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0)
To github.com:your_name/digital-ocean-app.git
   4011c66..647d2e1  main -> main

עכשיו העתקת את הקוד שלך למאגר GitHub.

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

שלב 3 — פרסום לפלטפורמת DigitalOcean App

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

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

להתחיל, התחבר לחשבון ה-DigitalOcean שלך ולחץ על הכפתור צור, ואז בחר אפליקציות:

לאחר מכן תתבקש לקשר את המאגר שלך ב-GitHub. אם עדיין לא חיברת אותו, תצטרך להתחבר עם שם המשתמש והסיסמה שלך ולאשר ל-DigitalOcean לגשת למאגרים שלך:

לאחר שתקשר את החשבון שלך, בחר את המאגר שברצונך להתחבר אליו במסך האישור של GitHub. במקרה זה, אתה משתמש במאגר digital-ocean-app, אך תוכל לחבר עוד מאגרים אם תרצה:

אחרי בחירת המאגר, תתחבר שוב לממשק של DigitalOcean. בחר digital-ocean-app מתוך רשימת המאגרים, ולאחר מכן לחץ על הבא. זה יחבר את האפליקציה שלך ישירות למאגר ה- GitHub:

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

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

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

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

יש לך גם אפשרות להשתמש בסקריפט בנייה מותאם אישית. אך במקרה זה, ניתן להישאר עם פקודת npm run build הבסיסית. ייתכן שתרצה ליצור סקריפט בנייה מותאם אישית אם יש לך סקריפט בנייה שונה לאיכות (QA) או סביבת ייצור (production):

לחץ הבא כדי לעבור לעמוד סיים והשק.

כאן תוכל לבחור את תוכנית המחיר. השכבה התחילה החינמית מיועדת לאתרים סטטיים, לכן בחר באחת:

לחץ על לחצן השק אפליקציית ההתחלה ו-DigitalOcean תתחיל לבנות את היישום שלך.

היישום ירוץ את הסקריפטים npm ci ו-npm build במאגר שלך. זה יוריד את כל התלויות ויצור את הספרייה build עם גרסה מקומפלת וממוזערת של כל הקבצים שלך ב-JavaScript, קבצי HTML ונכסים אחרים. ניתן גם ליצור סקריפט מותאם אישית ב-package.json שלך ולעדכן את ה-פקודות בכרטיסיית ה-רכיבים של האפליקציה שלך בפלטפורמת האפליקציות.

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

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

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

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

מסקנה

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

A possible next step for a project like this would be to change the domain name of the app. To do this, take a look at the official documentation for App Platform.