How to deploy frontend(Vue or React) + Nginx with kubernetes?

5/23/2020

I'm trying to deploy Vue JS app on k8s. The frontend was wrapped into an image with Nginx as a static handler. This configuration working when I access just a service with cluster IP and node port but not working with ingress. Tell me please what I'm doing wrong?

Frontend image

FROM node:latest as build-stage
WORKDIR /app
COPY . ./
RUN npm install
RUN npm run build

FROM nginx as production-stage
RUN mkdir /client
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf

deployment

apiVersion: apps/v1
kind: Deployment
metadata:
  name: vue-app-deployment
  labels:
    app: vue-app
spec:
  replicas: 1
  selector:
    matchLabels:
      pod: vue-app
  template:
    metadata:
      labels:
        pod: vue-app
    spec:
      containers:
      - name: vue-app
        image: frontend-image
        imagePullPolicy: IfNotPresent
        ports:
        - containerPort: 80

here is my service

apiVersion: v1
kind: Service
metadata:
  name: vue-app-service
spec:
  selector:
      pod: vue-app
  ports:
  - protocol: TCP
    port: 80
    targetPort: 80
  type: NodePort

and ingress

apiVersion: networking.k8s.io/v1beta1 # for versions before 1.14 use extensions/v1beta1
kind: Ingress
metadata:
  name: example-ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - host: my-shiny-site.com
    http:
      paths:
      - path: /
        backend:
          serviceName: vue-app-service
          servicePort: 80
-- wis-masliev
devops
docker
frontend
kubernetes

0 Answers