Setting up a React application and NodeJS backend in Kubernetes?

Question

I am trying to setup a sample React application wired to a NodeJS backend as two pods in Kubernetes. This is the (mostly) the default CRA and NodeJS application with Express i.e. npx create-react-app my_app.

Both application runs fine locally through yarn start and npm app.js respectively. The React application uses a proxy defined in package.json to communicate with the NodeJS back-end.

React package.json

...
  "proxy": "http://localhost:3001/"
...

React Dockerfile

FROM node:10
WORKDIR /usr/src/app
COPY package*.json ./
RUN yarn
COPY . .
CMD [ "yarn", "start" ]

NodeJS Dockerfile

FROM node:10
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3001
CMD [ "node", "app.js" ]

ui-deployment

apiVersion: extensions/v1beta1
kind: Deployment
metadata:
    name: sample-ui
    namespace: my_namespace
spec:
  replicas: 1
  selector:
    matchLabels:
      app: my_namespace
      component: sample-ui
  template:
    metadata:
      labels:
        app: my_namespace
        component: sample-ui
    spec:
      containers:
      - 
        name: sample-ui
        image: xxx
        imagePullPolicy: IfNotPresent
        ports:
        - containerPort: 3000
          name: http
          protocol: TCP
        resources:
          limits:
            cpu: 100m
            memory: 128Mi
          requests:
            cpu: 100m
            memory: 128Mi

server-deployment

apiVersion: extensions/v1beta1
kind: Deployment
metadata:
    name: sample-server
    namespace: my_namespace
spec:
  replicas: 1
  selector:
    matchLabels:
      app: my_namespace
      component: sample-server
  template:
    metadata:
      labels:
        app: my_namespace
        component: sample-server
    spec:
      containers:
      - 
        name: sample-server
        image: xxx
        imagePullPolicy: IfNotPresent
        ports:
        - containerPort: 3001
          name: http
          protocol: TCP
        resources:
          limits:
            cpu: 100m
            memory: 128Mi
          requests:
            cpu: 100m
            memory: 128Mi

ui-service

apiVersion: v1
kind: Service
metadata:
  name: sample-ui
  namespace: my_namespace
  labels: {app: sample-ui}
spec:
  type: LoadBalancer
  selector:
    component: sample-ui
  ports:
  - name: listen
    protocol: TCP
    port: 3000

server-service

apiVersion: v1
kind: Service
metadata:
  name: sample-server
  namespace: my_namespace
  labels: {app: sample-server}
spec:
  selector:
    component: sample-server
  ports:
  - name: listen
    protocol: TCP
    port: 3001

Both services run fine on my system.

get svc

sample-server            ClusterIP      10.19.255.171   <none>           3001/TCP                     26m
sample-ui                LoadBalancer   10.19.242.42    34.82.235.125    3000:31074/TCP               26m

However, my deployment for the CRA crashes multiple time despite indicating it is still running.

get pods

sample-server-598776c5fc-55jsz                     1/1     Running     0          42m
sample-ui-c75ccb746-qppk2                          1/1     Running     4          2m38s

I suspect that my React Dockerfile is improperly configured but I'm not sure how to write it to work with a NodeJS backend in kubernetes.

a) How can I setup my Dockerfile for my CRA such that it will run in a pod?

b) How can I setup my docker services and pods such that they communicate?

Any information in events ? kubectl describe deployment sample-ui ? kubectl describe pod sample-ui-c75ccb746-qppk2 ? What do you exactly mean by it crashes ? If it actually crashes, you should see some information about it in logs. What does kubectl logs sample-ui-c75ccb746-qppk2 say ? — mario
– mario, Commented Oct 25, 2019 at 11:10
Thanks, I have updated my Dockerfile in the question. I only get yarn run v1.17.3 $ react-scripts start from the kubectl logs. — Carrein
– Carrein, Commented Oct 26, 2019 at 0:39

Sapna · Accepted Answer · 2022-02-09 07:48:54Z

1

You will have to use come API gateway in front of your server or you can use ambassador from kubernetes.

Then you can get your client connected to server.

answered Feb 9, 2022 at 7:48

Sapna

68310 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Harsh Manvar · Accepted Answer · 2022-02-09 09:19:46Z

a) How can I setup my Dockerfile for my CRA such that it will run in a pod?

React docker file is looking good you need to check why container of pod is failing.

Using kubectl describe pod <POD name> or debug more logs using the command kubectl logs <pod name>

How can I setup my docker services and pods such that they communicate?

For this, you are on right track, how server and frontend will communicate in Kubernetes using the service name.

This might weird at first level but Kubernetes DNS takes care of it.

How if you have two service frontend (sample-ui) and backend (sample-server)

sample-ui will send the request to sample-server so they get connected that way.

You can also try this by going inside the sample-ui POD(container)

kubect exec -it sample-ui-c75ccb746-qppk2 -- /bin/bash

now you are inside of sample-ui container let's send request to sample-server from here

if curl not exist you can install it using the apk install curl or apt-get install curl or yum install curl

curl http://sample-server:3001

Magic you might see response from server.

So your while flow goes like

user coming to frontend load balancer service > calling sample-ui service > internally inside kubernetes cluster now your sample-ui calling the sample-server

All the service that you create inside the K8s will be accesible by it's name.

Collectives™ on Stack Overflow

Setting up a React application and NodeJS backend in Kubernetes?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related