How to configure Ngix for wordpress site running ina docker container?

I am trying to run WordPress app using docker container on Nginx server.

I used the following docker-compose.yml file to run my WordPress locally

version: "3"
services:

    wordpress_app:
        image: wordpress:latest
        restart: always
        container_name: wordpress_app
        environment:
            WORDPRESS_DB_HOST: mysql_server:3306
            WORDPRESS_DB_USER: db_username
            WORDPRESS_DB_PASSWORD: db_password
            WORDPRESS_DB_NAME: wordpress_app
        depends_on:
            - mysql_server
        volumes:
            - wordpress_app_public_html:/var/www/html
        ports:
            - "50001:80"
            - "50002:443"

    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: wordpress-network

Now, I added a file called /etc/nginx/sites-available/usa.mydomain.com.conf with the following content

server {
    listen        80;
    server_name   usa.mydomain.com;

    index index.php;

    access_log /var/log/nginx/usa.mydomain.com-access.log;
    error_log /var/log/nginx/usa.mydomain.com-error.log;

    location / {
        try_files $uri $uri/ /index.php?$args;
    }

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass locahost:50001;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}

Then I added a virtual file of the same configuration into sites-enabled folder like this

cd /etc/nginx/sites-enabled
ln -s ../sites-available/usa.mydomain.com.conf .

But when I open usa.mydomain.com I get error

Problem Loading Page: The connection was reset

But when I change the config to the following the site works. But the html code resolve content to http://localhost:50001

server {
    listen        80;
    server_name   usa.mydomain.com;

    location / {
        proxy_pass  http://localhost:50001;
    }

    index index.php;

    access_log /var/log/nginx/usa.mydomain.com-access.log;
    error_log /var/log/nginx/usa.mydomain.com-error.log;
}

So the page HTML source looks like this

<!DOCTYPE html>
<html lang="en-US" xml:lang="en-US">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="noindex,nofollow" />
    <title>WordPress &rsaquo; Installation</title>
    <link rel='stylesheet' id='dashicons-css'  href='http://localhost:50001/wp-includes/css/dashicons.min.css?ver=5.5.1' type='text/css' media='all' />
    <link rel='stylesheet' id='buttons-css'  href='http://localhost:50001/wp-includes/css/buttons.min.css?ver=5.5.1' type='text/css' media='all' />
    <link rel='stylesheet' id='forms-css'  href='http://localhost:50001/wp-admin/css/forms.min.css?ver=5.5.1' type='text/css' media='all' />
    <link rel='stylesheet' id='l10n-css'  href='http://localhost:50001/wp-admin/css/l10n.min.css?ver=5.5.1' type='text/css' media='all' />
    <link rel='stylesheet' id='install-css'  href='http://localhost:50001/wp-admin/css/install.min.css?ver=5.5.1' type='text/css' media='all' />

How can I correctly configure nginx site so that WordPress can work properly?

Solution

I finally figured out the issues. Adding proxy_set_header HOST $host; was the missing piece. Below is my final/working config.

server {
    listen 80;
    server_name usa.mydomain.com;

    root /data/wordpress_app/public_html;

    access_log off;

    error_log /var/log/nginx/wordpress_app-error.log;

    index index.html index.php;

    location = /favicon.ico {
        log_not_found off;
        access_log off;
    }

    location = /robots.txt {
        allow all;
        log_not_found off;
        access_log off;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
        expires max;
        log_not_found off;
    }

    location / {
        # First attempt to serve request as file, then as directory, then fall back to displaying a 404.
        try_files $uri $uri/ /index.php?$args;
        proxy_pass http://localhost:8000;
        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-Proto $scheme;
    }
}