פריסת אפליקציות Angular לדפי GitHub היא דרך מצוינת לארח אותם בחינם. Angular היא מסגרת JavaScript פופולרית לבניית יישומי עמוד בודד.

ל-Angular יש ממשק שורת פקודה מקיף התומך בבנייה והגדרה מהירה של יישומי JavaScript. ל-Angular CLI יש מספר פקודות ליצירה, בנייה, שירות ויצירת רכיבי יישומים.

אתה יכול גם להשתמש ב-CLI כדי לפרוס אפליקציות Angular למטרות שונות, כולל דפי GitHub.

מה אתה צריך

כדי להפיק את המרב ממדריך זה, עליך להיות בעל הכישורים והכלים הבאים:

  • כדאי להכיר היסודות של Angular, כמו הרעיון של אפליקציות, הגדרות, כתובות URL וכו'.
  • אתה מכיר היסודות של GitHub ו-Git, כמו יצירת חשבון GitHub, יצירת מאגר git (repo), ודפי GitHub (GH-pages).
  • יש לך יישום Angular מוכן לפריסה.
  • כתובת האתר הבסיסית שלך נמצאת בנתיב הנכון. פריסות לדפי GH נכשלות בגלל הגדרת ה-base-href שגוי (base-url).
  • חשבון GitHub.
  • מאגר GitHub (repo) עם קוד אפליקציה.

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

תהליך פריסה

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

לאחר מכן, צור ענף GH-pages.

instagram viewer

1. צור סניף GH-pages

זוהי פריצה שתעזור לך לקבל את הקישור של GH-pages כדי לעזור להגדיר את ה-base-href.

ראשית, צור דפי GH במאגר המקומי שלך עם הפקודה הבאה:

git branch gh-pages

לאחר מכן, צא מהסניף הראשי אל GH-pages כדי להעביר את כל הקוד.

git checkout gh-pages

לאחר מכן, דחוף את GH-pages אל GitHub כדי ליצור ענף GH-pages מרוחק.

git push origin gh-pages

בסרגל הכלים מתחת לשם ריפו, לחץ הגדרות > דפים.

תַחַת בנייה ופריסה, בחר פריסה מסניף. לאחר מכן, בחר gh-pages כשם הסניף ולאחר מכן לחץ להציל. פעולה זו תיצור קישור GH-pages בפינה השמאלית העליונה מתחת לתווית GH-pages.

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

3. התקן את Angular-CLI-GHpages

חבילת angular-cli-ghpages היא כלי שה-Angular CLI משתמש בו למטרות פריסה.

נווט חזרה למאגר הפרויקטים המקומי שלך. לאחר מכן התקן והפעל angular-cli-ghpages עם הפקודה הזו:

ng הוסף angular-cli-ghpages

4. פרוס את האפליקציה

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

הגדר את האפליקציה שלך לשרת מרוחק על ידי הפעלת הפקודה הבאה:

ng deploy --base-href=https://GithubUserName.github.io/GithubRepoName/

זכור להחליף את הקישור לעיל בקישור החי מדפי GH

בנייה מוצלחת תיראה כמו האיור שלהלן:

לאחר מכן, נווט אל GitHub ולחץ על הקישור GH-pages כדי לראות את הפרויקט הפרוס שלך.

מזל טוב, פרסת את אפליקציית Angular שלך!

אם הקישור מציג רק את קובץ README, אנא חזור להגדרות GitHub GH-pages. ודא שהענף הנבחר הוא gh-pages ולא הענף הראשי או הראשי. אז תן לזה חמש דקות וטען מחדש. לפעמים GitHub לוקח זמן לשקף שינויים.

למידע נוסף על האופן שבו אתה יכול להשתמש ב-Angular CLI בפריסה, בקר באתר תיעוד זוויתי.

כיצד לפרוס אפליקציה זוויתית לדפי GitHub

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

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