Docker: nginx as proxy returns a 502 Bad Gateway

Question

First I'd like to say I am totally new on Docker and server management.

What I try to build is a docker based stack including WordPress, MariaDB and nGinx images.

The nGinx is going to be used as a reverse proxy, and this is the reason I am instaling it here.

My docker-compose.yml is like that:

version: '3'

services:
  mysql:
    image: mariadb
    env_file:
      - ./.env
    volumes:
      - ./data:/var/lib/mysql

  wordpress:
    image: wordpress:php7.2
    env_file:
      - ./.env
    volumes:
      - ./wordpress:/var/www/html
    ports:
      - 42400:80
    links:
      - mysql

  nginx:
    build: ./docker/nginx
    volumes:
      - ./conf/nginx/nginx.conf:/etc/nginx/nginx.conf
    ports:
      - 80:80
      - 443:443
    links:
      - wordpress
    depends_on:
      - wordpress

Then the Dockerfile for the Nginx is like that:

FROM nginx:latest

RUN mkdir -p /data/nginx/cache

VOLUME ["/etc/nginx/certs", "/etc/nginx/conf.d", "/var/log/nginx"]

EXPOSE 80
EXPOSE 443

WORKDIR /etc/nginx

CMD ["nginx"]

And finally the nGinx config file is like that:

daemon              off;
worker_processes    1;

events {
  worker_connections  1024;
}

http {
    sendfile on;

    gzip                on;
    gzip_http_version   1.0;
    gzip_proxied        any;
    gzip_min_length     500;
    gzip_disable        "MSIE [1-6]\.";
    gzip_types          text/plain text/xml text/css text/comma-separated-values
                        text/javascript application/x-javascript application/atom+xml;

    upstream wordpress {
        server wordpress:42400;
    }

    server {
        listen 80;
        server_name www.bimber-viral-buzz.local;

        location / {
            proxy_pass          http://wordpress;
            proxy_redirect      off;
            proxy_set_header    Host $host;
            proxy_set_header    X-Real-IP $remote_addr;
            proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header    X-Forwarded-Host $server_name;
        }
    }
}

Now, when I run the docker-compose up and I try to access the localhost:42400 I can see the WordPress normally. In this case, there's no issue and I can freely navigate through the WordPress pages.

Then, if I try to access the localhost (without specifying any port number, thus port 80 ), I get the following error:

At the same time I get the following error in my console:

And finally, if I try to directly access the WordPress image using the assigned IP address I get the following output:

Could you see if I am doing anything wrong? From the morning I have read a tone of articles, answers on stackoverflow and forums, but I cannot see what's wrong.

Any idea please ?

Note: In my dev env, I have added the record 127.0.0.1 www.bimber-viral-buzz.local to access the WordPress site, and you see this domain in the console, because the WordPress forces using the defined domain name.