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

您也可以在官方文檔中檢查路徑類型