יצירה ופריסה של יישום מסילות להרוקו



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

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





להלן תמונת המצב של יישום המסילה (הפרוס ב- Heroku כאן )



בוא נתחיל ביצירת יישום Rails זה. אני מניח שכבר התקנת את Ruby and Rails. וודא שיש לך Ruby 2.0 ו- Rails 4.2.2. אתה יכול לבדוק את הגרסה משורת הפקודה.

אורך מערך javascript

הערה: נשתמש ברובי 2.0 ובמסילה 4.2.2. אם יש לך כמה גרסאות שונות של Ruby and Rails, ייתכן שהצעדים המוצגים בפוסט זה לא יעבדו עבורך.



יצירת הפרויקט:

נקרא לפרויקט שלנו כאתר. כדי ליצור את הפרויקט השתמש בפקודה Rails אתר חדש

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

כעת תראה תיקיית אתרים מתחת לכונן C: שלך (המיקום ממנו ביצענו את הפקודה החדשה של Rails באתר). בואו נפתח את תיקיית האתר באיזה IDE. יש לי סוגרים IDE של אדובי. אתה יכול להשתמש בכל אחד אחר כי זה לא משנה.

מבנה הפרויקט:

מבנה הפרויקט שנוצר ייראה כמו להלן

למרות שלא כתבנו שום קוד אתה יכול להריץ את יישום האתר כרגע. להפעלת יישום האתר, בצע את הפקודה Rails s מתיקיית האתר כמוצג להלן

כפי שניתן לראות בתצלום המצוין לעיל שאפליקציית האתר שלנו נפרסה אליוhttp: // localhost: 3000

תוכל לראות את המסך למטה בגישה לכתובת האתרhttp: // localhost: 3000

אבל אנחנו רוצים להציג את הדף הראשי של היישום שלנו לגבי גישה לכתובת האתרhttp: // localhost: 3000 /.בשביל זה בואו ליצור דף index.html תחת התיקיה הציבורית של פרויקט האתר שלנו.

הערה: מסילות ישרתו באופן אוטומטי את דף index.html בגישה לכתובת ה- roothttp: // localhost: 3000

לפי שעה יש לנו רק שורה אחת בעמוד index.html.

בואו ניגש לכתובת ה- URL הבסיסיתhttp: // localhost: 3000

עכשיו, בואו נכניס קצת חיים לדף index.html שלנו על ידי הוספת תמונות - JS ו- CSS מגניב. נשתמש בנושא גווני אפור החל מה- bootstrap.

ערכת נושא אתחול Bootstrap -

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

אתה יכול להוריד נושא זה מ http://startbootstrap.com/template-overviews/grayscale/

הורד את ערכת הנושא בגווני אפור והעתק את ה- CSS, font-awesome, fonts, img, JS ו- index.html לספרייה הציבורית של פרויקט האתר. להלן תמונת המצב של הפרויקט לאחר הוספת CSS, JS, פונטים, תיקיית תמונות ודף index.html בספריה הציבורית של פרויקט האתר.

בואו ננהל את פרויקט האתר שלנו עכשיו:

בהפעלת הפרויקט יוצג לכם דף נושא בגווני אפור נראים למראה.

נשנה את דף index.html (במדריך הציבורי של פרויקט האתר) כדי להעניק לו מראה מקצועי.

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

אתה יכול לשנות את index.html ואת גווני האפור.CSS כרצונך. כעת, אנו מוכנים לפרוס את יישום האתר שלנו להרוקו.

דחיפת הקוד ל- Github:

לפני פריסת היישום להרוקו, עלינו לדחוף את הקוד שלנו למאגר Github מרוחק. בשביל זה אתה צריך חשבון Github. אם אין לך חשבון Github, עבור וצור חשבון ב- www.github.com .

אתה צריך גם להתקין את Github ב- Windows שלך. הורד את ה- Github ל- Windows מ- https://windows.github.com/ .

לאחר שהורדת והתקנת את ה- Github במחשב שלך, פתח את אפליקציית Github והגדר את אישורי ה- Github שלך ובחר את מעטפת Git Bash כמעטפת ברירת המחדל שלך (תוכל לבחור כל אפשרות אחרת גם כרצונך) ואז לשמור את השינויים.

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

תן שם למאגר שלך (במקרה זה קראנו לו railtoheroku) ולחץ על צור קישור מאגר כמוצג להלן.

Github יספק את כתובת האתר המרוחקת ( https://github.com/eMahtab/railtoheroku.git במקרה זה) למאגר railtoheroku שיהיה צורך בעת דחיפת הקוד מהמכונה המקומית ל- Github.

כעת, אנו מוכנים לדחוף את קוד פרויקט האתר שלנו אל Github. בצע את השלבים הבאים כדי לדחוף את הקוד ל- Github.

פתח את מעטפת Git והשתמש בפקודה Git init כדי לאתחל את ספריית האתר כמוצג להלן:

כעת הוסף את כל הקבצים בספריית האתר תחת בקרת גרסאות על ידי ביצוע Git add.

התחייב לכל הקבצים על ידי ביצוע Git commit - 'התחייבות סופית'

מה זה צ'אר בג'אווה

הוסף את המאגר המרוחק כמוצג להלן:

עכשיו השלב האחרון שלמעשה ידחוף את הקוד למאגר Github:

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

פריסת היישום ל- Heroku:

צור חשבון הרוקו בכתובת https://www.heroku.com/

הערה : עלינו לבצע כמה שינויים לפריסת היישום להרוקו. Heroku אינו תומך ב- SqLite 3, במקום זאת יש לו בסיס נתונים של PostgreSQL. אז עלינו להסיר תלות sqlite3 מקובץ gem. הרוקו דורש פנינה של rails_12factor, המשמשת את הרוקו לשרת נכסים סטטיים כמו תמונות וגיליונות סגנונות. שני השינויים הנדרשים ב- Gemfile מסוכמים להלן:

הסר את פנינת השורה 'sqlite3' מ- Gemfile

הוסף את השורות הבאות ל- Gemfile

קבוצה: פיתוח,: מבחן לעשות #<<<< not in production gem 'sqlite3' end group :production do gem 'pg', '0.17.1' gem 'rails_12factor', '0.0.2' end

בואו לבדוק אם הכל עובד בסדר לאחר ביצוע השינויים ב- Gemfile. שמור את קובץ ה- Gemfile ורץ התקנת חבילה עם דגל מיוחד (ללא ייצור) כדי למנוע התקנה מקומית של אבני חן כלשהן.

בואו לבצע את השינויים שבוצעו ב- Gemfile במאגר מרוחק ב- Github:

לחץ על השינויים במאגר Github המרוחק:

יצירת יישום חדש בהרוקו:

היכנס להרוקו וצר אפליקציה חדשה. שמתי את האפליקציה שלי railtoheroku. אתה יכול לתת לזה שם מה שאתה אוהב. לחץ על צור אפליקציה כדי ליצור את האפליקציה בשם.

חיבור מאגר Github לאפליקציית Heroku:

השלב הבא הוא לקשר את מאגר Github שלך ל- Heroku.

להלן חיברנו את railtoheroku של מאגר Github שלנו

לאחר שנחבר את מאגר Github שלנו ל- Heroku, אנו מוכנים לפרוס את היישום שלנו. כדי לפרוס את היישום גלול מטה לאפשרות פריסה ידנית ולחץ על אפשרות פריסת סניף.

פריסת היישום:

לאחר שתלחץ על Deploy Branch, הרוקו יתחיל להתקין את אבני החן של Gemfile בהפקה:

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

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

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

יש לך שאלה עבורנו? אנא הזכיר זאת בסעיף ההערות ונחזור אליך.

פוסטים קשורים:

ניתוח קבצי XML באמצעות SAX Parser