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

Posted 2023-02-21

【中文标题】解决开发中未发生的暂存中的 nginx 404 错误

【英文标题】：Resolving nginx 404 error in staging that didn't occur in development

【发布时间】：2020-07-19 20:08:50

【问题描述】：

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

现在我已经从开发中的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 应该处理应用程序路由时。至少有一些线索可供我调查。

【参考方案1】：

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

https://***.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;
  

【讨论】：

如何编辑默认值。 conf 或如何覆盖它。