I've configured a Kubernetes cluster as follows:
- Webapp pod (with a Vue.js and an API, both within each container)
- Nginx ingress config (with default-http-backend)
- Database pod (which doesn't seem to be the problem here)
- Kube lego (for SSL, in a separate namespace)
Anyways, after I finished the setup, the front-end app (i.e. Vue.js) didn't load any styles, only pure HTML + JS. Opening the Network tab from Firefox I saw a "502" error the CSS file.
Just for context, this is my Vue.js's Dockerfile:
FROM node:lts-alpine
RUN npm install http-server -g
WORKDIR /app
# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./
# install project dependencies
RUN npm install
# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .
RUN npm run build
EXPOSE 8000
CMD [ "http-server", "dist", "-c-1", "-p", "8000" ]
And here is Nginx Controller's log (from kubectl logs [nginx-controller-pod]
): https://pastebin.com/tBfPXJns (couldn't post it here because it is supposedly spam).
Most of the times, only the CSS and .png requests return 502, meanwhile, all JS requests reach the front-end's server.
My Ingress:
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
name: ingress-nginx
annotations:
kubernetes.io/tls-acme: "true"
kubernetes.io/ingress.class: "nginx"
nginx.ingress.kubernetes.io/proxy-body-size: 200m
nginx.ingress.kubernetes.io/rewrite-target: /
nginx.ingress.kubernetes.io/server-snippet: |
add_header 'Access-Control-Expose-Headers' 'access-token,expiry,token-type,uid,client,Access-Token,Expiry,Token-Type,Uid,Client';
spec:
tls:
- hosts:
~all-hosts~
secretName: birthplace-ssl
rules:
- host: api.example.com.br
http:
paths:
- path: /
backend:
serviceName: example-backend-service
servicePort: 9292
- host: example.com.br
http: &default
paths:
- path: /
backend:
serviceName: example-frontend-service
servicePort: 8000
- host: painel.example.com
http: *default
- host: admin.example.com
http: *default
My deployment YAML is properly configured for both services (i.e. using ports 8000 and 9292)
Weirdly though, I can access any of theses assets from a normal GET (external) request.
P.S. At the log...
10.24.0.40 is default-http-backend's cluster IP.
10.24.1.3 is my webapp's IP.