webpack react ingress-nginx kubernetes 显示网关错误

Question

所有的部署都在运行，所有的 pod 都是健康的。 ingress-nginx 正在运行。 当我运行kubectl get ing时：

NAME          CLASS    HOSTS       ADDRESS        PORTS   AGE
ingress-srv   <none>   myapp.com   192.168.49.2   80      13m

我将主机文件设置为入口。

这是 ingress-srv.yml

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-srv
  annotations:
    kubernetes.io/ingress.class: "nginx"
    nginx.ingress.kubernetes.io/use-regex: "true"
spec:
  defaultBackend:
    service:
      name: nginx-ingress-default-backend
      port:
        number: 80

  rules:
    - host: myapp.com
      http:
        paths:
          - path: /posts
            pathType: Exact
            backend:
              service:
                name: query-srv
                port:
                  number: 4002
          - path: /?(.*)
            pathType: Exact // I tried "Prefix"
            backend:
              service:
                name: client-srv
                port:
                  number: 8080

问题入口 api 未正确路由。 并且 react 应用程序是使用 webpack-dev-server 设置的。 它的端口设置为 8080。这是 client-depl.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: client-depl
spec:
  replicas: 1
  selector:
    matchLabels:
      app: client
  template:
    metadata:
      labels:
        app: client
    spec:
      containers:
        - name: client
          image: kali/client
---
apiVersion: v1
kind: Service
metadata:
  name: client-srv
spec:
  selector:
    app: client
  ports:
    - name: client
      protocol: TCP
      port: 8080
      targetPort: 8080

客户端的 webpack 配置：

module.exports = {
  mode: "development",
  entry: ["regenerator-runtime/runtime", "./index.js"],
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "main-bundle.js",
    publicPath: "/",
  },
  module: {
    rules: [{ test: /\.js$/, loader: "babel-loader", exclude: /node_modules/ }],
  },
  devtool: "eval-cheap-source-map",
  devServer: {
    historyApiFallback: true,
    contentBase: path.resolve(__dirname, "public"),
    overlay: true,
  },
};

Answer 1

首先要注意一点：webpack 开发服务器不打算用于在生产中为 react 应用程序提供服务。 您可能想研究像 nginx 这样的替代方案。

您从入口收到BadGateway错误。 这意味着入口识别配置，但无法到达真正的服务。 通常这是由端口映射问题引起的，但是由于您声明使用端口 8080 运行开发服务器并在 kubernetes 服务中也配置了该端口，因此应该没问题。

我注意到您的部署没有声明端口，这应该是固定的：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: client-depl
spec:
  replicas: 1
  selector:
    matchLabels:
      app: client
  template:
    metadata:
      labels:
        app: client
    spec:
      containers:
        - name: client
          image: kali/client
          ports:
          - containerPort: 8080

但是在侦听端口旁边的连接时还需要考虑一件事：要使用的网络接口。 webpack 开发服务器预配置为仅在环回 (localhost) 接口上侦听，并且在外部不可用。 毕竟它是一个开发服务器。

这可以在 webpack 配置或命令行中使用不同的监听地址进行更改：

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0'
  }
};

CLI: webpack serve --host 0.0.0.0

Answer 2

因为您在入口定义中使用pathType: Exact ，并且 exact 期望像https://<url>//?(.*). 您需要将其更改为pathType: Prefix ı如果您愿意使用前缀/?(.*)来匹配和路由诸如http://<url>/<sample>类的 url

您也可以在官方文档中检查路径类型