angular - Nginx和Kubernetes背后的黑 Angular 页面

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: /$1
 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 时，它将创建一个捕获组并将其发送到适当的服务。

如果将捕获组设置为$1，则将删除根/之后的所有内容，并将请求转发到根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 / foo / bar 传递给echo2-app

有关您的环境的注意事项:

我了解您正在使用NodePort测试访问权限，但是如果您希望关闭该访问权限，则可以将服务设置为ClusterIP，因为它将是Ingress来处理传入流量。

Nodeport端口范围默认为30000-32767。

searchappfront将其设置为80，它将被忽略并且将分配正确的端口。

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