带有Angular的Kubernetes NGINX Ingress返回错误的MIME类型

如何解决带有Angular的Kubernetes NGINX Ingress返回错误的MIME类型

我有一个kubernetes ingress controller部署到kubernetes的Angular应用程序。有一个带有单节点群集的设置，一个带有多节点群集的设置。两种设置都会出现MIME类型问题，但是单节点可以很快解决它，而在多节点上，延迟是不可接受的。

在多节点群集上，第一个字节的时间大约需要5秒钟：

对example.com的初始调用
runtime-es2015.js
polyfills-es2015.js
appConfig.json（自定义配置文件）
favicon.ico
各种png / svg文件

在正常时间范围内有效的是：

main-es2015.js
scripts.js
styles.css
ng-validate.js

我的集群设置如下：

2个控制平面节点
2个工作节点
与运河的集群联网
使用RKE设置集群（如果有的话）

Angular应用中的index.html包含：

<base href="/">

用于多节点的入口：

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: multi-node-ingress
  namespace: non-default-namespace
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    kubernetes.io/ingress.class: "nginx"
spec:
  rules:
  - host: example.com
    http:
      paths:
        - path: /?(.*)
          backend:
            serviceName: ng-app-name
            servicePort: 80

在我的DNS提供商处，我向两个工作节点都添加了A条目，以将所有流量直接转发给它们。在第4层上没有负载平衡。

借助Open Shift的tutorial，我可以获取.pcap捕获的图像，可以在Wireshark中进行分析。 Content-Type是text/html，用于呼叫例如http://example.com/favicon.svg，结果为404 Not Found。但是，大约5秒钟后（永远不会低于该阈值），它有时会得到解决。

我的容器的nginx-config看起来像这样：

user  nginx;
worker_processes  auto;
...

events {
  worker_connections  1024;
}

http {
  include       /etc/nginx/mime.types;

  server {
    listen 80;

    location / {
      root /usr/share/nginx/html;
      try_files $uri $uri/ /index.html;
    }

    gzip on;
  }
}

我注意到的是，如果我删除行include /etc/nginx/mime.types;，则页面加载将完全失败，并显示Wrong MIME-Type错误。但是，如果存在，则大约需要5.02到5.15秒（从不低于5秒），直到找到资源为止。

在github上有一个issue，这可能与我的问题有关，但是问题是根本没有加载任何东西（MIME类型错误）。我确实加载了页面，但速度太慢了。

关于上述Github问题的一个建议是添加我对配置映射所做的自定义类型module：

kind: ConfigMap
apiVersion: v1
metadata:
  name: nginx-configuration
  namespace: ingress-nginx
data:
  http-snippet: |
    types {
      text/javascript .js;
      module .js;
    }
  default-type: application/octet-stream

将类型添加到入口控制器的nginx.conf中，但无效。
默认类型未选择，仍为text/html。

版本：

Kubernetes 1.18
角度10
nginx：1.19.3-alpine，用于在容器内托管Angular应用

解决方法

DNS响应通常被缓存，因此如果您连续执行两个请求并且第二个请求仍然具有相同的Time to first Byte，则可以消除DNS延迟。您可以通过Wireshark验证DNS延迟。

不同的名称空间几乎没有任何区别。

您没有透露有关云提供商的任何详细信息，但我假设2个工作节点（入口在其中侦听）之间存在负载平衡器（可能减轻了SSL解密的负载）。您可以肯定地启用某种日志记录。

您的nginx入口也保留访问日志，因此您可以检查它们kubectl logs <nginx-ingress-pod> -n nginx-ingress-您必须在每个工作节点（或入口Pod所在的每个节点）上运行此日志。在这些日志中，您会发现nginx从Angular App窗格接收响应所需的时间。

结合Wireshark，负载平衡器日志，nginx入口日志和Angular日志（也许您需要提高它们的日志记录级别才能看到每个HTTP请求），您应该能够查明问题出在哪里。

问题是文件未从同一节点加载，重试机制大约需要5秒钟。可以通过添加node-affinity这样的注释来解决此问题：

nginx.ingress.kubernetes.io/affinity-mode: "persistent"
nginx.ingress.kubernetes.io/affinity: "cookie"

使用此注释，每个后续请求将命中同一节点。对于高流量的网站，这可能是个问题，但对我们来说，这很好。

有关更多详细信息，请参见有关node-affinity的Nginx文档。

带有Angular的Kubernetes NGINX Ingress返回错误的MIME类型

如何解决带有Angular的Kubernetes NGINX Ingress返回错误的MIME类型

解决方法

相关推荐