כיצד לארח אתר זוויתי באמצעות Netlify ו-GitHub

כאשר מארחים אתר Angular באינטרנט, אתה יכול לבחור בין פלטפורמות זמינות רבות. אחד מהם שאתה יכול להשתמש בו בחינם הוא Netlify.

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

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

כיצד ליצור אפליקציה זוויתית בסיסית לדוגמה

אתה יכול ליצור יישום Angular פשוט באמצעות עורך כגון Visual Studio Code. לאחר מכן תוכל לארח אתר זה באמצעות Netlify.

1. ליצור אפליקציית Angular חדשה.
2. צור דף בית פשוט. החלף את הקוד ב- app.component.html קובץ עם תוכן דף הנחיתה הבא:

   <div class="כותרת מיכל כהה">
   <h2>האתר העסקי שלנו</h2>
   </div>
   <div class="מיכל-לבן">
   <div class="תוֹכֶן">
   <h2>האתר העסקי שלנו</h2>
   <ע>למד כיצד לעצב, לפתח ולתחזק את האתר המקצועי שלך תוך זמן קצר.</p>
   </div>
   </div
   
   
   
   
   
   instagram viewer
   
   >
   <div class="מיכל-כתום">
   <div class="תוֹכֶן">
   <h2>מה אנחנו עושים</h2>
   <ע>אנו נותנים לך את הכלים לפיתוח אתרים ופתרונות ייחודיים עבור הלקוחות שלך. אנו מספקים גם הדרכה עבור
    תחזוקה ונושאים אחרים הקשורים לאתר.</p>
   </div>
   </div>
   <div class="מיכל-לבן">
   <div class="תוֹכֶן">
   <h2>עלינו</h2>
   <ע>אנחנו עסק קטן הפועל ממלבורן, אוסטרליה. החללים שלנו מעוצבים באופן ייחודי כך שגם לקוחות יכולים
    לבקר אותנו באופן אישי.</p>
   </div>
   </div>
   <div class="כותרת תחתונה של מיכל כהה">
   <ע>זכויות יוצרים 2022</p>
   </div>

3. הוסף קצת סטיילינג לאפליקציית Angular על ידי הוספת קצת CSS ל- app.component.css קוֹבֶץ:

   * {
    משפחת גופן: "אריאל", פונט סאנס סריף;
   }
   .כּוֹתֶרֶת {
    ריפוד: 30px 50px;
   }
   .footer {
    ריפוד: 5px 50px;
    יישור טקסט: מרכז;
   }
   .מיכל-כהה {
    צבע רקע: #202C39;
    צבע לבן;
    תצוגה: flex;
    align-items: center;
   }
   .מיכל-כתום {
    צבע רקע: #FFD091;
    צֶבַע: #202C39;
   }
   .מיכל-לבן {
    צבע רקע: עשן לבן;
    צֶבַע: #202C39;
   }
   .תוֹכֶן {
    ריפוד: 100px 25%;
    תצוגה: flex;
    flex-direction: עמודה;
    גובה קו: 2rem;
   גודל גופן: 1.2em;
    align-items: center;
    יישור טקסט: מרכז;
   }

4. הוסף קצת סטיילינג לאפליקציית Angular הכוללת styles.css:

   גוף {
    שוליים: 0;
    ריפוד: 0;
   }

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

   לשרת

6. המתן עד שהקוד שלך יקמפל, ובקר http://localhost: 4200/ בדפדפן אינטרנט כדי להציג את האפליקציה שלך.
7. בתוך ה .browserslistrc הסר את iOS safari גרסה 15.2-15.3. זה ימנע שגיאות תאימות להופיע במסוף בעת בניית הפרויקט.

   גרסת Chrome 1 האחרונה
   גרסת Firefox 1 האחרונה
   2 הגרסאות העיקריות של Edge האחרונות
   2 הגרסאות העיקריות האחרונות של Safari
   2 הגרסאות העיקריות האחרונות של iOS
   Firefox ESR
   לֹאios_saf 15.2-15.3
   לֹאספארי 15.2-15.3

8. בנה את הקוד שלך באמצעות ה לבנות פקודה בטרמינל:

   לבנות

9. בתוך ה .gitignore קובץ, הסר או הערה /dist קַו. הסרתו תבטיח את dist התיקיה נמצאת בקבוצת הקבצים שאתה דוחף למאגר GitHub שלך.

   # /dist

כיצד לדחוף את הקוד הזוויתי שלך ל-GitHub

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

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

1. צור מאגר חדש ב- GitHub. אתה יכול לעשות זאת על ידי כניסה ל- GitHub ולחיצה על חָדָשׁ.
2. הזן את הפרטים עבור המאגר החדש שלך. תן לזה שם כגון "netlify-app", ותיאור. אין לאתחל את המאגר עם קובץ README, קובץ .gitignore או רישיון.
3. במסוף במחשב שלך, נווט אל הספרייה שבה אחסנת את אפליקציית Angular שלך. הפעל את הפקודות הבאות כדי לאתחל את התיקיה שלך כמאגר git:

   git init
   git add .
   git לְבַצֵעַ -מ "ראשון לְבַצֵעַ"

4. דחוף את הקוד שבתיקייה זו למאגר המרוחק החדש שיצרת ב- GitHub. עקוב אחרי git remote הוסף מקור, git branch, ו דחיפה פקודות שסופקו על ידי GitHub בדף המאגר המרוחק שלך:

   git remote הוסף מקור <קישור לריפו של GitHub שלך>
   git branch -M main
   git push -u origin main

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

כיצד להשתמש ב-Netlify כדי לארח את הקוד שלך

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

אתה יכול להגדיר את כל ההגדרות הללו על ידי ביצוע שלבי התצורה בעת יצירת אתר חדש:

1. היכנס או הירשם ל Netlify. אתה יכול לעשות זאת באמצעות אישורי GitHub שלך.
2. ממרכז השליטה הראשי ודף רשימת האתרים, הרחב הוסף אתר חדש, ובחר ייבוא ​​פרויקט קיים.
3. בחר GitHub.
4. לחץ על הגדר את Netlify ב-GitHub.
5. לחץ על להתקין.
6. Netlify תציג רשימה של מאגרי GitHub שלך. בחר את זה שאתה רוצה לארח. לדוגמה, אם קראת למאגר שלך "netlify-app", בחר "netlify-app" מהרשימה.
7. במסך התצורה, השאר את בעלים, סניף לפרוס, ו ספריית בסיס שדות בערכי ברירת המחדל שלהם. אם היית מפרסם סניף ספציפי, כגון סניף "הפקה" נפרד, אתה יכול להוסיף את זה לתוך סניף לפרוס שדה. לשנות את ה פקודה לבנות שדה ל"ng build". בשביל ה פרסם ספרייה שדה, הקלד dist/. אם אינך יודע מהו שם הפרויקט, תוכל לנווט לתיקיית dist של הפרויקט שלך כדי למצוא אותו שם. לדוגמה, "dist/netlify-app".
8. לחץ על פריסת אתר.
9. המתן עד להשלמת הפריסה. זה עשוי להימשך מספר דקות, וייתכן שתצטרך לרענן את הדף. אם הכל ילך כשורה, תוכל לראות את הפריסה המוצלחת ברשימת הפריסות. לחץ על הפריסה שפורסמה שלך, למשל, הפקה: main@HEAD.
10. הקלק על ה פריסת ייצור פתוחה לַחְצָן.
11. כעת תוכל להציג את האתר שלך בכרטיסייה אחרת, באמצעות כתובת אתר בפורמט של ‎.netlify.app. אם אתה מארח אתר עם מספר הפניות מחדש, ייתכן שלא תוכל להפנות לדפים אחרים. במקרה זה, יש דרך לעשות זאת תקן הפניה מחדש כושלת ב-Netlify. אם אתה רוצה, אתה יכול גם שנה את שם הדומיין החינמי שלך.

אירוח את האתר שלך באמצעות GitHub ו-Netlify

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

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