时间戳

首页 > 解决方案 > Next.js 在 Kubernetes 上使用 Nginx

reactjs - Next.js 在 Kubernetes 上使用 Nginx

问题描述

我正在学习 Kubernetes。我正在尝试在 Kubernetes 上使用 Nginx 运行 Next.js，但出现“ 504 Gateway Time-out ”

nginx.yml

apiVersion: v1
kind: ConfigMap
metadata:
  name: nginx-conf
data:
  nginx.conf: |
    worker_processes 5;

    events {
    }

    http {
      # Cache zone
      proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=STATIC:10m inactive=7d use_temp_path=off;

      upstream nextjs_upstream {
        server next;
      }

      server {
        listen 80 default_server;

        server_name _;

        server_tokens off;

        gzip on;
        gzip_proxied any;
        gzip_comp_level 4;
        gzip_types text/css application/javascript image/svg+xml;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        # BUILT ASSETS (E.G. JS BUNDLES)
        # Browser cache - max cache headers from Next.js as build id in url
        # Server cache - valid forever (cleared after cache "inactive" period)
        location /_next/static {
          proxy_cache STATIC;
          proxy_pass http://nextjs_upstream;

          # For testing cache - remove before deploying to production
          add_header X-Cache-Status $upstream_cache_status;
        }

        # STATIC ASSETS (E.G. IMAGES)
        # Browser cache - "no-cache" headers from Next.js as no build id in url
        # Server cache - refresh regularly in case of changes
        location /static {
          proxy_cache STATIC;
          proxy_ignore_headers Cache-Control;
          proxy_cache_valid 60m;
          proxy_pass http://nextjs_upstream;

          # For testing cache - remove before deploying to production
          add_header X-Cache-Status $upstream_cache_status;
        }

        # DYNAMIC ASSETS - NO CACHE
        location / {
          proxy_pass http://nextjs_upstream;
        }
      }
    }
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: nginx
spec:
  replicas: 1
  selector:
    matchLabels:
      app: nginx
  template:
    metadata:
      labels:
        app: nginx
    spec:
      containers:
        - name: nginx
          image: nginx
          ports:
            - containerPort: 80
          volumeMounts:
            - mountPath: /etc/nginx
              readOnly: true
              name: nginx-conf
            - mountPath: /var/log/nginx
              name: log
          imagePullPolicy: Always
      volumes:
        - name: nginx-conf
          configMap:
            name: nginx-conf
            items:
              - key: nginx.conf
                path: nginx.conf
        - name: log
          emptyDir: {}
---
apiVersion: v1
kind: Service
metadata:
  name: nginx
spec:
  selector:
    app: nginx
  ports:
    - port: 80
      targetPort: 80
  type: LoadBalancer

next.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: next
spec:
  replicas: 1
  selector:
    matchLabels:
      app: next
  template:
    metadata:
      labels:
        app: next
    spec:
      containers:
        - name: next
          image: my/next-tw:0.0.1
          ports:
            - containerPort: 3000
          imagePullPolicy: Always
---
apiVersion: v1
kind: Service
metadata:
  name: next
spec:
  selector:
    app: next
  ports:
    - port: 3000
      targetPort: 3000

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Docker 构建的容器在​​本地测试并运行良好docker-compose.yml

请赐教，我做错了什么？

标签： reactjsdockernginxkubernetesnext.js

解决方案

你需要：

  • 安装 入口控制器。
  • 设置 LoadBalancer 服务
  • 将域名映射到负载均衡器 IP。
  • 运行部署
  • 创建 Kubernetes 入口对象

此处描述了所有步骤：setup-ingress-controller。

在定义 Ingress 对象期间可以选择使用注释。您需要为从代理服务器读取响应定义超时。超时仅在两个连续的读取操作之间设置，而不是为整个响应的传输设置。如果代理服务器在这段时间内没有传输任何内容，则连接将关闭。

尝试使用注释nginx.ingress.kubernetes.io/proxy-read-timeout nginx-timeout设置超时。

推荐阅读