Устранение ошибки nginx 404 в подготовке, которая не возникала в разработке - PullRequest
0 голосов
/ 07 апреля 2020

У меня нет большого опыта работы с веб-серверами, и я обнаружил, что не слишком хорош в их настройке или выяснении, что с ними не так. В надежде изменить это.

Я получаю "непредсказуемое" поведение при маршрутизации, , описанное непосредственно ниже , теперь, когда я переключился с npm start в dev на npm builid -> nginx поэтапное развертывание:

  • Пользователь приземляется на / и подписывает, что приводит его к /home
  • Однажды дома /home, если вы обновите sh на странице вы получаете "404 Not Found: nginx/1.17.9" ошибку
  • Это заставляет меня поверить, что именно nginx для FE, а не ingress-nginx, это проблема
  • Более того, у меня есть маршруты, подобные следующий, где маршрутизация работает, когда вы изначально переходите к ней. Тогда вы переосмыслите sh и получите "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")
);

Есть какие-нибудь предложения о том, как это работает правильно? Заранее спасибо за помощь!

EDIT

Я снова работаю над этой проблемой после исправления некоторых других. Я заметил это в журнале 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 Ответ

0 голосов
/ 08 апреля 2020

Хорошо, запустил googline "nginx реакции-маршрутизатор-дом" и наткнулся на этот ответ:

{ ссылка }

Я изменил свой default.conf к следующему, и он, кажется, работает сейчас, как и ожидалось:

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

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