Reverse Proxy with Hostnames with Docker compose - docker

Question

I have 2 APIs and a front end that work in docker containers. They can all be created via docker-compose and I have an Nginx reverse proxy that should route to them using their hostnames i.e. api-1.my-project.localhost. In fact, I have had this process working, but every so often, like this morning, I get the "Non-existent domain" or "We can't find this site" when visiting it using these hostnames.
I don't believe the docker-compose.yml is all that important but I have included it here:
version: "3.2"
services:
api-1:
# Runs on port 5000
image: my-companies-docker-registry.api-1
api-2:
# Runs on port 5000
image: my-companies-docker-registry.api-2
main-front-end:
# Runs on port 3000
image: my-companies-docker-registry.main-front-end
my-project:
image: nginx
depends_on:
- api-1
- api-2
- main-front-end
ports:
- 80:80
volumes:
- type: bind
read_only: true
source: ./nginx
target: /etc/nginx
My nginx config looks like so:
events {}
http {
# Api 1
upstream api-1{
server api-1:5000;
}
server {
listen 80;
server_name api-1.my-project.localhost;
location / {
proxy_pass http://api-1;
}
}
# Api 2
upstream api-2 {
server api-2:5000;
}
server {
listen 80;
server_name api-2.my-project.localhost;
location / {
proxy_pass http://api-2;
}
}
# Main Front end
upstream main-front-end {
server main-front-end:3000;
}
server {
listen 80 default_server deferred;
server_name my-project.localhost www.my-project.localhost;
location / {
proxy_pass http://main-front-end;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
}
}
The aim of this is so that I can access the site using http://my-project.localhost and the APIs using api-1.my-project.localhost and api-2.my-project.localhost. As I have listen 80 default_server deferred by visiting http://localhost I can hit nginx, which lets me see my front end site. So docker-compose has bound the ports correctly.
At some point in the past, I have been able to access the sites using the my-project.localhost suffix but now this is no longer the case. This site suggests adding a host entry for every site, I don't remember doing this before, as there are a lot of sites, this would have taken a while but it is possible I did and now they have been removed. I am also aware that Nginx is not docker, so I have no idea how those hostnames would have been extracted and added to my machines host resolution process.
How could this have worked before and not now? And how can I get my setup to work without making manual host file changes?