<p>I don't have much experience with web servers and I'm finding out I'm not too good at setting them up or figuring out what is wrong with them. Hoping to change that.</p>

<p>I'm getting "unpredictable" routing behavior, <strong>described directly below</strong>, now that I've switched from <code>npm start</code> in dev to an <code>npm builid</code> -> <code>nginx</code> staging deployment:</p>

<ul>
<li>User lands at <code>/</code> and signs in which brings them to <code>/home</code> </li>
<li>Once at home <code>/home</code> if you refresh the page you get a <code>"404 Not Found: nginx/1.17.9"</code> error</li>
<li>This leads me to believe it is the <code>nginx</code> for the FE and not <code>ingress-nginx</code> that is the issue</li>
<li>Further more I have routes like the following where the routing is working when you initially navigate to it. Then you refresh and get <code>"404 Not Found: nginx/1.17.9"</code>. They all happen to be anchors that when the user clicks on the <code>&lt;a&gt;</code> it takes them to the route and expands a corresponding card:

<ul>
<li><code>/home#mydata</code></li>
<li><code>/documents#meeting</code></li>
<li><code>/documents#submit</code></li>
<li><code>/documents#resources</code></li>
</ul></li>
<li>Then I have routes like the following that result in the <code>"404 Not Found: nginx/1.17.9"</code> immediately when you navigate to them:

<ul>
<li><code>/home/</code></li>
<li><code>/documents/</code></li>
</ul></li>
</ul>

<p>I'm struggling to understand why this happening or how to fix it.</p>

<p>Working in from <code>ingress-nginx</code>, this is what I have:</p>

<pre><code># ingress.yaml

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: "nginx"
    nginx.ingress.kubernetes.io/add-base-url: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    nginx.ingress.kubernetes.io/proxy-body-size: "0"
    nginx.org/client-max-body-size: "500m"
    nginx.ingress.kubernetes.io/use-regex: "true"
  name: ingress-service-dev
  namespace: default
spec:
  rules:
    - http:
        paths:
          - path: /?(.*)
            backend:
              serviceName: client-cluster-ip-service-dev
              servicePort: 3000
          - path: /admin/?(.*)
            backend:
              serviceName: admin-cluster-ip-service-dev
              servicePort: 4000
          - path: /api/?(.*)
            backend:
              serviceName: api-cluster-ip-service-dev
              servicePort: 5000

</code></pre>

<pre><code># client.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: client-deployment-dev
spec:
  replicas: 1
  selector:
    matchLabels:
      component: client
  template:
    metadata:
      labels:
        component: client
    spec:
      containers:
        - name: client
          image: testappacr.azurecr.io/test-app-client
          ports:
            - containerPort: 3000
          env:
          - name: DOMAIN
            valueFrom:
              secretKeyRef:
                name: test-app-dev-secrets
                key: DOMAIN 
---
apiVersion: v1
kind: Service
metadata:
  name: client-cluster-ip-service-dev
spec:
  type: ClusterIP
  selector:
    component: client
  ports:
    - port: 3000
      targetPort: 3000
</code></pre>

<pre><code># Dockerfile

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

FROM nginx
EXPOSE 3000
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/build /usr/share/nginx/html
</code></pre>

<pre><code># default.conf

server {
  listen 3000;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
  }
}
</code></pre>

<pre><code>// index.js
ReactDOM.render(
  &lt;Provider store={store}&gt;
    &lt;ConnectedRouter history={history}&gt;
      &lt;div className="content"&gt;
        &lt;Navigation /&gt;
        &lt;Messages /&gt;
        &lt;App&gt;
          &lt;Switch&gt;
            &lt;Route 
              exact 
              path="/home/" 
              component={protectedRoute(Home)} 
            /&gt;
            &lt;Route
              exact
              path="/documents/"
              component={protectedRoute(Documents)}
            /&gt;
            &lt;Route 
              exact 
              path="/results/" 
              component={protectedRoute(Results)}  
            /&gt;
            &lt;Route 
              exact 
              path="/contact/" 
              component={protectedRoute(Contact)}  
            /&gt;
            &lt;Route
              exact
              path="/account/"
              component={protectedRoute(AccountSettings)}
            /&gt;
            &lt;Route
              exact
              path="/auth/security_questions/f=:f&amp;i=:id&amp;k=:key/"
              component={SecurityQuestions}
            /&gt;
            &lt;Route
              exact
              path="/auth/set_password/f=:f&amp;i=:id&amp;k=:key/"
              component={SetPassword}
            /&gt;
            &lt;Route
              // exact
              path="/auth/setup_user/f=:f&amp;i=:id&amp;k=:key/"
              component={SetupUser}
            /&gt;
            &lt;Route
              exact
              path="/auth/expired_key/f=:f&amp;i=:id&amp;k=:key/"
              component={ExpiredKey}
            /&gt;
            &lt;Route 
              exact 
              path="/" 
              component={Auth}  
            /&gt;
            &lt;Route 
              component={ErrorPage} 
            /&gt;
          &lt;/Switch&gt;
        &lt;/App&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    &lt;/ConnectedRouter&gt;
  &lt;/Provider&gt;,
  document.querySelector("#root")
);
</code></pre>

<p>Any suggestions for how to get this working properly? Thanks in advance for the help!</p>

<p><strong>EDIT</strong></p>

<p>I'm working on this issue again after fixing some others. I noticed this in the <code>nignx</code> log:</p>

<pre><code>[client-deployment-dev-775584cdf5-4ss98 client] 2020/04/08 16:47:23 [error] 6#6: *1 open() "/usr/share/nginx/html/home" failed (2: No such file or directory), client: 172.17.0.3, server: , request: "GET /home HTTP/1.1", host: "192.168.39.37"
</code></pre>

<p>Apparently, it is trying to navigate to a <code>/home</code> directory for some reason. when <code>react-router-dom</code> should be handling the app routing. At least some clue for me to look into.</p>

cjones
<p>Ok, started googline "nginx react-router-dom" and came across this answer:</p>

<p><a href="https://stackoverflow.com/a/43954597/3123109">https://stackoverflow.com/a/43954597/3123109</a></p>

<p>I changed my <code>default.conf</code> to the following and it appears to be working now as expected:</p>

<pre><code>server {
  listen 3000;
  root /usr/share/nginx/html;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ /index.html;
  }
}
</code></pre>
