在nginx服务的react应用中，js bundles的路径无效。

Question

我有一个使用Create-React-App构建的SPA。它在本地开发中运行得很好，我想用nginx来部署构建的应用程序。

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

大部分的应用程序工作正常，但是当我试图直接访问一个嵌套的URL（即不是通过应用程序导航到它-> 这工作正常。只有当我直接访问URL或刷新页面时才会发生问题），在获取构建的文件时，consolenetwork中出现了错误。比如说我在访问 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.compiaverouscra-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;
    }
}

有谁知道是什么原因导致了这个问题？我完全不知道是什么原因

Answer 1

原来这个问题来自于我的webpack构建。在我的 package.json，我有 homepage: "./"导致路径解析问题。

只要删除这个字段，似乎就能解决这个问题了! Nginx配置没有问题:)