Nginx反向代理下Strapi子目录Admin页面JS文件404问题

核心问题分析 #

Admin页面HTML加载但空白、JS文件404，且Strapi日志无对应请求，说明Nginx未正确转发静态资源请求——因为Strapi Admin的静态资源路径基于配置的子目录，但代理规则未覆盖这些子路径，或者路径转发逻辑错误。

分步解决方案 #

1. 确认Strapi Server配置正确性 #

修改config/server.js，确保开启代理模式并正确设置子目录URL：

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  app: {
    keys: env.array('APP_KEYS'),
  },
  url: 'https://blah.mywebsite.com/strapi',
  proxy: true, // 必须开启，让Strapi识别代理环境
  admin: {
    url: '/admin',
    serveAdminPanel: true,
  },
});

修改后重新构建并重启Strapi：

yarn build && pm2 restart strapi

2. 修正Nginx代理配置 #

确保所有/strapi/开头的请求都正确转发到Strapi的1337端口，关键是proxy_pass末尾的斜杠（会移除/strapi/前缀后转发），以及使用^~优先级匹配：

server {
  listen 443 ssl;
  server_name blah.mywebsite.com;

  # 保留Next.js的根路径代理配置
  location / {
    proxy_pass http://localhost:3000; # 替换为你的Next.js端口
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }

  # Strapi子目录代理配置
  location ^~ /strapi/ {
    proxy_pass http://localhost:1337/; # 末尾斜杠必须保留
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $host;
  }
}

3. 验证配置并重启服务 #

• 测试Nginx配置是否合法：

  sudo nginx -t
  

• 重启Nginx加载新配置：

  sudo systemctl restart nginx
  

4. 清除缓存测试 #

使用浏览器无痕模式访问https://blah.mywebsite.com/strapi/admin，避免旧缓存导致的资源路径错误。

额外排查点 #

• 检查Strapi构建目录（.strapi/build/admin）下的index.html，确认script标签的src属性是否为/strapi/admin/xxx.js格式，确保与配置的URL一致。
• 查看Strapi的PM2日志，确认启动日志包含Server is running on https://blah.mywebsite.com/strapi，说明配置生效。

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