How to configure Laravel API & Angular front-end in NGINX on GCP

I have configured my Laravel API with Angular front-end in my Nginx server and deployed everything on GCP.Actually I deployed each component on a VM instance separately.

This is the nginx configuration I'm using

events {
#empty
}

http {

server {
        listen 80;

        location / {
            proxy_pass http://frontend;
        }

        location /api/ {
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://backend;
        }

    }

upstream frontend {
   server 172.x.x.4:4200;
}

upstream backend {
        server 172.x.x.7:8000;
    }

}

Inside Angular I'm serving requests to the internal ip address of the VM running Laravel API below

I also served the Laravel API using the internal IP address of the VM:

I can successfully access the Angular fronend from Nginx server but when I make a request, I got address unreachable error:

I stuck with the problem a couple of days, and I'd appreciate any help or improvements.