WPML
튜토리얼

Docker, Xdebug 및 PhpStorm을 사용하여 로컬 WordPress 개발 환경 설정

Eran Helzer7분

공유:

Docker Compose, Xdebug 및 PhpStorm을 사용하면 운영 서버를 미러링하는 재현 가능하고 격리되며 쉽게 관리할 수 있는 로컬 개발 환경을 구축하여 WordPress 프로젝트의 품질을 높일 수 있습니다.

동료 WordPress 개발자 및 고급 사용자 여러분, 안녕하세요! 오늘은 Docker Compose를 사용하여 로컬 WordPress 개발 환경을 설정하는 포괄적이면서도 간단한 튜토리얼을 공유하게 되어 기쁩니다. 최근 역동적인 OnTheGoSystems 팀의 일원이 되면서 제가 편안하게 느끼는 작업 방식을 그대로 가져오기로 했으며, 이 설정이 바로 그 결과물입니다.

목표는 간단했습니다. 공식 WordPress Docker 이미지에 Xdebug 및 WP-CLI를 통합하여 개발 도구를 세부적으로 제어할 수 있는 설정을 개발하는 것이었습니다. 이 설정은 완전히 새로운 것을 만드는 것이 아니라 개인의 선호도와 작업 스타일에 맞게 사용자 정의하는 것입니다. 이 가이드가 유사한 환경을 구성하는 데 도움이 되어 WordPress 개발 여정을 향상시킬 수 있기를 바랍니다.

사전 준비 사항

이 튜토리얼을 최대한 활용하려면 다음 종속성을 설치해야 합니다.

  1. Docker: 컨테이너를 사용하여 애플리케이션을 생성, 배포 및 실행하기 위한 주요 도구로 Docker를 사용합니다. 이를 통해 애플리케이션과 필요한 모든 부분을 컨테이너에 패키징하여 하나의 패키지로 배포할 수 있습니다. Docker를 더욱 강력하게 만드는 것은 애플리케이션 설정의 모든 측면을 정확하게 정의할 수 있는 세부적인 제어 기능입니다. 이러한 제어는 요구 사항에 정확히 맞는 개발 환경을 구축하는 데 도움이 됩니다.
  2. Xdebug Chrome Extension: 이 브라우저 확장 프로그램은 코드를 단계별로 실행하고 버그를 찾아내며 WordPress 프로젝트의 전반적인 품질을 개선하는 데 도움이 됩니다.
  3. PhpStorm: JetBrains에서 개발한 지능적이고 모든 기능을 갖춘 PHP용 IDE입니다. PHP, HTML 및 JavaScript용 에디터를 제공하며, 이러한 언어에 대한 실시간 코드 분석 및 자동 리팩토링 기능을 지원합니다.

Docker, Xdebug 및 PhpStorm을 사용하는 이유

목표는 격리되고 재현 가능하며 쉽게 관리할 수 있는 로컬 WordPress 개발 환경을 구축하는 것입니다. Docker는 이 설정의 중추를 형성하여 애플리케이션을 포함하고 관리하는 인프라를 제공합니다. Xdebug 및 PhpStorm은 이 퍼즐의 보완적인 조각으로, 향상된 PHP 코드 개발 및 디버깅 기능을 제공합니다.

공식 WordPress Docker 이미지를 확장하는 Dockerfile을 작성하는 것부터 시작하겠습니다. WordPress 개발 및 디버깅 작업에 필수적인 도구인 Xdebug 및 WP-CLI를 통합하여 이 이미지를 향상시킬 것입니다.

다음으로 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)

이제 Docker 이미지에 Xdebug를 설치했으므로 로컬 개발 환경에서 작동하도록 구성해야 합니다. 여기에는 다음 설정이 포함된 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 파일

다음으로 WordPress 및 MySQL 서비스를 설정하는 docker-compose.yml 파일을 생성합니다.

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 디버깅을 활성화하는 WORDPRESS_DEBUG와 Xdebug의 클라이언트 호스트를 지정하는 XDEBUG_CONFIG입니다. client_host는 호스트의 내부 IP 주소로 라우팅되는 특수 DNS 이름인 host.docker.internal로 설정되어 Xdebug가 호스트의 IDE와 통신할 수 있도록 합니다.

client_host 설정은 Windows 및 macOS에 맞게 조정되었습니다. Linux의 경우 일반적인 대안은 host.docker.internal을 터미널 명령 ip addr show를 통해 얻을 수 있는 컴퓨터의 실제 IP 주소로 바꾸는 것입니다.

4단계: 로컬 WordPress 개발 환경 실행

Dockerfile, Xdebug 구성 파일 및 Docker Compose 파일이 준비되면 로컬 WordPress 개발 환경을 실행할 차례입니다.

이렇게 하려면 터미널에서 Docker Compose 파일이 포함된 디렉터리로 이동하여 다음 명령을 실행하기만 하면 됩니다.

bash
docker-compose up -d

이 명령은 Docker에 백그라운드에서 서비스를 시작하도록 지시합니다.

성공적으로 실행되면 http://localhost:8000을 통해 액세스할 수 있는 로컬 컴퓨터에서 실행되는 WordPress 사이트가 생성됩니다. WordPress PHP 파일에 대한 모든 변경 사항이 이제 이 사이트에 반영되어 WordPress 애플리케이션을 개발하고 디버깅하는 쉽고 효과적인 방법을 제공합니다.

또한 MySQL 서비스도 실행되어 포트 3306에서 액세스할 수 있습니다. 이는 WordPress 애플리케이션을 위한 완벽하게 작동하는 MySQL 데이터베이스를 제공하여 개발 요구 사항에 맞는 실제 환경을 복제합니다.

4.5단계: 보너스 단계 – phpinfo.php 파일 추가

PHP 구성에 대해 좀 더 깊이 알아보고 싶은 분들을 위해 Docker 이미지에 phpinfo.php 파일을 도입할 수 있습니다. 이 파일에 액세스하면 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 파일을 Docker 이미지 내의 WordPress 루트 디렉터리로 복사합니다.

이러한 변경 사항이 적용되도록 하려면 Docker 이미지를 다시 빌드하고 Docker Compose 서비스를 다시 시작해야 합니다. 터미널에서 다음 명령을 실행하세요.

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

docker-compose down 명령은 현재 Docker 컨테이너를 중지하고 제거합니다. 그런 다음 docker-compose up -d –build는 새로 추가된 phpinfo.php 파일로 Docker 이미지를 다시 빌드하고 백그라운드에서 WordPress 및 MySQL 서비스를 다시 시작합니다.
이제 웹 브라우저에서 http://localhost:8000/phpinfo.php로 이동하여 phpinfo.php 파일에 액세스할 수 있습니다. 여기에서 PHP 구성을 요약한 자세한 페이지를 볼 수 있으며, 이는 디버깅 및 확인을 위한 귀중한 리소스가 될 수 있습니다.

5단계: 디버깅 시작

이제 Docker, Xdebug 및 PhpStorm을 사용하여 로컬 WordPress 개발 환경 설정을 마쳤으므로 WordPress 사이트 디버깅을 시작할 수 있습니다. 시작하는 방법에 대한 간단한 요약은 다음과 같습니다.

  1. PhpStorm에서 Xdebug 설정: PhpStorm을 열고 File → Settings(Mac의 경우 Preferences) → 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 확장 프로그램 설치: Google Chrome용 Xdebug helper 확장 프로그램을 설치합니다. 설치가 완료되면 버그 아이콘을 클릭하고 IDE 키를 PHPSTORM으로 설정합니다.
  4. PHP 디버그 연결 수신 대기 시작: PhpStorm의 오른쪽 상단 모서리에 있는 버그 아이콘을 클릭하여 PHP 디버그 연결 수신 대기를 시작합니다.
  5. 디버깅 시작: 이전 단계를 완료하면 WordPress 애플리케이션 디버깅을 시작할 준비가 된 것입니다. 필요에 따라 PhpStorm에서 중단점을 설정한 다음 웹사이트를 다시 로드하기만 하면 됩니다. 즐겁게 디버깅하세요!

결론

이 튜토리얼을 마무리하면서 제 여정에서 그랬던 것처럼 여러분에게도 귀중한 리소스가 되기를 바랍니다. phpinfo.php 파일을 추가하여 수행한 것처럼 이 설정을 사용자 정의하는 기능은 무수히 많은 가능성을 열어주어 개발 프로세스를 더욱 강력하고 효율적으로 만듭니다. 모든 코드는 이 GitHub 리포지토리에서 확인할 수 있습니다. 주저하지 말고 가져와서 사용해 보고 개선 사항을 제안해 주세요!

저는 개인적으로 Ubuntu OS를 사용하지만 이 설정의 장점은 Docker 덕분에 OS가 중요하지 않다는 것입니다! Docker는 모든 운영 체제에서 동일하게 실행될 수 있으므로 macOS, Windows 또는 Linux 중 무엇을 선호하든 설정 및 사용법은 동일합니다!

이 연습에 함께해 주셔서 감사합니다. 여러분의 경험이나 이 설정을 더욱 개선하기 위한 제안을 들을 수 있기를 바랍니다. 성장은 공유된 지식과 협업 정신을 바탕으로 이루어진다는 점을 기억하세요.

즐겁게 코딩하시고, 앞으로도 함께 멋진 WordPress 경험을 만들어가길 바랍니다!

이 글이 유용했나요? 이 글을 공유하세요:

추천 글