Nginx, FPM in kubernetes pod - css are not rendered

Question

I am running FPM and nginx as two containers in one pod. My app is working, I can access it but the browser do not render the CSS files. No errors in the console. My deployment file:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: test
  labels:
    app: test
spec:
  replicas: 1
  selector:
    matchLabels:
      app: test
  template:
    metadata:
      labels:
        app: test
    spec:
      volumes:
        - name: shared-files
          emptyDir: {}
    
        - name: nginx-config-volume
          configMap:
            name: test
      containers:
        - image: test-php
          name: app
          ports:
            - containerPort: 9000
              protocol: TCP
          volumeMounts:
            - name: shared-files
              mountPath: /var/appfiles
          lifecycle:
            postStart:
              exec:
                command: ['sh', '-c', 'cp -r /var/www/* /var/appfiles']
        
        - image: nginx
          name: nginx
          ports:
            - containerPort: 80
              protocol: TCP
          volumeMounts:
            - name: shared-files
              mountPath: /var/appfiles
            - name: nginx-config-volume
              mountPath: /etc/nginx/nginx.conf
              subPath: nginx.conf

Nginx config:

events {
}
http {
    server {
            listen       80;
            root   /var/appfiles/;
            index index.php index.html index.htm;
   

            # Logs
            access_log /var/log/nginx/tcc-webapp-access.log;
            error_log /var/log/nginx/tcc-webapp-error.log;

            location / {
                # try_files $uri $uri/ =404;
                # try_files $uri $uri/ /index.php?q=$uri&$args;
                    try_files $uri $uri/ /index.php?$query_string;
            }


            location ~ \.php$ {
                    fastcgi_split_path_info ^(.+\.php)(/.+)$;
                    fastcgi_pass 127.0.0.1:9000;
                    fastcgi_index index.php;
                    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                    include fastcgi_params;
            }
    }
}

I can open the page in the browser, I can see all components, links, buttons and so on but page is not rendered and looks like css is not load.

Answer 1

In order to resolve your issue, please change configMap to its exact name as nginx-configmap and in your configMap nginx configuration file can be as the following:

apiVersion: v1
kind: ConfigMap
metadata:
  name: "nginx-configmap"
data:
  nginx.conf: |
    server {
        listen 80;
        server_name _;
        charset utf-8;
        root  /var/appfiles/;

        access_log /var/log/nginx/tcc-webapp-access.log;
        error_log /var/log/nginx/tcc-webapp-error.log;

        location / {
            index index.php;
            try_files $uri $uri/ /index.php?$query_string;
        }

        location ~ \.php$ {
            fastcgi_split_path_info ^(.+\.php)(/.+)$;
            fastcgi_pass 127.0.0.1:9000;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include fastcgi_params;
        }
    }

You can find the medium article useful for you.