<p>Hy</p>

<p>We're trying to get our website working on kubernetes (running in a container using nginx). We use ingress to route to the site, here is our configuration:</p>

<p>nginx-conf:</p>

<pre><code>server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}
</code></pre>

<p>Kubernetes deployment:</p>

<pre><code>apiVersion: apps/v1beta1
kind: Deployment
metadata:
  name: mywebsite
spec:
  replicas: 2
  template:
    metadata:
      labels:
        app: mywebsite
    spec:
      containers:
      - name: mywebsite
        image: containerurl/xxx/mywebsite:latest
        ports:
        - containerPort: 80

---
apiVersion: v1
kind: Service
metadata:
  name: mywebsite
spec:
  ports:
  - port: 82
    targetPort: 80

  selector:
    app: mywebsite
</code></pre>

<p>Ingress config:</p>

<pre><code>apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: myIngress
  annotations:
    kubernetes.io/tls-acme: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  tls:
  - hosts:
    - xxx.com
    secretName: tls-secret
  rules:
  - host: xxx.com
    http:
      paths:
      - path: /mywebsite
        backend:
          serviceName: mywebsite
          servicePort: 82
</code></pre>

<p>When i go to xxx.com/mywebiste, the index.html is loading, but the css and js are not loaded (404):</p>

<p>index.html:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;My Website&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
  &lt;link href="/styles.30457fcf45ea2da7cf6a.css" rel="stylesheet"&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;div id="react-root"&gt;&lt;/div&gt;
  &lt;script type="text/javascript" src="/app.171d6a95cf24d8abab14.js"&gt;&lt;/script&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>...because it trys to get the resources here, as example of the css:</p>

<pre><code>xxx.com/styles.30457fcf45ea2da7cf6a.css
</code></pre>

<p>...instead of:</p>

<p>xxx.com/mywebsite/styles.30457fcf45ea2da7cf6a.css</p>

<p>If tried different things like:</p>

<pre><code>nginx.ingress.kubernetes.io/add-base-url
nginx.ingress.kubernetes.io/app-root
</code></pre>

<p>...etc., but nothing seems to work.</p>

<p>Any ideas? Thanks for your help.</p>

<p>Regards,
Peter</p>

Peter Wyss
<p>This is not a routing problem on nginx part, but the browser trying to access an absolute URI from the root of your domain. Use relative URIs (remove the leading slash):</p>

<pre><code>&lt;link href="styles.30457fcf45ea2da7cf6a.css" rel="stylesheet"&gt;&lt;/head&gt;
&lt;script type="text/javascript" src="app.171d6a95cf24d8abab14.js"&gt;&lt;/script&gt;&lt;/body&gt;
</code></pre>
