3

I have a back-end service deployed in Kubernetes (at http://purser.default.svc.cluster.local:3030) and a front-end angular 6 application with nginx.conf as 

upstream purser {
  server purser.default.svc.cluster.local:3030;
}

server {
  listen 4200;

  location / {
   proxy_pass http://purser;
   root /usr/share/nginx/html/appDApp;
   index index.html index.htm;
   try_files $uri $uri/ /index.html =404;
  }
}

In angular code we are using http.get('http://purser.default.svc.cluster.local:3030', {observe: 'body', responseType: 'json'})

Case1: With proxy_pass set in nginx.conf when we hit the ui service it redirects to back-end and gives json output directly from back-end.

Case2: Without proxy_pass when we hit front-end service it shows the UI but no data is coming from backend i.e, browser is not able understand http://purser.default.svc.cluster.local:3030

enter image description here

Kaladin
  • 321
  • 2
  • 11
  • I hope you are not trying to connect frontend directly whit backend without a middle ware. – Atomzwieback Feb 26 '19 at 07:52
  • Yes, we are using. You can check it here: https://github.com/vmware/purser/blob/master/cmd/controller/api/api.go – Kaladin Feb 26 '19 at 07:57
  • Without nginx if we keep both of them in the same pod everything works fine i.e, both are accessible using localhost – Kaladin Feb 26 '19 at 07:58

2 Answers2

4

Solved it using this nginx.conf

upstream purser {
  server purser.default.svc.cluster.local:3030;
}

server {
  listen 4200;

  location /api {
    proxy_pass http://purser;
  }

  location / {
    root /usr/share/nginx/html/purser;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}

and calling backend from frontend using BACKEND_URL = window.location.protocol + '//' + window.location.host + '/api/'

Explanation: Frontend when it requires data from backend calls itself at path /api, nginx finds this path and according to configuration forwards it to backend kubernetes service purser.default.svc.cluster.local:3030 using proxy_pass

Kaladin
  • 321
  • 2
  • 11
0

@Kaladin your approach was almost there, but I think there is something missing.

What I did was 

upstream gateway {
  server gateway-cip-service:3000;
}

server {
  listen 80;

  location /api {
    rewrite /api/(.*) /$1 break;
    proxy_pass http://gateway;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

The biggest headache was to find out the proxy header upgrade, such a pain.

Consider that in my backend my routes do not have an "api" prefix, that is why I use "rewrite /api/(.*) /$1 break;" to take only whatever that comes after /api/ Otherwise, you can avoid that line of code.

vimazaco
  • 1