title: Next.js with Nginx on Kubernetes
body: <p>I am learning Kubernetes. I am trying to run Next.js with Nginx on Kubernetes, but I got "<strong>504 Gateway Time-out</strong>"</p>
  
  <hr>
  
  <p><code>nginx.yml</code></p>
  
  <pre><code>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
  </code></pre>
  
  <hr>
  
  <p><code>next.yml</code></p>
  
  <pre><code>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
  </code></pre>
  
  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
  
  <p>Docker built containers are tested on local and running fine with <code>docker-compose.yml</code></p>
  
  <p>Please enlighten me, what I am doing wrong?</p>