skip to Main Content

I am trying to prepare my application so that I can deploy it via kuberentes in the cloud. Therefore I installed minikube to get accostumed with how to set up an ingress. Therefore I followed the ingress documentation by kubernetes. (NOTE: I did not expose my frontend service like they do in the beginning of the tutorial, as I understood it’s not needed for an ingress).

But after hours of desperate debugging and no useful help by ChatGPT I am still not able to resolve my bug. Whenever I try to access my application via my costum host (example.com), I get InvalidHostHeader as a response.

For simplicities sake right now my application simply has one deployment with one pod that runs a vuejs frontend. My frontend-deployment.yaml looks like this:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend
  labels:
    app: frontend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
        - name: frontend
          image: XXXXXXXXXXX
          imagePullPolicy: Always
          ports:
            - name: http
              containerPort: 8080

My frontend-service.yaml:

apiVersion: v1
kind: Service
metadata:
  name: frontend
spec:
  ports:
    - name: http
      port: 8080
      targetPort: http
  selector:
    app: frontend
  type: ClusterIP

I use the default NGINX ingress controller of minikube. And my ingress.yaml looks like this:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: my-ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - host: example.com
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: frontend
            port:
              name: http

Obviously, I configure my /etc/hosts file to map my minikube ip address to example.com

Any help and also suggestions on best practices/improvements on the structure of the yaml files is welcome!

2

Answers


  1. Chosen as BEST ANSWER

    I fixed it. Interestingly, it was not about Kubernetes itself. The issue was the configuration of my ingress annotations (plus my vue.config file)

    I got the needed annotations from here

    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /
    nginx.ingress.kubernetes.io/enable-cors: "true"
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
    

    For now, I fixed the issue of invalid host name on the vue side by simply allowing all hosts like this in the vue.config

      devServer: {
    allowedHosts: [
      'all', // https://webpack.js.org/configuration/dev-server/#devserverallowedhosts
    ],
    

    this is obviosly only for local development!


  2. An invalid host header error occurs may be of different reasons as mentioned below:

    1. Incorrect hostname in your configuration. Check and confirm if the
      host name is correct using the kubectl describe command.
    2. Check theimage you are using is existing and have access.
    3. Verify theendpoints and services are configured correctly and running.
    4. Checkfirewall rules if it is blocking the traffic.
    5. Check the DNS is pointing to the correct host and ip. Check the logs for any errors to debug further.

    You can also refer to the blog by managedkube and another blog written by Avinash Thakur for further information.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search