Setting up a React application and NodeJS backend in Kubernetes?

10/25/2019

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?

-- Carrein
docker
kubernetes
node.js

0 Answers