Ubuntu 16.04 LTS服务器NGINX无法加载CSS、图片等媒体文件

我之前在Ubuntu服务器上配置Nginx反向代理时也碰到过一模一样的静态资源加载问题，结合16.04 LTS的环境，给你几个实用的排查和解决方向：

• 检查静态资源路径配置是否准确
  先确认Nginx配置里的root或alias指令是否指向了应用静态资源的真实存放目录。比如你的应用静态文件存在/var/www/myapp/static下，配置应该类似：

  location /static/ {
      root /var/www/myapp;
      # 或者用 alias /var/www/myapp/static/; 注意两种指令的路径末尾斜杠差异
  }
  

  路径写错的话，Nginx找不到文件，直接会返回404，导致资源加载失败。

• 验证静态资源的文件权限
  Ubuntu下Nginx默认以www-data用户运行，必须确保静态资源目录和文件允许该用户读取：

  # 递归设置目录权限为755，保证可读可执行
  sudo chmod -R 755 /var/www/myapp/static
  # 必要时递归设置文件所有者为www-data
  sudo chown -R www-data:www-data /var/www/myapp/static
  

  权限不足的话，Nginx无法读取文件，浏览器会收到403错误。

• 调整location规则的匹配顺序
  如果你的应用是通过proxy_pass反向代理到后端服务，静态资源的location规则必须优先于代理规则，避免被错误转发到后端。示例配置如下：

  server {
      listen 80;
      server_name your-domain.com;
  
      # 先匹配静态资源请求
      location /static/ {
          root /var/www/myapp;
          expires 30d; # 可选：设置静态资源缓存时间
      }
  
      # 其余请求代理到后端应用
      location / {
          proxy_pass http://localhost:8000;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
      }
  }
  

  要是静态资源的location放在代理规则后面，会被优先匹配到代理逻辑，导致后端服务处理静态资源请求出错。

• 检查浏览器请求的资源路径
  打开浏览器开发者工具（F12）的「网络」标签，查看静态资源的请求URL是否正确，是否返回404/403状态码。有时候前端页面用了相对路径（比如./css/style.css），反向代理后URL前缀变化会导致路径失效，这时候需要调整前端的资源引用路径，或者在Nginx里配置对应的路径重写规则。

• 测试配置并重启Nginx
  每次修改配置后，一定要先验证配置合法性，再重启服务：

  sudo nginx -t
  sudo systemctl restart nginx
  

  如果配置有语法错误，Nginx会拒绝重启，根据提示修正即可。

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