带有Docker的Xdebug构成了Atom

时间：2018-03-23 19:37:36

标签： docker docker-compose atom-editor xdebug

我正在使用Docker compose将PHP和Apache设置为2种不同的服务。我使用atom作为IDE和php-debug扩展进行调试。

搬运工-compose.yml 

services:
  httpd:
      image: httpd:latest
      ports:
          - 8080:80
          - 9000:9000
      volumes:
          - ./docker/httpd/conf:/usr/local/apache2/conf
      volumes_from:
          - php
  php:
      build: ./docker/php/
      expose:
          - 9000
      volumes:
          - ./code:/usr/local/apache2/htdocs

PHP的Dockerfile 

FROM php:7.2-fpm

RUN docker-php-ext-install pdo_mysql json mysqli

# Enable and configure xdebug
RUN pecl install xdebug
RUN docker-php-ext-enable xdebug
RUN sed -i '1 a xdebug.remote_autostart=true' /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN sed -i '1 a xdebug.remote_mode=req' /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN sed -i '1 a xdebug.remote_handler=dbgp' /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN sed -i '1 a xdebug.remote_connect_back=0 ' /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN sed -i '1 a xdebug.remote_port=9000' /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN sed -i '1 a xdebug.remote_host=172.19.0.1' /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN sed -i '1 a xdebug.remote_enable=1' /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN sed -i '1 a xdebug.idekey=xdebug-atom' /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN sed -i '1 a xdebug.remote_autostart=1' /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini

Atom中的php-debug 

"php-debug":
    PathMaps: [
      "remotepath;localpath"
      "/usr/local/apache2/htdocs;/Users/shahzadfatehali/Sites/fiddlesoft/mansab/code"
    ]
    ServerPort: 9000
    currentPanelHeight: "259px"
    currentPanelMode: "bottom"

当我在Atom中运行PHPDebug时，它会向我显示它正在监听127.0.0.1:9000但是当我在浏览器上访问该页面时，我发现在Atom中没有断点执行。

有人可以在这里找出错误配置吗？

1 个答案:

答案 0 :(得分：0)

  

注意：，因为我去过那里，所以我不由自主地投入和贡献。

解决方案

假设

  • 您了解如何使用PHP，Nginx，Docker，CLI，Linux和Atom。
  • 您处于开发模式而不是生产环境。
  • 您正在开发利用类似环境的 nix（UN X）。
  • 您正在使用Atom作为您的IDE。
  • 最简单的动态应用程序是，您的Dockerized项目应配置为提供三（3）个容器，即：
    • 一台正在服务的Nginx Web服务器，
    • 第二个可提供服务的PHP-FPM引擎
    • 第三个服务数据库服务器。
  • 您的Docker Compose应该配置为使用Volumes与PHP-FPM容器本地绑定（主机）。

1-对于Docker PHP-FPM容器

1.1-在本地创建并编辑xdebug ini文件以反映以下配置 

zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20170718/xdebug.so
[xdebug]
xdebug.remote_enable=1
xdebug.remote_host=host.docker.internal
xdebug.remote_port=9000
xdebug.remote_autostart=1
xdebug.remote.mode=req
xdebug.remote.handler=dbgp
xdebug.remote_connect_back=0
xdebug.remote_log=/tmp/xdebug-error.log
  分配给xdebug.remote_host的

host.docker.internal 值将确保Docker映射正确的主机IP地址。

1.2-配置PHP-FPM Dockerfile以安装xdebug，激活模块并将其配置文件复制到容器中 

FROM php:7.2-fpm
...
RUN pecl install -f xdebug \
  docker-php-ext-enable xdebug
...
COPY ./conf.d/docker-php-ext-xdebug.ini /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini

1.3-在Docker Compose中配置PHP-FPM服务 

version: '3.7'

networks:
  bridge_network:
    driver: bridge

services:
  web_server:
    ...
    networks:
      - bridge_network
    depends_on:
      - app_server
      - db_server

  app_server:
    ...
    ports:
      - 9000:9000
    volumes:
      - ../..:/var/www
    networks:
      - bridge_network
    depends_on:
      - db_server

  db_server:
    ...
    networks:
      - bridge_network

2-Atom IDE

2.1-安装php-ide 

Atom IDE > Preferences/Settings > Install > search php-ide > click install

2.2-安装语言PHP 

Atom IDE > Preferences/Settings > Install > search language-php > click install

2.3-安装php-debug 

Atom IDE > Preferences/Settings > Install > search php-debug > click install
  

重要提示：请勿手动定义任何PathMap。 Atom IDE会为您定义它。

3-调试PHP代码

3.1-切换PHP调试+ PHP控制台面板 

Atom IDE > Bottom left corner of the app window > Find two tabs "PHP Debug" and "PHP Console" > Click on one of them > Two panels will open.
  

注意：，您只需要“ PHP Debug”和“ PHP Console”面板即可调试PHP代码。

3.1-定义断点

  1. 打开一个PHP文件。
  2. 滚动到目标行。
  3. 通过指向并单击该行的左边缘来设置断点。
  4. 您将在“ PHP Debug”面板> Breakpoints窗口下看到Breakpoints附加项。

3.2-附加调试器

  1. 打开您偏好的Internet浏览器。
  2. 导航到http://localhost:80，它指向Nginx服务器。
  3. 浏览该应用并转到断点应该位于的位置。
  4. 让页面加载。页面加载完毕。
  5. 转到Atom IDE，您将看到一个弹出窗口，提示您“保存” Atom IDE捕获的路径图。
  6. 由于时间有限，您应该迅速采取行动并按“保存”。否则，您将不得不通过重新加载页面来重做。
相关问题
最新问题