إعداد بيئة تطوير محلية لـ 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: ستساعدنا إضافة المتصفح هذه في تتبع التعليمات البرمجية خطوة بخطوة، واكتشاف الأخطاء، وتحسين الجودة العامة لمشاريع WordPress الخاصة بنا.
3. PhpStorm: بيئة تطوير متكاملة (IDE) ذكية وكاملة الميزات لـ PHP طورتها شركة JetBrains. توفر محرر نصوص لـ PHP وHTML وJavaScript مع تحليل فوري للتعليمات البرمجية وإعادة هيكلة تلقائية لهذه اللغات.

لماذا 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، وتضبطها لبدء تصحيح الأخطاء مع كل طلب، وتحدد منفذ العميل الذي يجب أن تتصل به (في هذه الحالة، 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 بتركيب وحدة تخزين Docker (db_data)، مما يضمن تخزيناً دائماً حتى إذا تم حذف الحاوية. بالنسبة لخدمة WordPress، نقوم بتركيب دليل محلي (./wp_data) في الحاوية. هذا يعني أن أي تغييرات في ملفات WordPress على نظامنا المحلي ستنعكس في الحاوية.

لقد أضفنا متغيري بيئة إضافيين لخدمة WordPress – وهما WORDPRESS_DEBUG لتمكين تصحيح أخطاء WordPress، وXDEBUG_CONFIG لتحديد المضيف العميل لـ 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 helper: قم بتثبيت إضافة Xdebug helper لمتصفح Google Chrome. بمجرد تثبيتها، انقر على أيقونة الحشرة (bug) واضبط مفتاح IDE على PHPSTORM.
4. بدء الاستماع لاتصالات تصحيح أخطاء PHP: في PhpStorm، انقر على أيقونة الحشرة (bug) في الزاوية العلوية اليمنى لبدء الاستماع لاتصالات تصحيح أخطاء PHP.
5. بدء تصحيح الأخطاء: مع اكتمال الخطوات السابقة، أنت جاهز لبدء تصحيح أخطاء تطبيق WordPress الخاص بك. ما عليك سوى تعيين نقاط التوقف (breakpoints) في PhpStorm حسب الحاجة، ثم إعادة تحميل موقعك ببساطة. نتمنى لك تصحيح أخطاء موفق!

الخلاصة

في ختام هذا الدرس التعليمي، آمل أن يصبح مورداً قيماً لك كما كان بالنسبة لي في رحلتي. إن القدرة على تخصيص هذا الإعداد – كما فعلنا بإضافة ملف phpinfo.php – تفتح عدداً لا يحصى من الاحتمالات، مما يجعل عملية التطوير لدينا أكثر قوة وكفاءة. جميع التعليمات البرمجية متاحة في مستودع GitHub هذا. لا تتردد في سحبها وتجربتها واقتراح تحسينات!

أنا شخصياً أستخدم نظام التشغيل Ubuntu، ولكن جمال هذا الإعداد يكمن في أنه بفضل Docker، لا يهم ذلك! بفضل حقيقة أن Docker يمكن أن يعمل على أي نظام تشغيل بشكل متساوٍ، سواء كنت تفضل macOS أو Windows أو Linux، فإن الإعداد والاستخدام هو نفسه!

شكراً لمرافقتي في هذا الشرح التفصيلي. آمل أن أسمع منك عن تجاربك أو أي اقتراحات قد تكون لديك لزيادة تحسين هذا الإعداد. تذكر أن النمو يزدهر بالمعرفة المشتركة وروح التعاون.

نتمنى لك برمجة ممتعة، ودعنا نواصل إنشاء تجارب WordPress مذهلة معاً!