תהליך פיתוח נכון ויעיל בשרת מקומי

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

התקנת סביבת פיתוח מקומית

התקנת סביבת פיתוח מקומית הוא הצעד הראשון והמחייב.
כיום יש מספר סביבות פיתוח שדי שולטות בשוק: Wamp, Xampp ו-Lamp.
כמובן ששלושתן מריצות Apache, MySQL ו-PHP.
Lamp מיועדת עבור לינוקס, Wamp עבור חלונות ו-Xampp תומכת בלינוקס, חלונות ו-OS X.
אני ממליץ על Xampp. סביבה נוחה, עדכנית ומספקת את הסחורה היטב 🙂

הקמת Virtual Host עבור כל אתר

Virtual Host מאפשר לנו לשייך פרויקט אשר נמצא בסביבת הפיתוח לדומיין כלשהו באופן מלאכותי ומקומי בלבד(!), גם הוא לא בחזקתכם ולא בניהולכם, מה שיעזור מאוד בתהליך הפיתוח, במיוחד כאשר מפתחים אתר חדש לאתר שקיים והדומיין ידוע מראש.
חשוב לציין כי בעת פיתוח אתר וורדפרס, המערכת ותוספים רבים עלולים לשמור את הכתובת המלאה של האתר במסד הנתונים ובמידה ועושים זאת ללא שימוש ב-Virtual Host תהיה בעיה כאשר האתר יעלה לכתובתו האמיתית, מדוע לא למנוע זאת?

על מנת להגדיר Virtual Host נבצע את הצעדים הבאים:

הגדרת הכתובת בקובץ hosts

קובץ ה-hosts מאפשר לנו לשייך דומיין לכתוב IP.
כתובת ה-IP של השרת המקומי שלכם היא: 127.0.0.1 ולכן פתחו את קובץ ה-host אשר נמצא בנתיב הבא (פתחו אותו כ-Administrator):

C:\Windows\System32\drivers\etc\hosts

והכניסו את הכתובת הבאה:

127.0.0.1       localhost
127.0.0.1       local1.com

כעת שמרו את הקובץ.

שיוך תיקיית הפרויקט לדומיין

בהנחה ש-Xampp מותקן על מחשבכם, פתחו את הקובץ בנתיב הבא:

C:\xampp\apache\conf\extra\httpd-vhosts.conf

כעת, הכניסו את השורות הבאות:

<VirtualHost *:80>
    DocumentRoot C:/xampp/htdocs/local1/
    ServerName www.local1.com
</VirtualHost>

שמרו את הקובץ ובצעו הפעלה מחדש של ה-Xampp.
כעת, גלישה אל הכתובת www.local1.com תראה לכם את הפרויקט שלכם 🙂

שינוי כתובת הדומיין של אתר וורדפרס

פיתחתם את האתר ולא השתמשתם ב-Virtual Host או שפיתחתם את האתר בכתובת זמנית?
על מנת לעדכן את כתובת האתר האמיתית לאחר העלייה לפרודקשן, אני ממליץ להשתמש בתוסף הבא.
חשוב: יש לבצע גיבוי מלא לפני התקנת התוסף והפעלתו.

רענון השינויים מבלי לרענן, רגע..מה?

כן, הגיע הזמן לעזוב את כפתור ה-F5 לנפשו.
הכירו את Live.js, קובץ js שירענן את העמוד בכל שינוי בקבצי CSS/JS בפרויקט שלכם, באופן עצמאי ומיידי לאחר ביצוע שמירת הקובץ.
התקנת התענוג הזה כרוכה בהכללת הסקריפט שלהם ב-HEAD של האתר:

<script type="text/javascript" src="http://livejs.com/live.js"></script>

השפעת השינויים על קבצים מקומיים

מי מאיתנו לא מכיר את ההליך הקבוע בו אנו מפתחים אתר באופן מקומי, מבצעים שינוי מסוים ב-DevTool, אוהבים את התוצאה ומיד מדלגים אל הקובץ, עורכים את אותו השינוי ושומרים. וכך חוזר חלילה על כל שינוי.
לא חבל? אותי לימדו שזמן זה כסף ולכן:
פתחו את הכלי וכנסו ללשונית Source, בתפריט מצד שמאל חפשו את התיקייה אותה אתם רוצים להוסיף ל-WorkSpace, לחיצה ימנית ובחרו ב-"Add folder to workspace". מיד תתבקשו לתת אישור.
כעת, כאשר אתם מעוניינים לעשות שינוי כלשהו, בחרו בקובץ הרצוי מצד שמאל, ערכו את השינוי ותשמרו (Ctrl + s), רעננו (במידה שוויתרתם על התענוג בסעיף הקודם) והתוצאה לפניכם.
דרך נוספת להגיע למיקום המדויק של השורה הנדרשת היא כאשר אתם נמצאים בלשונית "Elemets" ורואים את ה-Style של האלמנט הרצוי, לחצו על שם הקובץ שנמצא בפינה הימנית והנה, אתם שם 🙂

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


5 תגובות בנושא “תהליך פיתוח נכון ויעיל בשרת מקומי”

  1. מי שמשתמש בwampserver יכול לחסוך לעצמו את העניין ולעשות זאת ישירות מהממשק של wampserver.

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *