[英]webpack react ingress-nginx kubernetes shows Bad Gateway
All the deployments are running, all the pods are healthy.所有的部署都在运行,所有的 pod 都是健康的。 ingress-nginx is running.
ingress-nginx 正在运行。 when I run
kubectl get ing
:当我运行
kubectl get ing
时:
NAME CLASS HOSTS ADDRESS PORTS AGE
ingress-srv <none> myapp.com 192.168.49.2 80 13m
I set the hosts file for ingress.我将主机文件设置为入口。
this is the ingress-srv.yml这是 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
the issue ingress api is not routing correctly.问题入口 api 未正确路由。 and react app is set up with webpack-dev-server.
并且 react 应用程序是使用 webpack-dev-server 设置的。 it's port is set to 8080. this is client-depl.yml
它的端口设置为 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 config for client:客户端的 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,
},
};
First a word a caution: The webpack dev server is not intended to be used to serve the react app in production.首先要注意一点:webpack 开发服务器不打算用于在生产中为 react 应用程序提供服务。 You might want to investigate an alternative like nginx.
您可能想研究像 nginx 这样的替代方案。
You get an error of BadGateway
from your ingress.您从入口收到
BadGateway
错误。 That means that the ingress recognizes the configuration, but can not reach the real service.这意味着入口识别配置,但无法到达真正的服务。 Usually this is caused by a problem of the port mapping, but since you stated that you run the dev server with port 8080 and configured that in the kubernetes services as well, it should be fine.
通常这是由端口映射问题引起的,但是由于您声明使用端口 8080 运行开发服务器并在 kubernetes 服务中也配置了该端口,因此应该没问题。
I noticed that your deployment does not declare the port, this should be fixed:我注意到您的部署没有声明端口,这应该是固定的:
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
But there is one more thing to consider when listening for connections beside the port: The network interface to use.但是在侦听端口旁边的连接时还需要考虑一件事:要使用的网络接口。 The webpack dev server is preconfigured to listen only on the loopback (localhost) interface and to not be available externally.
webpack 开发服务器预配置为仅在环回 (localhost) 接口上侦听,并且在外部不可用。 It is a dev server after all.
毕竟它是一个开发服务器。
This can be changed using a different listen address, either in the webpack configuration or on the command line:这可以在 webpack 配置或命令行中使用不同的监听地址进行更改:
module.exports = {
//...
devServer: {
host: '0.0.0.0'
}
};
CLI: webpack serve --host 0.0.0.0
CLI:
webpack serve --host 0.0.0.0
Because you are using pathType: Exact
in your ingress definiton and exact expects that exact path like https://<url>//?(.*).
因为您在入口定义中使用
pathType: Exact
,并且 exact 期望像https://<url>//?(.*).
You need to change it to pathType: Prefix
ıf you are willing to use prefix /?(.*)
to match and route with urls such as http://<url>/<sample>
您需要将其更改为
pathType: Prefix
ı如果您愿意使用前缀/?(.*)
来匹配和路由诸如http://<url>/<sample>
类的 url
Also you can check path types in official documentation您也可以在官方文档中检查路径类型
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.