<p>I'm trying to deploy a simple Angular/Express app on GKE and the http requests from the frontend can't find the name of the express app.</p>
<p>Here's an example of one get requests. I changed the request from 'localhost' to 'express' because that is the name of the clusterIP service setup in the cluster. Also, I'm able to curl this url from the angular pod and get json returned as expected.</p>
<pre><code>getPups(){
    this.http.get&lt;{message:string, pups: any}&gt;(&quot;http://express:3000/pups&quot;)
    .pipe(map((pupData)=&gt;{
        return pupData.pups.map(pup=&gt;{
            return{
                name: pup.name, 
                breed: pup.breed, 
                quote: pup.quote, 
                id: pup._id, 
                imagePath: pup.imagePath, 
                rates: pup.rates
            }
        }); 
    }))
    
    .subscribe((transformedPups)=&gt;{
        this.pups = transformedPups
        this.pupsUpdated.next([...this.pups])
     
    }); 
}
</code></pre>
<p>Here's the angular deployment.</p>
<pre><code>apiVersion: apps/v1
kind: Deployment
metadata: 
  name: puprate-deployment
spec: 
  replicas: 1
  selector: 
    matchLabels: 
      component: web
  template: 
    metadata: 
      labels: 
        component: web
    spec: 
      containers: 
        - name: puprate
          image: brandonjones085/puprate
          ports: 
            - containerPort: 4200

---
apiVersion: v1
kind: Service
metadata: 
  name: puprate-cluster-ip-service
spec: 
  type: ClusterIP
  selector: 
    component: web
  ports: 
    - port: 4200
      targetPort: 4200
</code></pre>
<p>And the express deployment.</p>
<pre><code>apiVersion: apps/v1
kind: Deployment
metadata: 
  name: express
spec: 
  replicas: 3
  selector: 
    matchLabels: 
      component: server
  template: 
    metadata: 
      labels: 
        component: server
    spec: 
      containers: 
        - name: server
          image: brandonjones085/puprate-express
          ports: 
            - containerPort: 3000


---
apiVersion: v1
kind: Service
metadata: 
  name: express
spec: 
  type: ClusterIP
  selector: 
    component: server
  ports: 
    - port: 3000
      targetPort: 3000
</code></pre>

Brandon Jones
<p>Your frontend app is making the call from outside your cluster, and therefor needs a way to reach it. Because you are serving http, the best way to set that up will be with an ingress.</p>
<p>First, make sure you have an ingress controller set up in your cluster ( e.g. nginx ingress controller) <a href="https://kubernetes.github.io/ingress-nginx/deploy/#gce-gke" rel="nofollow noreferrer">https://kubernetes.github.io/ingress-nginx/deploy/#gce-gke</a></p>
<p>Then, set up your express with a service (from your question, I see you already have that set up on port 3000, that's good, though in the service I recommend to change the port to 80 - though not critical)</p>
<p>With that, set up your ingress:</p>
<pre class="lang-yaml prettyprint-override"><code>
apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: express
spec:
  rules:
  - host: &lt;a domain you own&gt;
    http:
      paths:
      # NOTICE!! have you express app listen for that path, or set up nginx rewrite rules (I recommend the former, it's much easier to understand)
      - path: /api
        backend:
          serviceName: express
          servicePort: 3000 # or 80 if you decide to change that
</code></pre>
<p>Do the same for your web deployment, so you can serve your frontend directly:</p>
<pre class="lang-yaml prettyprint-override"><code>
apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: web
spec:
  rules:
  - host: &lt;a domain you own&gt;
    http:
      paths:
      - path: /
        backend:
          serviceName: web
          servicePort: 4200 # or 80 if you decide to change that
</code></pre>
<p>Notice that both ingresses are using the same host but different paths - that's important for what's coming next</p>
<p>in your angular app, change that:</p>
<pre class="lang-js prettyprint-override"><code>this.http.get&lt;{message:string, pups: any}&gt;(&quot;http://express:3000/pups&quot;)
</code></pre>
<p>to that:</p>
<pre class="lang-js prettyprint-override"><code>this.http.get&lt;{message:string, pups: any}&gt;(&quot;/api/pups&quot;)
</code></pre>
<p>Browsers will parse that to <code>&lt;domain in your address bar&gt;/api/pups</code></p>
<p>Since you are using GKE, when you set up the ingress controller you will generate a load balancer in the google cloud - make sure that  has a DNS entry that directs there.</p>
<p>I'm assuming you already own a domain, but if you don't yet, just add the ip you got to your personal hosts file until you get one like so:</p>
<pre><code>&lt;ip of load balancer&gt; &lt;domain you want&gt;
# for example
45.210.10.15 awesome-domain.com
</code></pre>
<hr />
<p>So now, use the browser to go to the domain you own - you should get the frontend served to you - and since you are calling your api with an address that starts with <code>/</code>, your api call will go to the same host, and redirected by your ingress to your express app this time, instead of the frontend server.</p>
