<p>Basically, I'm having difficulty getting <code>nginx</code> to serve the <code>npm build</code> from a CRA web app that is at the subpath <code>/new-admin</code>.</p>
<p>I do have in the <code>package.json</code> <code>&quot;homepage&quot;: &quot;/new-admin&quot;</code> and <code>&lt;Route basename={process.env.PUBLIC_URL}&gt;</code> in the <code>index.js</code>. Works fine in development, but now that I'm trying to make a staging/production copy it isn't and I'm pretty sure it is due to the <code>./nginx/default.conf</code>. Of the various configurations I've tried, none have worked and I either get:</p>
<ul>
<li><code>500 Internal Server Error</code></li>
<li><code>&lt;Uncaught SyntaxError: Unexpected token '&lt;'</code></li>
</ul>
<p>This is what I have:</p>
<pre><code># ingress.yaml

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: &quot;nginx&quot;
    nginx.ingress.kubernetes.io/proxy-body-size: &quot;0&quot;
    nginx.org/client-max-body-size: &quot;500m&quot;
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    nginx.ingress.kubernetes.io/configuration-snippet: |
      rewrite ^(/admin)$ $1/ permanent;
  name: ingress-service-dev-admin
  namespace: default
spec:
  rules:
    - http:
        paths:
          - path: /admin/?(.*)
            backend:
              serviceName: admin-old-cluster-ip-service-dev
              servicePort: 4000  
---
apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: &quot;nginx&quot;
    nginx.ingress.kubernetes.io/configuration-snippet: |
      rewrite ^(/new-admin)$ $1/ permanent;
  name: ingress-service-dev
  namespace: default
spec:
  rules:
    - http:
        paths:
          - path: /new-admin/
            backend:
              serviceName: admin-new-cluster-ip-service-dev
              servicePort: 4001
          - path: /api/
            backend:
              serviceName: api-cluster-ip-service-dev
              servicePort: 5000
          - path: /
            backend:
              serviceName: client-cluster-ip-service-dev
              servicePort: 3000
</code></pre>
<pre><code># Dockerfile for /new-admin/

FROM node:13-alpine as builder
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx
EXPOSE 4001
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/build /usr/share/nginx/html
</code></pre>
<p>This version of the <code>default.conf</code> results in a <code>500 Internal Server Error</code>:</p>
<pre><code># ./nginx/default.conf

server {
  listen 4001;
  root /usr/share/nginx/html;
  index index.html index.htm;

  location /new-admin {
    try_files $uri $uri/ /new-admin/index.html;
  }
}
</code></pre>
<p>This is the associated <code>nginx</code> log:</p>
<pre><code>[admin-new] 2020/10/05 20:31:49 [error] 28#28: *9 rewrite or internal redirection cycle while internally redirecting to &quot;/new-admin/index.html&quot;, client: 172.17.0.4, server: , request: &quot;GET /new-admin/ HTTP/1.1&quot;, host: &quot;192.168.64.5&quot;
[admin-new] 172.17.0.4 - - [05/Oct/2020:20:31:49 +0000] &quot;GET /new-admin/ HTTP/1.1&quot; 500 579 &quot;-&quot; &quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36&quot; &quot;192.168.64.1&quot;
</code></pre>
<p>This version results in <code>&lt;Uncaught SyntaxError: Unexpected token '&lt;'</code>:</p>
<pre><code># ./nginx/default.conf

server {
  listen 4001;
  root /usr/share/nginx/html;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ /index.html;
  }
}
</code></pre>
<p>This seems closest to being correct given it serves the <code>index.html</code>, just not the CSS and JS assets. It does show in the <code>index.html</code>, which should be correct:</p>
<pre><code>&lt;script src=&quot;/new-admin/static/js/2.c6b4376b.chunk.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/new-admin/static/js/main.c24347bf.chunk.js&quot;&gt;&lt;/script&gt;
</code></pre>
<p>I've also noticed when it starts the Pod it says, despite the fact it is building the images from scratch.</p>
<pre><code>[admin-new] /docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
[admin-new] /docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
[admin-new] /docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
[admin-new] 10-listen-on-ipv6-by-default.sh: Getting the checksum of /etc/nginx/conf.d/default.conf
[admin-new] 10-listen-on-ipv6-by-default.sh: error: /etc/nginx/conf.d/default.conf differs from the packaged version
[admin-new] /docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
[admin-new] /docker-entrypoint.sh: Configuration complete; ready for start up
</code></pre>

<p>Actually, came across this answer which was pretty much the exact issue I was experiencing:</p>
<p><a href="https://stackoverflow.com/questions/53207059/react-nginx-routing-to-subdirectory">React &amp; nginx routing to subdirectory</a></p>
<p>So my final <code>./nginx/default.conf</code> looked like this:</p>
<pre><code>server {
  listen 4001;
  root /usr/share/nginx/html;
  index index.html index.htm;

  location = /new-admin {
    try_files $uri $uri/ /index.html =404;
  }

  location ~ ^/new-admin(.*) {
    try_files $1 $1/ /index.html =404;
  }
}
</code></pre>
