<p>I know this comes up often, but I've tried the usual remedies:</p>
<ul>
<li><code>&quot;homepage&quot;: &quot;/admin/v2&quot;</code> in the <code>package.json</code></li>
<li><code>&lt;base href=&quot;%PUBLIC_URL%/&quot;&gt;</code> in the <code>index.html</code></li>
<li><code>&lt;BrowserRouter basename='/admin/v2'&gt;</code></li>
</ul>
<p>These things work for my development environment, but not for production. I'm pretty sure the issue is in my <code>nginx.conf</code> for the microservice, that sits behind the <code>ingress-nginx</code> controller.</p>
<p>It is:</p>
<pre><code>server {
  listen 4001;
  root /usr/share/nginx/html;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ /index.html;
  }
}
</code></pre>
<p><strong>Note:</strong> This is an example for my local dev cluster, but the issue is exactly the same regardless.</p>
<pre><code>apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: &quot;nginx&quot;
    cert-manager.io/cluster-issuer: &quot;letsencrypt-dev&quot;
    nginx.ingress.kubernetes.io/ssl-redirect: &quot;true&quot;
    nginx.ingress.kubernetes.io/configuration-snippet: |
      rewrite ^(/admin)$ $1/ permanent;
  name: ingress-dev
  namespace: dev
spec:
  tls:
    - hosts:
        - localhost
      secretName: tls-localhost-dev
  rules:
    - host: localhost
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: client-cluster-ip-service-dev
                port:
                  number: 3000
          - path: /admin
            pathType: Prefix
            backend:
              service:
                name: admin-cluster-ip-service-dev
                port:
                  number: 4000
          - path: /admin/v2
            pathType: Prefix
            backend:
              service:
                name: admin-v2-cluster-ip-service-dev
                port:
                  number: 4001
          - path: /api
            pathType: Prefix
            backend:
              service:
                name: api-cluster-ip-service-dev
                port:
                  number: 5000
</code></pre>
<p>Also, the <code>package.json</code> and <code>index.html</code>:</p>
<pre><code>{
  &quot;name&quot;: &quot;admin-v2&quot;,
  &quot;version&quot;: &quot;0.1.0&quot;,
  &quot;private&quot;: true,
  &quot;homepage&quot;: &quot;/admin/v2&quot;,
  &quot;dependencies&quot;: {
    &quot;@testing-library/jest-dom&quot;: &quot;^5.11.9&quot;,
    &quot;@testing-library/react&quot;: &quot;^11.2.5&quot;,
    &quot;@testing-library/user-event&quot;: &quot;^12.8.1&quot;,
    &quot;@types/jest&quot;: &quot;^26.0.20&quot;,
    &quot;@types/node&quot;: &quot;^12.20.4&quot;,
    &quot;@types/react&quot;: &quot;^17.0.2&quot;,
    &quot;@types/react-dom&quot;: &quot;^17.0.1&quot;,
    &quot;react&quot;: &quot;^17.0.1&quot;,
    &quot;react-dom&quot;: &quot;^17.0.1&quot;,
    &quot;react-scripts&quot;: &quot;4.0.3&quot;,
    &quot;typescript&quot;: &quot;^4.2.2&quot;,
    &quot;web-vitals&quot;: &quot;^1.1.0&quot;
  },
  &quot;scripts&quot;: {
    &quot;start&quot;: &quot;PORT=4001 react-scripts start&quot;,
    &quot;build&quot;: &quot;react-scripts build&quot;,
    &quot;test&quot;: &quot;react-scripts test&quot;,
    &quot;eject&quot;: &quot;react-scripts eject&quot;
  },
  &quot;eslintConfig&quot;: {
    &quot;extends&quot;: [
      &quot;react-app&quot;,
      &quot;react-app/jest&quot;
    ]
  },
  &quot;browserslist&quot;: {
    &quot;production&quot;: [
      &quot;&gt;0.2%&quot;,
      &quot;not dead&quot;,
      &quot;not op_mini all&quot;
    ],
    &quot;development&quot;: [
      &quot;last 1 chrome version&quot;,
      &quot;last 1 firefox version&quot;,
      &quot;last 1 safari version&quot;
    ]
  }
}

</code></pre>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;link rel=&quot;icon&quot; href=&quot;%PUBLIC_URL%/favicon.ico&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
    &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
    &lt;meta
      name=&quot;description&quot;
      content=&quot;Web site created using create-react-app&quot;
    /&gt;
    &lt;!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    --&gt;
    &lt;base href=&quot;%PUBLIC_URL%/&quot;&gt;
    &lt;link rel=&quot;manifest&quot; href=&quot;%PUBLIC_URL%/manifest.json&quot; /&gt;
    &lt;!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike &quot;/favicon.ico&quot; or &quot;favicon.ico&quot;, &quot;%PUBLIC_URL%/favicon.ico&quot; will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    --&gt;
    &lt;title&gt;React App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
    &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
    &lt;!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the &lt;body&gt; tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    --&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>At any rate, I'm pretty sure the issue lies in the <code>nginx.conf</code> so I'm continuing to mess with it, but thought I'd post to see if someone knows what the solution is.</p>
<p>Thanks!</p>
<hr />
<p>EDIT: Not getting anywhere, but continuing to try. My <code>Dockerfile</code> would probably helpful as well:</p>
<pre><code>FROM node:14-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>As you can see, all of the contents of <code>/app/build</code> get copied over to <code>/usr/share/nginx/html</code>. I have verified in the container that all the assets are there and in a subdirectory called: <code>/static/</code> which is where <code>./css</code> and <code>./js</code> are.</p>

cjones
<p>Ok, figured it out... the problem was in the <code>nginx.conf</code>:</p>
<pre><code>server {
  listen 4001;
    root /usr/share/nginx/html;
    index index.html index.htm;

  location / {
    try_files $uri $uri/ /index.html;
    rewrite  ^/admin/v2/?(.*) /$1 break;
  }
}
</code></pre>
