I have a website that I recently wrote a deployment for using kubernetes. When deploying it on my local machine with minikube and viewing it with minikube service srv-website
everything works fine. However, after deploying on GKE and exposing it via an Ingress the images do not load. Hovering over an image path in Insepct Element says "Could not load the image".
I've tried changing the paths to the images but that hasn't fixed the problem.
<img src="./Images/A.png" class="img">
<img src="Images/A.png" class="img">
<img src="/usr/share/nginx/html/Images/A.png" class="img">
The first two work locally, not the third with an absolute container path. None of them work on GKE even though both are running the same image.
Here is my deployment:
apiVersion: v1
kind: ConfigMap
metadata:
name: cfg-website
data:
custom.nginx.conf: |
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ =404;
}
error_page 404 /404.html;
location = /404.html {
root /usr/share/nginx/html;
internal;
}
error_page 401 /401.html;
location = /401.html {
root /usr/share/nginx/html;
internal;
}
# gzip compression
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
# gzip compression
}
---
apiVersion: apps/v1
kind: Deployment
metadata:
name: dep-website
labels:
app: website
spec:
selector:
matchLabels:
app: website
template:
metadata:
labels:
app: website
spec:
volumes:
- name: nginx-conf
configMap:
name: cfg-website
containers:
- name: cnt-website
image: link/to/registry
volumeMounts:
- name: nginx-conf
mountPath: /etc/nginx/conf.d
readOnly: true
ports:
- containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
name: srv-website
labels:
app: website
spec:
type: NodePort
selector:
app: website
ports:
- port: 8080
targetPort: 80
My ingress:
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
name: website-ingress
annotations:
kubernetes.io/ingress.global-static-ip-name: website-ingress
spec:
rules:
- http:
paths:
- path: /
backend:
serviceName: srv-website
servicePort: 8080
The problem was not with my website's image paths, but with the ingress. The ingress was only mapping the path '/' to my website meaning links to images did not work. By chagning the ingress path to '/*' it was fixed as it now allowed for paths beyond '/' to exist on the website.
New Ingress:
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
name: website-ingress
annotations:
kubernetes.io/ingress.global-static-ip-name: website-ingress
spec:
rules:
- http:
paths:
- path: /*
backend:
serviceName: srv-website
servicePort: 8080