הגדרת סביבת פיתוח מקומית ל־WordPress עם Docker, Xdebug ו־PhpStorm

בעזרת Docker Compose, Xdebug ו־PhpStorm, תוכל ליצור סביבת פיתוח מקומית הניתנת לשחזור, מבודדת וקלה לניהול, המשקפת שרת של אתר פעיל, ובכך לשפר את האיכות של פרויקטי ה־WordPress שלך.

שלום למפתחי WordPress ולמשתמשים מתקדמים! היום אני נרגש לשתף מדריך מקיף אך פשוט להגדרת סביבת פיתוח מקומית ל־WordPress באמצעות Docker Compose. מאחר שהצטרפתי לאחרונה לצוות הדינמי ב־OnTheGoSystems, החלטתי להביא איתי את אזור הנוחות שלי, וזה בדיוק מה שההגדרה הזו עושה.

המטרה הייתה פשוטה: לפתח סביבה שבה תהיה לי שליטה מדויקת על כלי הפיתוח שלי, תוך שילוב Xdebug ו־WP-CLI עם תמונת ה־Docker הרשמית של WordPress. ההגדרה הזו לא נועדה להמציא מחדש את הגלגל, אלא להתאים אותו אישית להעדפות ולסגנונות עבודה אישיים. אני מקווה שהמדריך הזה יועיל לך בהגדרת סביבה דומה, וישפר את המסע שלך בפיתוח ב־WordPress.

דרישות מוקדמות

כדי להפיק את המרב מהמדריך הזה, תצטרך להתקין את התלויות הבאות:

1. Docker: נשתמש ב־Docker ככלי העיקרי שלנו ליצירה, פריסה והפעלה של אפליקציות באמצעות קונטיינרים. הוא מאפשר לנו לארוז אפליקציה עם כל החלקים הדרושים לה בתוך קונטיינר, ולשלוח אותה כחבילה אחת. מה שהופך את Docker לעוצמתי עוד יותר הוא ההבטחה שלו לשליטה מדויקת, המאפשרת לנו להגדיר כל היבט בהגדרת האפליקציה שלנו במדויק. שליטה זו מסייעת ביצירת סביבת פיתוח שמתאימה בדיוק לצרכים שלנו.
2. Xdebug Chrome Extension: תוסף דפדפן זה יעזור לנו לעבור על הקוד שלנו, לאתר באגים ולשפר את האיכות הכוללת של פרויקטי ה־WordPress שלנו.
3. PhpStorm: סביבת פיתוח משולבת (IDE) חכמה ומלאה ל־PHP שפותחה על ידי JetBrains. היא מספקת עורך עבור PHP, HTML ו־JavaScript עם ניתוח קוד בזמן אמת ושכתוב קוד (refactoring) אוטומטי לשפות אלו.

למה Docker, Xdebug ו־PhpStorm?

המטרה שלנו היא להקים סביבת פיתוח מקומית ל־WordPress שהיא מבודדת, ניתנת לשחזור וקלה לניהול. Docker מהווה את עמוד השדרה של ההגדרה הזו, ומספק את התשתית להכלה ולניהול של האפליקציה שלנו. Xdebug ו־PhpStorm הם החלקים המשלימים בפאזל הזה, המציעים יכולות משופרות לפיתוח וניפוי שגיאות בקוד PHP.

המסע שלנו יתחיל ביצירת קובץ Dockerfile שמרחיב את תמונת ה־Docker הרשמית של WordPress. נשפר את התמונה הזו על ידי שילוב Xdebug ו־WP-CLI, כלים חיוניים במשימות הפיתוח וניפוי השגיאות שלנו ב־WordPress.

לאחר מכן, ננסח קובץ Docker Compose כדי לתזמר שני שירותי מפתח: WordPress ו־MySQL. ותאמין או לא, זה בעצם הכל!

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

מדריך שלב אחר שלב

שלב 1: ה־Dockerfile

המסע שלנו מתחיל ביצירת Dockerfile חדש. קובץ זה מנחה את Docker כיצד לבנות את התמונה שלנו. הנה ההגדרה הבסיסית שאיתה אני מתחיל בדרך כלל:

# Use the official WordPress image as a parent image
FROM wordpress:latest

# Install Xdebug
RUN pecl install xdebug 

# Install WP-CLI
RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar && \
    chmod +x wp-cli.phar && \
    mv wp-cli.phar /usr/local/bin/wp

# Copy xdebug.ini into the container
COPY xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini

ב־Dockerfile הזה, אנו מתחילים מתמונת ה־WordPress הרשמית. לאחר מכן אנו מתקינים את Xdebug ו־WP-CLI בנפרד למען בהירות וקלות תחזוקה. קובץ התצורה של Xdebug (xdebug.ini) מועתק לספרייה המתאימה בתוך הקונטיינר. זה מהווה את הבסיס להגדרה המועדפת עלי עבור סביבת פיתוח מקומית ל־WordPress.

שלב 2: קובץ התצורה של Xdebug (xdebug.ini)

כעת, לאחר שהתקנו את Xdebug בתמונת ה־Docker שלנו, עלינו להגדיר אותו כך שיעבוד בסביבת הפיתוח המקומית שלנו. זה כרוך ביצירת קובץ xdebug.ini עם ההגדרות הבאות:

ini
zend_extension=xdebug
xdebug.mode=debug
xdebug.client_port=9003
xdebug.start_with_request=yes

הגדרות אלו מפעילות את הרחבת ה־Xdebug, מגדירות אותה להתחיל ניפוי שגיאות בכל בקשה, ומגדירות את יציאת הלקוח (port) שאליה היא צריכה להתחבר (במקרה זה, 9003). אולי שמת לב שעדיין לא ציינו client_host, אבל אל דאגה, זה ייכנס לתמונה בקרוב מאוד בתהליך ההגדרה שלנו.

שלב 3: קובץ ה־Docker Compose

לאחר מכן, ניצור קובץ docker-compose.yml שמגדיר את שירותי ה־WordPress וה־MySQL שלנו:

yaml
version: '3'
services:
  # MySQL Service
  mysql:
    image: mysql:latest
    container_name: mysql_container
    restart: always
    volumes:
      - db_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
  
  # WordPress Service
  wordpress:
    depends_on: 
      - mysql
    image: wordpress:latest
    container_name: wp_container
    volumes:
      - ./wp_data:/var/www/html
    environment:
      WORDPRESS_DB_HOST: mysql
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DEBUG: 1
      XDEBUG_CONFIG: client_host=host.docker.internal
    ports:
      - "8000:8000"

volumes:
  db_data:

בקובץ זה, הגדרנו שני שירותים – MySQL ו־WordPress. לשני השירותים הללו יש שמות קונטיינרים ייחודיים, להתייחסות ולניהול קלים יותר.

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

שירות ה־MySQL טוען אמצעי אחסון (volume) של Docker (db_data), מה שמבטיח אחסון מתמיד גם אם הקונטיינר נמחק. עבור שירות ה־WordPress, אנו טוענים ספרייה מקומית (./wp_data) אל הקונטיינר. המשמעות היא שכל שינוי בקבצי ה־WordPress במערכת המקומית שלנו ישתקף בקונטיינר.

הוספנו שני משתני סביבה נוספים עבור שירות ה־WordPress – WORDPRESS_DEBUG כדי להפעיל את ניפוי השגיאות של WordPress ו־XDEBUG_CONFIG כדי לציין את המארח (client host) עבור Xdebug. ה־client_host מוגדר ל־host.docker.internal, שהוא שם DNS מיוחד שמנתב לכתובת ה־IP הפנימית של המארח, ומאפשר ל־Xdebug לתקשר עם ה־IDE שלנו במארח.

שים לב שההגדרה client_host מותאמת עבור Windows ו־macOS. עבור Linux, חלופה נפוצה היא להחליף את host.docker.internal בכתובת ה־IP האמיתית של המחשב שלך, שאותה ניתן להשיג דרך פקודת המסוף ip addr show.

שלב 4: הפעלת סביבת הפיתוח המקומית ל־WordPress

לאחר שה־Dockerfile, קובץ התצורה של Xdebug וקובץ ה־Docker Compose שלך מוכנים, הגיע הזמן להפיח חיים בסביבת הפיתוח המקומית שלך ל־WordPress.

כדי לעשות זאת, פשוט נווט לספרייה המכילה את קובץ ה־Docker Compose שלך במסוף, והרץ את הפקודה הבאה:

bash
docker-compose up -d

פקודה זו תנחה את Docker להפעיל את השירותים שלך ברקע.

לאחר ביצוע מוצלח, יהיה לך אתר WordPress שפועל על המחשב המקומי שלך, נגיש דרך http://localhost:8000. כל שינוי שתבצע בקבצי ה־PHP של WordPress ישתקף כעת באתר זה, מה שמציע דרך קלה ויעילה לפתח ולנפות שגיאות באפליקציית ה־WordPress שלך.

בנוסף, שירות ה־MySQL שלך יפעל גם הוא, ויהיה נגיש ביציאה 3306. זה מספק מסד נתונים MySQL מתפקד במלואו עבור אפליקציית ה־WordPress שלך, ומשכפל סביבה מציאותית לצרכי הפיתוח שלך.

שלב 4.5: שלב בונוס – הוספת הקובץ phpinfo.php

לאלו שרוצים להתעמק קצת יותר בתצורת ה־PHP שלהם, נוכל להכניס קובץ phpinfo.php אל תמונת ה־Docker שלנו. בעת הגישה אליו, קובץ זה יציג סקירה מקיפה של הגדרות ה־PHP שלך.
כדי להוסיף את הקובץ phpinfo.php, תצטרך תחילה ליצור אותו באותה ספרייה של ה־Dockerfile שלך. הקובץ צריך להכיל את קוד ה־PHP הבא:

<?php phpinfo(); ?>

לאחר מכן, הוסף את השורה הבאה ל־Dockerfile שלך:

# Bonus: Copy phpinfo.php into the container
COPY phpinfo.php /var/www/html/phpinfo.php

פקודה זו תעתיק את הקובץ phpinfo.php לספריית השורש של WordPress בתוך תמונת ה־Docker.

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

bash
docker-compose down
docker-compose up -d --build

הפקודה docker-compose down עוצרת ומסירה את קונטיינרי ה־Docker הנוכחיים שלך. לאחר מכן, הפקודה docker-compose up -d –build בונה מחדש את תמונת ה־Docker עם הקובץ phpinfo.php שנוסף לאחרונה, ומפעילה מחדש את שירותי ה־WordPress וה־MySQL שלך ברקע.
כעת תוכל לגשת לקובץ phpinfo.php על ידי ניווט אל http://localhost:8000/phpinfo.php בדפדפן האינטרנט שלך. כאן, תראה עמוד מפורט המתאר את תצורת ה־PHP שלך, שיכול להוות משאב רב ערך לניפוי שגיאות ולאימות.

שלב 5: התחלת ניפוי שגיאות

כעת, לאחר שהגדרת את סביבת הפיתוח המקומית ל־WordPress עם Docker, Xdebug ו־PhpStorm, תוכל להתחיל לנפות שגיאות באתר ה־WordPress שלך. הנה סקירה מהירה כיצד להתחיל:

1. הגדרת Xdebug ב־PhpStorm: פתח את PhpStorm ועבור אל File → Settings (Preferences ב־Mac) → Languages & Frameworks → PHP → Debug. תחת המקטע Xdebug, ודא שההגדרה Debug port מוגדרת ל־9003 ושהאפשרות Can accept external connections מסומנת.
2. הוספת שרת PhpStorm: נווט אל PHP → Servers. הוסף שרת חדש עם השם wordpress והמארח localhost. הגדר את היציאה ל־8000. ודא שמיפויי הנתיבים מוגדרים כהלכה – הנתיב המוחלט בשרת עבור התיקייה wp_data צריך להיות /var/www/html.
3. התקנת תוסף העזר של Xdebug: התקן את תוסף העזר של Xdebug עבור Google Chrome. לאחר ההתקנה, לחץ על סמל החרק (bug) והגדר את מפתח ה־IDE ל־PHPSTORM.
4. התחלת האזנה לחיבורי PHP Debug: ב־PhpStorm, לחץ על סמל החרק בפינה הימנית העליונה כדי להתחיל להאזין לחיבורי PHP Debug.
5. התחלת ניפוי שגיאות: לאחר השלמת השלבים הקודמים, אתה מוכן להתחיל לנפות שגיאות באפליקציית ה־WordPress שלך. פשוט הגדר את נקודות העצירה (breakpoints) שלך ב־PhpStorm לפי הצורך, ולאחר מכן טען מחדש את האתר שלך. ניפוי שגיאות מהנה!

סיכום

כשאנו מסיימים את המדריך הזה, אני מקווה שהוא יהפוך למשאב בעל ערך עבורך כפי שהיה עבורי במסע שלי. היכולת להתאים אישית את ההגדרה הזו – כפי שעשינו על ידי הוספת הקובץ phpinfo.php – פותחת אינספור אפשרויות, והופכת את תהליך הפיתוח שלנו לחזק ויעיל יותר. כל הקוד זמין במאגר GitHub הזה. אל תהסס למשוך אותו, לנסות אותו ולהציע שיפורים!

אני אישית משתמש במערכת הפעלה Ubuntu, אבל היופי בהגדרה הזו הוא שבזכות Docker זה לא משנה! הודות לעובדה ש־Docker יכול לרוץ על כל מערכת הפעלה באותה מידה, בין אם אתה מעדיף macOS, Windows או Linux, ההגדרה והשימוש זהים!

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

קידוד מהנה, ובוא נמשיך ליצור חוויות WordPress מדהימות ביחד!