kubernetes react-router + nginx ingress refresh在path不是“/”时导致白色

gr8qqesn  于 2023-04-29  发布在  Kubernetes
关注(0)|答案(4)|浏览(131)

所以我已经试着解决这个问题好几天了,我被卡住了。
我的应用程序正在运行,我可以访问该网站时,我去默认的网址(例如。我可以毫无问题地刷新这个URL,并且只要我不刷新任何其他页面,我就可以通过react router浏览正在呈现的页面。(例如)刷新www. example www.example.com 不工作,我得到一个404错误。
我当前的ingress文件看起来像:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: myApp-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    cert-manager.io/cluster-issuer: letsencrypt-prod
    nginx.ingress.kubernetes.io/use-regex: "true"
spec:
  tls:
    - hosts:
        - my.app.com
      secretName: myApp-tls
  rules:
    - host: "my.app.com"
      http:
        paths:
          - pathType: Prefix
            path: /.*
            backend:
              service:
                name: myApp
                port:
                  number: 80

我已经添加了许多最常见的问题的回复,但它只会让事情变得更糟,例如它尝试加载的所有JavaScript文件都出现了“意外令牌'|'”错误的白色,而没有任何页面加载。
例如,我试过:

nginx.ingress.kubernetes.io/rewrite-target: /
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    nginx.ingress.kubernetes.io/rewrite-target: /$2
    nginx.ingress.kubernetes.io/configuration-snippet: |
      try_files $uri $uri/ /index.html;

我已经尝试为应用程序中可用的每个路由添加额外的路径到控制器,我已经尝试将路径设置为“/”或“/(。* )”,什么都不起作用。
任何帮助将不胜感激!谢谢!
编辑:

# latest active node image
FROM node:14-alpine

# Create app directory
RUN mkdir /app
RUN mkdir -p /app/node_modules && chown -R node:node /app

WORKDIR /app

COPY package.json /app
COPY tsconfig.json /app
COPY webpack.config.js /app
COPY .env.prod .env
ADD src /app/src
ADD dist /app/dist
RUN mkdir -p /app/dist/js && chown -R node:node /app/dist/js

ADD server /app/server
ADD assets /app/assets
ADD config /app/config

ARG NPM_TOKEN
COPY .npmrc_docker .npmrc
RUN npm cache verify
RUN npm install
RUN npm run build:prod
RUN rm -f .npmrc

# Expose necessary port
EXPOSE 3000

# Compile typescript and start app
CMD ["cross-env", "NODE_ENV=production", "PORT=3000", "ts-node", "server/server"]

我也试过用CMD ["npx", "http-server", "./dist", "-p", "3000"]来做,因为服务器部分只做以下事情:

this.app.use(express.static(path.resolve(__dirname, "../dist")));
      this.app.get("*", (request: express.Request, response: express.Response) => {
        response.sendFile(path.resolve(__dirname, "../dist/index.html"));
      });
3npbholx

3npbholx1#

您的path: /.*没有捕获组,因此/$1/$2未定义。
尝试以下操作:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: myApp-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    cert-manager.io/cluster-issuer: letsencrypt-prod
    nginx.ingress.kubernetes.io/rewrite-target: /$1
spec:
  tls:
    - hosts:
        - my.app.com
      secretName: myApp-tls
  rules:
    - host: "my.app.com"
      http:
        paths:
          - pathType: Prefix
            path: /(.*)
            backend:
              service:
                name: myApp
                port:
                  number: 80
xj3cbfub

xj3cbfub2#

所以我想我找到了问题,现在它似乎正在工作,我仍然遇到一个问题,cmd shift r偶尔会给出一个意想不到的令牌,但作为一个整体,它似乎工作。
我将运行脚本添加到包中。json,我现在用它作为CMD
CMD ["npm", "run", "start:prod"]
我还将webpack构建中的javascript移回了dist目录的根目录。
我真的不明白为什么它现在工作,如果我找到更多的信息,我会在这里更新它。
编辑:
事实证明,这并不起作用,我认为在某个时候,应用程序被缓存,它只是看起来像它的工作,仍然卡住,并希望找到一个修复这个。

j1dl9f46

j1dl9f463#

好吧,我找到真实的的问题了。
我的域名同时使用DigitalOcean和Microsoft名称服务器。我在DO上加了A记录,但我想两个都需要。所以我把A记录添加到另一个记录中,现在我的问题中的配置工作得很好。

juud5qan

juud5qan4#

配置静态内容部署镜像可以通过下面的Nginx配置来解决:

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    sendfile on;

    server {
        listen 80;
        server_name localhost;

        root /usr/share/nginx/html;

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

        error_page 404 /404.html;
        location = /404.html {
            internal;
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            internal;
        }
    }
}

特别注意try_files $uri $uri/ /index。html;它做的工作
你的docker文件看起来像这样

FROM nginx:mainline-alpine3.17
COPY nginx.conf /etc/nginx/nginx.conf
COPY ./dist /usr/share/nginx/html

相关问题