Angular nginx和kubernetes背后的黑页

Question

我正在尝试使用 minikube 在 Kubernetes 上部署我的微服务应用程序。我有一个 angular 前端服务和两个后端服务，我使用此配置来午餐部署和服务

apiVersion: apps/v1
kind: Deployment
metadata:
  name: searchservice
  labels:
    app: searchservice
spec:
  selector:
    matchLabels:
      app: searchservice
  template:
    metadata:
      labels:
        app: searchservice
    spec:
      containers:
      - name: searchservice
        image: ayoubdali/searchservice:0.1.9-SNAPSHOT
        ports:
        - containerPort: 8070
---
apiVersion: v1
kind: Service
metadata:
  name: searchservice
spec:
  type: NodePort
  selector:
    app: searchservice
  ports:
  - protocol: TCP
   # Port accessible inside cluster
    port: 8070
   # Port to forward to inside the pod
    targetPort: 8070
    nodePort: 31000

---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: searchappfront
  labels:
    app: searchappfront
spec:
  selector:
    matchLabels:
      app: searchappfront
  template:
    metadata:
      labels:
        app: searchappfront
    spec:
      containers:
      - name: searchappfront
        image: ayoubdali/searchappfront:0.6.5
        ports:
        - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: searchappfront
spec:
  type: NodePort
  selector:
    app: searchappfront
  ports:
  - protocol: TCP
    port: 80
    targetPort: 80
    nodePort: 80

---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: subscriberservice
  labels:
    app: subscriberservice
spec:
  selector:
    matchLabels:
      app: subscriberservice
  template:
    metadata:
      labels:
        app: subscriberservice
    spec:
      containers:
      - name: subscriberservice
        image: ayoubdali/subscriber-service:0.1.0-SNAPSHOT 
        ports:
        - containerPort: 8090
---
apiVersion: v1
kind: Service
metadata:
  name: subscriberservice
spec:
  type: NodePort
  selector:
    app: subscriberservice
  ports:
  - protocol: TCP
    port: 8090
    #targetPort: 80
    nodePort: 31102

以及入口服务的此配置

 apiVersion: networking.k8s.io/v1beta1 # for versions before 1.14 use extensions/v1beta1
 kind: Ingress
 metadata:
   name: ingress
   annotations:
     nginx.ingress.kubernetes.io/rewrite-target: /
 spec:
   rules:
   - host: app.info
     http:
       paths:
       - path: /
         backend:
           serviceName: searchappfront
           servicePort: 80
       - path: /api
         backend:
           serviceName: subscriberservice
           servicePort: 8090

但是当我打开 app.info/ 时，我得到一个空白页面，其中包含 javascript 错误，例如

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

我尝试使用 docker compose 部署应用程序，它工作正常。

Answer 1

当您启用 rewrite-target 时，它将创建一个捕获组并将其发送到适当的服务。

如果将捕获组设置为</code>，根<code>/之后的所有内容都将被丢弃，请求被转发到根path。

为了转发完整的请求，删除rewrite-target行，你的Ingress应该是这样的：

apiVersion: networking.k8s.io/v1beta1
 kind: Ingress
 metadata:
   name: ingress
   annotations:
     kubernetes.io/ingress.class: nginx
 spec:
   rules:
   - host: app.info
     http:
       paths:
       - path: /
         backend:
           serviceName: searchappfront
           servicePort: 80
       - path: /api
         backend:
           serviceName: subscriberservice
           servicePort: 8090

示例：

我部署了两个响应请求的 echo-apps，我抑制了输出以显示路径和在后台处理它的 pod。
- echo1-app正在模拟searchappfront
- echo2-app 正在模拟 subscriberservice
这是我正在使用的入口：

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: echo-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
spec:
  rules:
    - host: app.info
      http:
        paths:
          - path: /
            backend:
              serviceName: echo1-svc
              servicePort: 80
          - path: /api
            backend:
              serviceName: echo2-svc
              servicePort: 80

现在让我们测试命令：

$ kubectl get ingress
NAME           HOSTS      ADDRESS        PORTS   AGE
echo-ingress   app.info   35.188.7.149   80      73m

$ kubectl get pods
NAME                            READY   STATUS    RESTARTS   AGE
echo1-deploy-764d5df7cf-2wx4m   1/1     Running   0          74m
echo2-deploy-7bcb8f8d5f-xlknt   1/1     Running   0          74m

$ tail -n 1 /etc/hosts
35.188.7.149 app.info

$ curl app.info
{"path": "/",
  "os": {"hostname": "echo1-deploy-764d5df7cf-2wx4m"}}

$ curl app.info/foo/bar
{"path": "/foo/bar",
  "os": {"hostname": "echo1-deploy-764d5df7cf-2wx4m"}}

$ curl app.info/api
{"path": "/api",
  "os": {"hostname": "echo2-deploy-7bcb8f8d5f-xlknt"}}

$ curl app.info/api/foo
{"path": "/api/foo",
  "os": {"hostname": "echo2-deploy-7bcb8f8d5f-xlknt"}}

$ curl app.info/api/foo/bar
{"path": "/api/foo/bar",
  "os": {"hostname": "echo2-deploy-7bcb8f8d5f-xlknt"}}

总结一下：

对 app.info/ 的请求将作为 /

echo1-app

对 app.info/foo/bar 的请求将作为 /foo/bar[ 传送到 echo1-app
对 app.info/api 的请求将作为 /api 传递给 echo2-app
对 app.info/api/foo/bar 的请求将作为 /api 传递给 echo2-app /foo/bar

关于您的环境的注意事项：

我知道您正在使用 NodePort 来测试访问权限，但是如果您想关闭该访问权限，您可以将服务设置为 ClusterIP，因为它将是 Ingress处理传入流量的作业。
Nodeport 端口范围默认为 30000-32767.
- searchappfront 已将其设置为 80，这将被忽略并归因于正确的端口。

如果您有任何问题，请在评论中告诉我。

Angular nginx和kubernetes背后的黑页

Angular black page behind nginx and kubernetes

kubernetes

minikube

angular

nginx-ingress