การตั้งค่าสภาพแวดล้อมการพัฒนา 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 พร้อมการวิเคราะห์โค้ดแบบเรียลไทม์และการปรับโครงสร้างโค้ดอัตโนมัติสำหรับภาษาเหล่านี้

ทำไมต้องใช้ 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: ติดตั้งส่วนขยายตัวช่วย Xdebug สำหรับ Google Chrome เมื่อติดตั้งแล้ว ให้คลิกที่ไอคอนรูปแมลงและตั้งค่าคีย์ IDE เป็น PHPSTORM
4. เริ่มรอรับการเชื่อมต่อ PHP Debug: ใน PhpStorm ให้คลิกที่ไอคอน แมลง ที่มุมขวาบนเพื่อเริ่มรอรับการเชื่อมต่อ PHP Debug
5. เริ่มการดีบัก: เมื่อทำตามขั้นตอนก่อนหน้าเสร็จสิ้น คุณก็พร้อมที่จะเริ่มดีบักแอปพลิเคชัน WordPress ของคุณแล้ว เพียงกำหนดจุดหยุด (breakpoints) ใน PhpStorm ตามต้องการ จากนั้นโหลดเว็บไซต์ของคุณใหม่ ขอให้สนุกกับการดีบัก!

บทสรุป

ในตอนท้ายของบทช่วยสอนนี้ ผมหวังว่ามันจะเป็นทรัพยากรที่มีค่าสำหรับคุณเช่นเดียวกับที่มันเป็นประโยชน์ต่อผมในเส้นทางนี้ ความสามารถในการปรับแต่งการตั้งค่านี้ – เช่นเดียวกับที่เราทำโดยการเพิ่มไฟล์ phpinfo.php – ช่วยเปิดความเป็นไปได้มากมาย ทำให้กระบวนการพัฒนาของเราแข็งแกร่งและมีประสิทธิภาพยิ่งขึ้น โค้ดทั้งหมดมีอยู่ใน ที่เก็บ GitHub นี้ อย่าลังเลที่จะดึงไปใช้ ทดลอง และเสนอแนะการปรับปรุง!

โดยส่วนตัวแล้วผมใช้ระบบปฏิบัติการ Ubuntu แต่ข้อดีของการตั้งค่านี้คือต้องขอบคุณ Docker ที่ทำให้ระบบปฏิบัติการไม่ใช่ปัญหา! ด้วยความจริงที่ว่า Docker สามารถทำงานบนระบบปฏิบัติการใดก็ได้อย่างเท่าเทียมกัน ไม่ว่าคุณจะชอบ macOS, Windows หรือ Linux การตั้งค่าและการใช้งานก็เหมือนกัน!

ขอบคุณที่ร่วมเดินทางไปกับผมในคำแนะนำนี้ ผมหวังว่าจะได้รับฟังประสบการณ์ของคุณหรือข้อเสนอแนะใด ๆ ที่คุณอาจมีเพื่อปรับปรุงการตั้งค่านี้ให้ดียิ่งขึ้น โปรดจำไว้ว่าการเติบโตนั้นเกิดขึ้นได้จากการแบ่งปันความรู้และจิตวิญญาณแห่งความร่วมมือ

ขอให้สนุกกับการเขียนโค้ด และมาร่วมกันสร้างประสบการณ์ WordPress ที่ยอดเยี่ยมต่อไป!