working on kubernetes deployment, and removed proxy

README.md

@@ -31,8 +31,6 @@ Then, point the frontend at your freshly deployed backend, and push it as well:
 $ cd ../frontend
 $ vim manifest.yml
 ...
-    # Enter the route of the backend application you just pushed
-    REACT_APP_API_URL: https://pong-backend.mycf.example
 $ cf push
 ...
   routes:

backend/main.go

@@ -21,9 +21,9 @@ func main() {
 		port = 8080
 	}
 	q := queue.New(count)
-	http.HandleFunc("/list", List(q))
-	http.HandleFunc("/add", Add(q))
-	http.HandleFunc("/remove", Remove(q))
+	http.HandleFunc("/backend/list", List(q))
+	http.HandleFunc("/backend/add", Add(q))
+	http.HandleFunc("/backend/remove", Remove(q))
 	err = http.ListenAndServe(fmt.Sprintf(":%d", port), nil)
 	if err != nil {
 		fmt.Printf("Done serving, error: %s \n", err)

backend/manifest.yml

@@ -4,6 +4,8 @@ applications:
   memory: 64M
   buildpack: go_buildpack
   command: backend
+  routes:
+  - route: https://pong-queue.cfapps.io/backend
   env:
     GOPACKAGENAME: github.com/benjamintf1/queue-app/backend
     RESOURCE_COUNT: 2

frontend/manifest.yml

@@ -2,8 +2,9 @@
 applications:
 - name: pong-queue
   memory: 256M
+  routes:
+  - route: https://pong-queue-staging-test.cfapps.io/
   buildpack: https://github.com/pianohacker/create-react-app-buildpack.git
   env:
     OPTIMIZE_MEMORY: true
     NODE_ENV: production
-    REACT_APP_API_URL: https://pong-backend.cfapps.io

frontend/package.json

@@ -21,6 +21,5 @@
   "eslintConfig": {
     "extends": "react-app",
     "eqeqeq": 0
-  },
-  "proxy": "http://localhost:8080/"
+  }
 }

frontend/src/Pong.js

@@ -14,7 +14,6 @@ import Favicon from './Favicon';
 import Notifier from './Notifier';
 import Queue from './Queue';
 
-const API_URL = process.env.REACT_APP_API_URL || "http://localhost:8080";
 const REFRESH_PERIOD = 5 * 1000;
 
 function PongHeader({ availableResources }) {
@@ -59,16 +58,16 @@ class Pong extends Component {
     const oldPosition = oldQueue.findIndex( ( { Name } ) => Name === lastAddedName );
     const newPosition = newQueue.findIndex( ( { Name } ) => Name === lastAddedName );
 
-    if ( newPosition !== -1 && 
-        newPosition < oldPosition && 
+    if ( newPosition !== -1 &&
+        newPosition < oldPosition &&
         oldPosition >= resourceCount &&
         newPosition < resourceCount ) {
       this.notifications.show();
     }
   }
 
   refreshList() {
-    fetch(API_URL + "/list")
+    fetch("/backend/list")
       .then(response => response.json())
       .then(({ Queue: queue, ResourceCount: resourceCount }) => {
         this.maybeNotify( queue );
@@ -98,7 +97,7 @@ class Pong extends Component {
       return newQueue;
     } );
     fetch(
-      API_URL + "/remove",
+      "/backend/remove",
       {
         method: "POST",
         body: JSON.stringify({ Name: name }),
@@ -114,7 +113,7 @@ class Pong extends Component {
       lastAddedName: name,
     }) );
     fetch(
-      API_URL + "/add",
+      "/backend/add",
       {
         method: "POST",
         body: JSON.stringify({ Name: name }),

k8s/deployment.yml

@@ -1,60 +1,88 @@
 apiVersion: apps/v1
 kind: Deployment
 metadata:
-    name: pong-queue
+    name: pong-backend
     labels:
-      app: pong
+      app: pong-backend
 spec:
   replicas: 1
   selector:
     matchLabels:
-      app: pong
+      app: pong-backend
   template:
     metadata:
       labels:
-        app: pong
+        app: pong-backend
     spec:
       containers:
       - name: queue-backend
         image: benjamintf1/queue-backend:latest
+        imagePullPolicy: Always
         ports:
         - containerPort: 8080
         env:
         - name: RESOURCE_COUNT
           value: "2"
         - name: PORT
           value: "8080"
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+    name: pong-frontend
+    labels:
+      app: pong-frontend
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: pong-frontend
+  template:
+    metadata:
+      labels:
+        app: pong-frontend
+    spec:
+      containers:
       - name: queue-frontend
         image: benjamintf1/queue-frontend:latest
+        imagePullPolicy: Always
         ports:
         - containerPort: 3000
         env:
         - name: REACT_APP_SHOW_TIME_STARTED
           value: "true"
         - name: REACT_APP_HIGHLIGHT_TIME_STARTED_AFTER
           value: "20"
-        - name: REACT_APP_API_URL
-          value: " "
-        - name: DANGEROUSLY_DISABLE_HOST_CHECK
-          value: "true"
-
 ---
 kind: Service
 apiVersion: v1
 metadata:
-  name: pong
+  name: pong-backend
   annotations:
     cloud.google.com/app-protocols: '{"frontend":"HTTPS","frontend":"HTTP"}'
     service.alpha.kubernetes.io/app-protocols: '{"frontend":"HTTPS","frontend":"HTTP"}'
 spec:
     type: NodePort
     selector:
-      app: pong
+      app: pong-backend
     ports:
       - name: backend
         protocol: TCP
-        port: 8081
+        port: 8080
         targetPort: 8080
+---
+kind: Service
+apiVersion: v1
+metadata:
+  name: pong-frontend
+  annotations:
+    cloud.google.com/app-protocols: '{"frontend":"HTTPS","frontend":"HTTP"}'
+    service.alpha.kubernetes.io/app-protocols: '{"frontend":"HTTPS","frontend":"HTTP"}'
+spec:
+    type: NodePort
+    selector:
+      app: pong-frontend
+    ports:
       - name: frontend
         protocol: TCP
         port: 8080
@@ -69,6 +97,22 @@ metadata:
 spec:
   tls:
   - secretName: tls-secret
-  backend:
-    serviceName: pong
-    servicePort: 8080
+  rules:
+  - http:
+      paths:
+      - path: /*
+        backend:
+          serviceName: pong-frontend
+          servicePort: 8080
+      - path: /list
+        backend:
+          serviceName: pong-backend
+          servicePort: 8080
+      - path: /add
+        backend:
+          serviceName: pong-backend
+          servicePort: 8080
+      - path: /remove
+        backend:
+          serviceName: pong-backend
+          servicePort: 8080