How to run phpmyadmin along with wordpress docker container using nginx-proxy?

Question

I am trying to run a WordPress app along with phpMyAdmin each inside of a docker container on Ubuntu VPS using Nginx-Proxy.

I created the following docker-compose.yml file

version: '3.4'
services:
    nginx-proxy:
        image: jwilder/nginx-proxy
        container_name: nginx-proxy
        ports:
            - 80:80
            - 443:443
        restart: always
        volumes:
            - /var/run/docker.sock:/tmp/docker.sock:ro
            - /etc/nginx/vhost.d:/etc/nginx/vhost.d:ro
            - /etc/certificates:/etc/nginx/certs

    wordpress_app:
        image: wordpress
        restart: always
        container_name: wordpress_app
        environment:
            - VIRTUAL_HOST=wordpress.mydomain.com
            - VIRTUAL_PORT=5500
            - WORDPRESS_DB_HOST=mysql_server:3306
            - WORDPRESS_DB_USER=db_username
            - WORDPRESS_DB_PASSWORD=db_password
            - WORDPRESS_DB_NAME=wordpress_app
        depends_on:
            - nginx-proxy
            - mysql_server
        volumes:
            - wordpress_app_public_html:/var/www/html

    phpmyadmin:
        image: phpmyadmin
        container_name: phpmyadmin
        restart: always
        environment:
            - VIRTUAL_HOST=phpmyadmin.mydomain.com
            - VIRTUAL_PORT=5600
            - PMA_HOST=mysql_server:3306
            - MYSQL_USERNAME=root
            - MYSQL_ROOT_PASSWORD=db_root_password
        depends_on:
            - nginx-proxy
            - mysql_server

    mysql_server:
        image: mysql:latest
        restart: always
        container_name: mysql_server
        environment:
            - MYSQL_DATABASE=wordpress_app
            - MYSQL_USER=db_username
            - MYSQL_PASSWORD=db_password
            - MYSQL_ROOT_PASSWORD=db_root_password
        volumes:
            - mysql_server_data:/var/lib/mysql

volumes:
    wordpress_app_public_html:
    mysql_server_data:

networks:
    default:
       external:
           name: nginx-proxy

In the /etc/certificates path, I added a .key and .crt file for each of the domain..The 4 files that exists are

• phpmyadmin.mydomain.com.key
• phpmyadmin.mydomain.com.crt
• wordpress.mydomain.com.key
• wordpress.mydomain.com.crt

Now, when I execute docker-compose up I can browsehttps://wordpress.mydomain.com with no problems. However, when I browser http://phpmyadmin.mydomain.com I get the following error

503 Service Temporarily Unavailable nginx/1.17.5

When I browser to https://phpmyadmin.mydomain.com I get a blank white page.

How can I successfully browse the php-my-admin instance?

UPDATED

Here is my updated docker-compose.yml file based on feedback below

version: '3.4'
services:
    nginx-proxy:
        image: jwilder/nginx-proxy
        container_name: nginx-proxy
        ports:
            - 80:80
            - 443:443
        restart: always
        volumes:
            - /var/run/docker.sock:/tmp/docker.sock:ro
            - /etc/certificates:/etc/nginx/certs

    wordpress_app:
        image: wordpress
        restart: always
        container_name: wordpress_app
        environment:
            - VIRTUAL_HOST=wordpress.mydomain.com
            - WORDPRESS_DB_HOST=mysql_server:3306
            - WORDPRESS_DB_USER=db_username
            - WORDPRESS_DB_PASSWORD=db_password
            - WORDPRESS_DB_NAME=wordpress_app
        depends_on:
            - nginx-proxy
            - mysql_server
        volumes:
            - wordpress_app_public_html:/var/www/html
        expose:
            - 80

    phpmyadmin:
        image: phpmyadmin
        container_name: phpmyadmin
        restart: always
        environment:
            - VIRTUAL_HOST=phpmyadmin.mydomain.com
            - PMA_HOST=mysql_server:3306
            - MYSQL_USERNAME=root
            - MYSQL_ROOT_PASSWORD=db_root_password
        depends_on:
            - nginx-proxy
            - mysql_server
        expose:
            - 80

    mysql_server:
        image: mysql:latest
        restart: always
        container_name: mysql_server
        environment:
            - MYSQL_DATABASE=wordpress_app
            - MYSQL_USER=db_username
            - MYSQL_PASSWORD=db_password
            - MYSQL_ROOT_PASSWORD=db_root_password
        volumes:
            - mysql_server_data:/var/lib/mysql

volumes:
    wordpress_app_public_html:
    mysql_server_data:

networks:
    default:
       external:
           name: nginx-proxy

Answer 1

The jwilder/nginx-proxy image usually responds

503 Service Temporarily Unavailable nginx/1.17.5

When you can't find the service you want.
As far as I see the problem you have it in the variables VIRTUAL_PORT
I am sure that both the wordpress image (https://hub.docker.com/_/wordpress) and phpmyadmin image (https://hub.docker.com/_/phpmyadmin) expose port 80 and not 5500 and 5600 respectively. Then possibly the solution to your problem is the following:

wordpress_app:
        image: wordpress
        restart: always
        container_name: wordpress_app
        environment:
            - VIRTUAL_HOST=wordpress.mydomain.com
            - VIRTUAL_PORT=80
            - WORDPRESS_DB_HOST=mysql_server:3306
            - WORDPRESS_DB_USER=db_username
            - WORDPRESS_DB_PASSWORD=db_password
            - WORDPRESS_DB_NAME=wordpress_app
        depends_on:
            - nginx-proxy
            - mysql_server
        volumes:
            - wordpress_app_public_html:/var/www/html

    phpmyadmin:
        image: phpmyadmin
        container_name: phpmyadmin
        restart: always
        environment:
            - VIRTUAL_HOST=phpmyadmin.mydomain.com
            - VIRTUAL_PORT=80
            - PMA_HOST=mysql_server:3306
            - MYSQL_USERNAME=root
            - MYSQL_ROOT_PASSWORD=db_root_password
        depends_on:
            - nginx-proxy
            - mysql_server