Docker部署PHP应用时Nginx无法加载CSS与PNG文件问题

我正在开发一个基础PHP Web应用，计划通过Nginx部署。本地运行正常，但迁移到Docker后，CSS和PNG文件无法加载，PDF文件却能正常下载（我做了个按钮用于下载示例PDF）。

两种配置下的异常表现：

• 当location /块使用try_files $uri $uri/ =404;时，所有相关资源请求都返回404
• 当使用try_files $uri $uri/ /krzys-site.php?$query_string;时，浏览器提示“样式表http://127.20.0.2/css/krzys_site.css因MIME类型为‘text/html’而非‘text/css’未加载”

相关代码文件 #

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/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;
    }
}

PHP/Krzys-App/krzys-site.php（头部代码） #

<?php
    include_once 'Includes/mysql_connection.php';
    require_once "Includes/login_view.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device=width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/krzys_site.css">
    <title> Krzys-App </title>
</head>

已尝试的解决方法（均无效） #

• 设置charset utf-8
• 引入mime.types
• 修改文件所有者
• 将所有容器连接到bridge网络

内容的提问来源于stack exchange，提问作者krzys7007