Docker部署Nginx+PHP自托管环境CSS无法加载的问题求助

从在线虚拟主机迁移至自托管服务器，通过Docker部署Nginx与PHP环境。当前访问绑定域名时，首页可正常加载且JavaScript运行正常，但CSS文件完全无法加载导致页面无样式。日志未显示异常，且可直接访问对应的CSS文件。

当前nginx.conf配置如下：

events {}

http {
  server {
    listen 80;

    root /var/www/html;
    index index.php index.html index.htm;

    server_name localhost;

    location / {
      try_files $uri $uri/ =404;
    }

    location ~ \.php$ {
      include fastcgi_params;
      fastcgi_pass php:9000;
      fastcgi_index index.php;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }

    location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|otf)$ {
      try_files $uri =404;
      expires 30d;  # Cache static files for 30 days
      # access_log off;  # Optionally disable access log for static files
    }
  }
}

解决思路 #

• 修正Nginx的server_name配置：当前配置server_name localhost，但实际访问用的是绑定域名，这会导致Nginx可能匹配不到正确的server块，或浏览器因域名一致性问题拒绝加载资源。将server_name改为实际绑定的域名，比如server_name your-domain.com;。
• 验证静态资源的MIME类型：手动添加MIME类型配置，确保Nginx返回正确的Content-Type给浏览器，避免浏览器无法识别CSS文件。在http块内添加：

  types {
    text/css css;
    application/javascript js;
    # 其他静态资源类型可按需补充
  }
  

• 强制刷新浏览器缓存：直接访问CSS正常但页面加载失败，大概率是浏览器缓存了旧的无效资源。按Ctrl+Shift+R强制刷新页面，或清空浏览器缓存后重试。
• 检查容器内文件权限：进入Nginx容器，执行ls -l /var/www/html/查看CSS文件的权限，确保文件权限为644，且所属用户/组与Nginx运行用户（通常是nginx或www-data）一致，否则Nginx无法读取文件。
• 核对页面内CSS引用路径：查看页面源代码，确认CSS的href路径是否正确。比如绝对路径/css/style.css要对应容器内/var/www/html/css/style.css；相对路径要和页面所在目录层级匹配。
• 排查静态资源location块问题：临时注释掉location ~* \.(css|js|...)$块，让静态请求走默认的location /规则。如果CSS能正常加载，说明该location块的配置存在问题，比如expires设置导致缓存冲突，或try_files逻辑异常，可逐步恢复配置排查具体点。

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