stuck on trying connect angular frontend to java backend via port 8080

9/1/2019

I'm trying to connect the frontend talking to backend via rest api at port 8080, the frontend runing on nginx with very basic config that serve the static content in root folder and proxy the request to api via /api

Below is the config and deployment.

1/ backend deployment and service yaml file

apiVersion: apps/v1beta1
kind: Deployment
metadata:
  name: wetrust-backend
spec:
  replicas: 1
  template:
    metadata:
      labels:
        app: wetrust-backend
        tier: backend
        track: stable
    spec:
      securityContext:
        runAsUser: 1000
        fsGroup: 1000
      containers:
        - name: backend
          image: "leean/wetrust-backend"
          imagePullPolicy: Always
          ports:
            - containerPort: 8080
          volumeMounts:
            - name: nfs-volume
              mountPath: /home/uploadDir # Please change the destination you like the share to be mounted too
      volumes:
        - name: nfs-volume
          nfs:
            server: 192.168.99.98 # Please change this to your NFS server
            path: /home/uploadDir # Please change this to the relevant share
---
apiVersion: v1
kind: Service
metadata:
  name: wetrust-backend
spec:
  ports:
    - port: 8080
      targetPort: 8080
  selector:
    app: wetrust-backend
    tier: backend

2/ frontend deploy and service yaml file

apiVersion: apps/v1beta1
kind: Deployment
metadata:
  name: wetrust-frontend
spec:
  replicas: 1
  template:
    metadata:
      labels:
        app: wetrust-frontend
        tier: frontend
        track: stable
    spec:
      containers:
        - name: nginx
          image: "leean/wetrust-frontend"
          imagePullPolicy: Always
          ports:
          - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: wetrust-frontend
spec:
  ports:
    - port: 8889
      targetPort: 80
  selector:
    app: wetrust-frontend
    tier: frontend
  type: NodePort

3/ nginx config inside the dist folder of static artifacts to build to image

upstream wetrust-backend {
  server wetrust-backend:8080;
}

server {
  listen 80;
  charset uft-8
  gzip on;
  gzip_vary on;
  gzip_min_length 10240;
  gzip_proxied expired no-cache no-store private auth;
  gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
  gzip_disable "MSIE [1-6]\.";

  #location / {
   # proxy_pass http://backend;
  #}
  location / {
    root   /usr/share/nginx/html;
    index  index.html;
    expires -1;
    add_header Pragma "no-cache";
    add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
    try_files $uri$args $uri$args/ $uri $uri/ /index.html =404;
  }

  location /api/ {
    proxy_pass http://wetrust-backend;
  }

}

I'm now struggling to make the front end talking to the backend by nginx proxy pass as in config , but it no help

after deploy all yaml file without any issue , i can access to the frontedn via the nodeport at service port like 192.168.x.x:30812

the UI worked but failed to connect api at backend port 8080 ( springboot app)

below is the nginx log on the pod hosted frontend

 10.244.0.0 - - [01/Sep/2019:05:30:04 +0000] "GET /Simple-Line-Icons.0cb0b9c589c0624c9c78.woff2?v=2.4.0 HTTP/1.1" 200 30064 "http://192.168.99.98:30812/styles.c40c8aff0199546fb524.css" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0" "-"
2019/09/01 05:30:09 [error] 7#7: *4 open() "/usr/share/nginx/html/api/authenticate" failed (2: No such file or directory), client: 10.244.0.0, server: localhost, request: "POST /api/authenticate HTTP/1.1", host: "192.168.99.98:30812", referrer: "http://192.168.99.98:30812/"
10.244.0.0 - - [01/Sep/2019:05:30:09 +0000] "POST /api/authenticate HTTP/1.1" 404 153 "http://192.168.99.98:30812/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0" "-" 

I would appreciate for your help , it took me too much time on this issue Thank you

-- Leean
kubernetes

0 Answers