Nginx fails to load CSS and PNG files

Question

I'm trying to create a basic PHP web application. I want to host it on nginx. It works fine on my host machine, but when I try to move it to docker it fails to load the CSS and PNG files, even tho PDF files download normally (I have a button that downloads an example PDF). When I use the "try_files $uri $uri/ =404;" "in the location /" block I see that in the network page I get 404 on all of the files I request (when I use try_files $uri $uri/ /krzys-site.php?$query_string; I get "the stylesheet http:// 127.20.0.2/css/krzys_site.css was not loaded because its MIME type, “text/html”, is not “text/css”.").

Here is my code:

docker-compose.yaml

services:
  #nginx
  web:
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf
      #- ./PHP/Krzys-App:/var/www/html/Krzys-App
    networks:
      - bridge_net
      - ipvlan_net
        #ipv4_address: 192.168.1.11
  #php
  app:
    build:
      dockerfile: ./PHP/Dockerfile
    volumes:
      - ./PHP/Krzys-App:/var/www/html/Krzys-App
    networks:
      #- bridge_net
      ipvlan_net:
        ipv4_address: 192.168.1.20
  #mysql
  db:
    image: mysql:latest
    volumes:
      - mysqldata:/var/lib/mysql
    ports:
      - "4306:3306"
    restart: unless-stopped
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_USER: admin
      MYSQL_PASSWORD: admin
      MYSQL_DATABASE: KrzysiuApp
    networks:
#      - bridge_net
      ipvlan_net:
        ipv4_address: 192.168.1.30

volumes:
  mysqldata:

networks:
  ipvlan_net:
    external: true
    name: ipvlan_net
  bridge_net:
    driver: bridge

nginx configuration
nginx/conf.d/default.conf

server {
    listen 80;
    server_name localhost;
    root /var/www/html/Krzys-App;
    index krzys-site.php;

    location / {
        #try_files $uri $uri/ /krzys-site.php?$query_string;
        include  /etc/nginx/mime.types;
    try_files $uri $uri/ =404;
    }

    location ~ \.php$ {
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass app:9000;
        fastcgi_index krzys-site.php;
        fastcgi_param REQUEST_METHOD $request_method;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~* \.(css|js|jpg|jpeg|gif|png|svg|ico|webp|woff|woff2|ttf|eot)$ {
        include  /etc/nginx/mime.types;
        #try_files $uri $uri/ /krzys-site.php?$query_string;
    try_files $uri $uri/ =404;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        expires 30d;
    add_header Content-Type text/css;
        add_header Cache-Control "public, no-transform";
    }

    location ~ /\.ht {
        deny all;
    }
}

Head of my PHP file.
PHP/Krzys-App/krzys-site.php

`



    
    
    
    
     Krzys-App 
`

I tried charset utf-8, include mime.types, changing the owner of all the files, connecting every container to the bridge network... basically everything i found on the internet.

Nginx fails to load CSS and PNG files

Answers (1)

Related Questions