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

Question

我对网络服务器没有太多经验，而且我发现我不太擅长设置它们或找出它们的问题所在。希望改变这一点。

现在我已经从开发中的npm start 切换到npm builid -> 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: /$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

# 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

好的，开始谷歌搜索“nginx react-router-dom”并遇到了这个答案：

https://stackoverflow.com/a/43954597/3123109

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

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

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