How to connect VSCode to xdebug 3 inside Docker container? – Nginx

Good day, coders!

Im using Win 10 with wsl2. Trying to build development environment in modern way with Docker for Windows. Im using nginx, php:fpm, mariadb, adminer.
All is working fine, exept debuger. And i just dont undersand why. I even see it from my local machine!

PS D:Projectsphp-dockerdev> tnc host.docker.internal -p 9003

ComputerName     : host.docker.internal
RemoteAddress    : 192.168.0.5
RemotePort       : 9003
InterfaceAlias   : Ethernet
SourceAddress    : 192.168.0.5
TcpTestSucceeded : True

And ive joined php container and saw that XDebuger seems to be installed properly

kds@matrix:/mnt/d/Projects/php-docker/dev$ docker ps
CONTAINER ID   IMAGE            COMMAND                  CREATED          STATUS          PORTS                                       NAMES
8923a772e4d9   nginx            "/docker-entrypoint.…"   58 minutes ago   Up 34 minutes   0.0.0.0:80->80/tcp, :::80->80/tcp           dev_web_1
2aa7df39190d   dev_php          "docker-php-entrypoi…"   58 minutes ago   Up 34 minutes   9000/tcp                                    dev_php_1
efa5a9175c3b   adminer:latest   "entrypoint.sh docke…"   21 hours ago     Up 34 minutes   0.0.0.0:8080->8080/tcp, :::8080->8080/tcp   dev_adminer_1
e6c6a046712e   mariadb          "docker-entrypoint.s…"   21 hours ago     Up 34 minutes   0.0.0.0:3306->3306/tcp, :::3306->3306/tcp   dev_mysql_1
kds@matrix:/mnt/d/Projects/php-docker/dev$ docker exec -it dev_php_1 bash
root@2aa7df39190d:/var/www/html# php -v
PHP 8.0.6 (cli) (built: May  7 2021 20:37:21) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.6, Copyright (c) Zend Technologies
    with Xdebug v3.0.4, Copyright (c) 2002-2021, by Derick Rethans

docker-compose.yml

version: '3'
services:
    web:
        image: nginx
        restart: always
        ports:
            - "80:80"
        volumes:
            - ./nginx.conf:/etc/nginx/conf.d/nginx.conf
            - ./app:/www/app
    php:
        build:
            context: .
            dockerfile: PHP_Dockerfile
        volumes: 
            - ./app:/www/app
            - ./logs/xdebug:/logs/xdebug
        environment: 
            XDEBUG_CONFIG: "mode=debug
                            start_with_request=yes
                            client_host=host.docker.internal
                            client_port=9003"
    mysql:
        image: mariadb
        restart: always
        environment:
            MYSQL_ROOT_PASSWORD: 'secret'
            MYSQL_USER: 'db_user'
            MYSQL_PASSWORD: 'secret'
            MYSQL_DATABASE: 'test'
        volumes:
            - mysqldata:/var/lib/mysql
        ports:
            - 3306:3306
    adminer:
        image: adminer:latest
        restart: always
        environment:
            ADMINER_DESIGN: ng9
            ADMINER_DEFAULT_SERVER: mysql
        ports: 
            - 8080:8080
volumes:
    mysqldata: {}

PHP_Dockerfile

FROM php:fpm

RUN docker-php-ext-install pdo pdo_mysql 
    && pecl install xdebug 
    && docker-php-ext-enable xdebug

apppublicindex.php

<?php
    xdebug_info();

VS Code launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "stopOnEntry": true,
            "log": true,
            "pathMappings": {
                "/www/app": "${workspaceFolder}/app"
            },
        },
    ]
}

…—…

Problem solved!
Helpful instruction on Github

1. added xdebug.ini

[XDebug]
zend_extension=xdebug.so

xdebug.mode = debug
xdebug.start_with_request=yes

#Replace host.docker.internal to your computers IP address if linux
xdebug.client_host=host.docker.internal

2. new docker-compose.yml

version: '3'
services:
    web:
        image: nginx
        restart: always
        ports:
            - "80:80"
        volumes:
            - ./nginx.conf:/etc/nginx/conf.d/nginx.conf
            - ./app:/www/app
    php:
        build:
            context: .
            dockerfile: PHP_Dockerfile
        volumes: 
            - ./app:/www/app
            - ./xdebug.ini:/usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
        environment: 
            PHP_IDE_CONFIG: "serverName=docker-test"
    mysql:
        image: mariadb
        restart: always
        environment:
            MYSQL_ROOT_PASSWORD: 'secret'
            MYSQL_USER: 'db_user'
            MYSQL_PASSWORD: 'secret'
            MYSQL_DATABASE: 'test'
        volumes:
            - mysqldata:/var/lib/mysql
        ports:
            - 3306:3306
    adminer:
        image: adminer:latest
        restart: always
        environment:
            ADMINER_DESIGN: ng9
            ADMINER_DEFAULT_SERVER: mysql
        ports: 
            - 8080:8080
volumes:
    mysqldata: {}