解决在开发中未发生的暂存中的 nginx 404 错误

Question

我对网络服务器没有太多经验，而且我发现我不太擅长设置它们或弄清楚它们有什么问题。希望改变这一点。

我得到 "unpredictable" 路由行为，直接在下面描述，现在我已经从开发中的 npm start 切换到 [=17] =] -> nginx 暂存部署：

用户登陆 / 并登录，然后将他们带到 /home
回到家后 /home 如果您刷新页面，您会收到 "404 Not Found: nginx/1.17.9" 错误
这让我相信问题出在 FE nginx 而不是 ingress-nginx
此外，我还有如下所示的路线，当您最初导航到它时，路线正在运行。然后你刷新并得到"404 Not Found: nginx/1.17.9"。它们都恰好是锚点，当用户点击 <a> 时，它会将它们带到路线并展开相应的卡片：
- /home#mydata
- /documents#meeting
- /documents#submit
- /documents#resources
然后我有像下面这样的路线，当您导航到它们时会立即导致 "404 Not Found: nginx/1.17.9"：
- /home/
- /documents/

我很难理解为什么会发生这种情况或如何解决它。

从 ingress-nginx 开始工作，这就是我所拥有的：

# 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: /
    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

# 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

# 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

# default.conf

server {
  listen 3000;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
  }
}

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

关于如何让它正常工作有什么建议吗？在此先感谢您的帮助！

编辑

我在解决其他一些问题后再次处理这个问题。我在 nignx 日志中注意到了这一点：

[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"

显然，它出于某种原因试图导航到 /home 目录。当 react-router-dom 应该处理应用程序路由时。至少有一些线索供我调查。

Answer 1

好的，启动 googline "nginx react-router-dom" 发现了这个答案：

我将 default.conf 更改为以下内容，它现在似乎按预期工作：

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

  location / {
    try_files $uri $uri/ /index.html;
  }
}

解决在开发中未发生的暂存中的 nginx 404 错误

Resolving nginx 404 error in staging that didn't occur in development

nginx

docker

reactjs

kubernetes

nginx-ingress