nginx 服务的反应应用程序中 js 包的路径无效答案

【问题标题】：Invalid path for js bundles in nginx served react appnginx 服务的反应应用程序中 js 包的路径无效
【发布时间】：2020-08-17 01:09:54
【问题描述】：

所以我有一个使用 Create-React-App 构建的 SPA。它对本地开发人员完全适用，我想使用 nginx 部署构建的应用程序。

我设置了我的Dockerfile 和nginx.conf，起初似乎一切正常。但后来，我注意到了最奇怪的问题。

大多数应用程序工作正常，但是当我尝试直接访问嵌套 URL 时（即不是通过应用程序导航到它 -> 这工作正常。问题仅在我直接访问 URL 或刷新页），在获取构建文件时控制台/网络中存在错误。假设我正在访问localhost:3000/app/potato，我看到我的浏览器正在尝试从localhost:3000/app/static/js/2.ebff4827.chunk.js（而不是localhost:3000/static/js/2 .ebff4827.chunk.js）访问文件

访问localhost:3000/app 工作正常，但localhost:3000/app/（带有尾随/）具有相同的奇怪行为。

结果浏览器无法加载页面...

这是我的nginx.conf（虽然我不相信这会导致我的错误，因为我使用空白 CRA 设置它并且它工作正常https://github.com/piaverous/cra-nginx-demo）：

server {
    listen       3000;
    server_name  localhost;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html;                 
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

有没有人知道是什么导致了这个问题？我在这里完全不知所措

【问题讨论】：

标签： reactjs nginx build react-router production

【解决方案1】：

所以事实证明这个问题来自我的 webpack 构建。在我的package.json 中，我有homepage: "./"，这导致了路径解析问题。

删除此字段似乎可以解决此问题！ Nginx 配置很好:)

【讨论】：