How to host multiple apps using nginx and prefixes (app1.xxx and app2.xxx) in local network

I am trying to host an API and corresponding static web app on my raspberrypi. It will only be accessible via the local network. This is the config file:

server {
    listen        80;
    server_name   api.raspberrypi;
    location / {
        proxy_pass         http://127.0.0.1:5000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection $http_connection;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
    }
}

server {
    listen        80;
    server_name   raspberrypi;
    location / {
        root      /Development/UI/wwwroot;
        try_files $uri $uri/ /index.html =404;
    }
}

Depending on where I put the prefix (api. or ui.) this part becomes inaccessible while the other one is available in the local network at http://raspberrypi:80. I would like to have the api at http://api.raspberrypi. How can this be achieved?