K
Q

How to connect back-end with front-end using ngnix in Kubernetes

2/26/2019

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
angular
kubernetes
nginx
nginx-config
nginx-reverse-proxy

Similar Questions

Kubernetes: Redirecting pod STDOUT, STDERR and pod termination log to a PVC file
What are the effects of dead containers on open-shift cluster?
Kubernetes kube-dns restarts on master node
Flush CoreDNS Cache on Kubernetes Cluster
how many models can be deployed in single node in azure kubernetes service?

2 Answers

1/4/2020

@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
Source: StackOverflow
2/26/2019

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
Source: StackOverflow