How to deploy React and Django REST framework on kubernetes using minikube?

6/16/2021

In minikube, my Django app is properly working but now I want to use my backend API in React frontend but I'm not able to do this can anyone help me ?

Here my backend deployment.yml file,

apiVersion: apps/v1
kind: Deployment
metadata:
  name: movie-deployment
spec:
  replicas: 1
  selector:
      matchLabels:
        app: movie-backend
  template:
    metadata:
      labels:
        app: movie-backend
    spec:
      containers:
        - name: movie-backend
          image: javiercode/movie-backend
          env:
            - name: SECRET_KEY
              valueFrom:
                configMapKeyRef:
                  name: movie-env
                  key: SECRET-KEY
            - name: DEBUG
              valueFrom:
                configMapKeyRef:
                  name: movie-env
                  key: DEBUG

---

apiVersion: apps/v1
kind: Deployment
metadata:
  name: postgres-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      app: postgres-container
  template:
    metadata:
      labels:
        app: postgres-container
    spec:
      containers:
        - name: postgres-container
          image: postgres:12.0-alpine
          volumeMounts:
            - name: postgres-volume-mount
              mountPath: /var/lib/postgresql/data
      volumes:
        - name: postgres-volume-mount
          persistentVolumeClaim:
            claimName: postgres-pvc


---

apiVersion: batch/v1
kind: Job
metadata:
  name: django-migrations
spec:
  template:
    spec:
      containers:
        - name: django
          image: javiercode/movie-backend
          command: ["/bin/sh","-c"]
          args: ["python3 manage.py makemigrations;python3 manage.py migrate"]
          env:
            - name: SECRET_KEY
              valueFrom:
                configMapKeyRef:
                  name: movie-env
                  key: SECRET-KEY
            - name: DEBUG
              valueFrom:
                configMapKeyRef:
                  name: movie-env
                  key: DEBUG
      restartPolicy: Never
  backoffLimit: 5

backend service.yml

apiVersion: v1
kind: Service
metadata:
  name: movie-backend-service
spec:
  selector:
    app: movie-backend
  ports:
    - protocol: TCP
      port: 8000
      targetPort: 8000
  type: LoadBalancer

---

apiVersion: v1
kind: Service
metadata:
  name: postgres
spec:
  selector:
    app: postgres-container
  ports:
    - protocol: TCP
      port: 5432
      targetPort: 5432
  type: LoadBalancer

frontend deployment.yml

Here, I'm using the backend API address as kubernetes.docker.internal but I don't know if it's true or not. I want to use my Django API and what address should I write here and also in React how to use it,

currently, I'm using like this

fetch(`${process.env.REACT_APP_API_URL}/api/movies/

I think I need to add port also,in above line

apiVersion: apps/v1
kind: Deployment
metadata:
  name: movie-frontend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: movie-frontend
  template:
    metadata:
      labels:
        app: movie-frontend
    spec:
      containers:
        - name: movie-frontend
          image: javiercode/movie-frontend
          env:
            - name: REACT_APP_API_URL
              value: "kubernetes.docker.internal"

frontend service

apiVersion: v1
kind: Service
metadata:
  name: movie-frontend-service
spec:
  selector:
    app: movie-frontend
  ports:
    - protocol: TCP
      port: 3000
      targetPort: 3000
  type: LoadBalancer

frontend docker file

FROM node 

WORKDIR /app

COPY package.json .

COPY package-lock.json .

RUN npm install

COPY . .

EXPOSE 3000

How can I run my application please can anyone guide me?

-- Malav Mevada
django
docker
kubernetes
minikube
reactjs

0 Answers