unable to communication between serices with GCP cloud run

I have two services, and API and a view. At the moment, neither service is using a VPC and are open to the internet. The API starts with no issue, and I am able to access its endpoints.

api logs

Default STARTUP TCP probe succeeded after 1 attempt for container "api-1" on port 8080.

However, the view fails on start-up because it cannot nginx cannot connect to the api

2023/06/02 05:14:11 [emerg] 1#1: host not found in upstream "api:8080" in /etc/nginx/nginx.conf:44

nginx: [emerg] host not found in upstream "api:8080" in /etc/nginx/nginx.conf:44

I have tried the api's host url, api-1, and api. At this point I am not sure what else to try.

Advice?

daemon off;
user nginx;

events {
    worker_connections 1024;
}

http {
    gzip on;
    gzip_comp_level 2;
    gzip_min_length 1024;
    gzip_types *;

    proxy_connect_timeout       300;
    proxy_send_timeout          300;
    proxy_read_timeout          300;
    send_timeout                300;
    keepalive_timeout 300;
    client_body_timeout 300;
    client_header_timeout 300;
    client_max_body_size 1024M;
    proxy_max_temp_file_size 0;
    proxy_buffering off;
    server_names_hash_bucket_size 256;

    include /etc/nginx/mime.types;
    sendfile on;
    server_tokens off;

    log_format  main '$remote_addr - $remote_user [$time_local] "$request" '
                     '$status $body_bytes_sent "$http_referer" '
                     '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    default_type application/octet-stream;

    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }

     upstream api {
        server ${API_HOST}:${API_PORT};
     }

     # ssl_session_cache   shared:SSL:10m;
     # ssl_session_timeout 10m;

     server {
         listen 8080;

         # SSL configuration
         listen 443 ssl;
         listen [::]:443 ssl;

         server_name localhost;

         keepalive_timeout   70;

         root /usr/share/nginx/html;

         access_log /var/log/nginx/access.log;
         error_log /var/log/nginx/error.log;

         location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf)$ {
             expires 1y;
             add_header Cache-Control "public";
             access_log off;
         }

         location / {
            try_files $uri /index.html;
         }

         location ~ ^/(v1)/ {
             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;
             proxy_set_header Host $http_host;
             proxy_set_header X-NginX-Proxy true;

             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection $connection_upgrade;

             proxy_redirect off;
             proxy_pass http://api;

             add_header Cache-Control "no-store, no-cache, must-revalidate";
             expires off;
         }

     }

}

Updated nginx file.. This link was provided in the comments. I was added the environmental variable to the nginx configuration but sadly it had no effect. Deploy React and Nginx to Cloud Run

 server {
     listen ${PORT};

     # SSL configuration
     listen 443 ssl;
     listen [::]:443 ssl;

start.sh for nginx

#!/usr/bin/env sh
set -eu

# Replace env vars in config template and save it as config file
envsubst '${API_HOST}','${API_PORT}','${PORT}'  < /etc/nginx/etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf
# Run nginx
exec /usr/sbin/nginx

The issue is still

2023/06/04 09:51:50 [emerg] 1#1: host not found in upstream "api:8080" in /etc/nginx/nginx.conf:44

which is the upstream in the nginx file

 upstream api {
    server ${API_HOST}:${API_PORT};
 }

For some reason it cannot connect to the api service.

---- update 1 ----

I create a custom service account with cloud run invoker and cloud run admin and assigned both services the account.
I also created a VPC. Still unable to connect.

Small change to nginx file

 upstream api {
    server ${API_HOST}:${API_PORT};
 }

 # ssl_session_cache   shared:SSL:10m;
 # ssl_session_timeout 10m;

 server {
     listen ${PORT};
     listen 80;

     # SSL configuration
     listen 443 ssl;
     listen [::]:443 ssl;

     server_name localhost ${API_HOST};

     keepalive_timeout   70;

Based on the error and your nginx config, it seems the problem is with your API_HOST variable. Can you show us what host you have or make your the host is the full url for the api service generated by cloud run (which ends with .run.app). Then your view should resolve correctly.