Question

在部署使用react-router的react / redux应用程序时遇到问题。该应用是使用create-react-app和heroku-buildpack-static构建的。我试图将应用程序部署到Netlify和Heroku上，但都遇到了相同的错误。空白页没有错误，开发工具的控制台的"Failed to load resource: the server responded with a status of 404 (Not Found)"文件夹中的所有文件都显示build错误。检查构建工具的“应用程序”选项卡显示清单，脚本文件或样式表均未正确加载到页面上（由于远程编译错误？）。 build文件夹已在本地正确编译，并且该应用程序可在我的计算机上运行。

我认为这是React路由器在heroku上混淆构建过程的一个问题。我在部署中进行了read this和this的更改，但没有任何更改使远程构建能够正确配置index.html之外的静态页面；每次它们编译为空或将public/manifest.json更改为"start_url": "."时，index.html都会覆盖所有其他构建文件。

我尝试添加一个static.json文件：

{
"root": "build/",
"clean_urls": false,
"routes": {
    "/**": "index.html"
    }
}

位于应用程序的根目录，但这也没有帮助。

似乎似乎没有关于heroku管理构建的说明，但我不知道它们是什么。

有人可以帮忙吗？谢谢。

编辑：

这些是我必须采取的步骤才能在Heroku上获得working。我必须重新构建它，而不能使用我第一次尝试的create-react-app buildpack。上面的static.json文件是buildpack的必需项，但是它继续用index.html文件覆盖build文件夹中的静态文件。所以我删除了它。

有效的方法是遵循此tutorial并根据需要进行修改。需要做几件事：

我添加了通配符app.get('/', function (req, res) {而不是具有端点app.get('/*', function (req, res) {的服务器。来自React Deployment Guidance
create-react-app将manifest.json配置为"start_url": "."，我将其更改为"start_url": "./index.html"

package.json

我必须确保将主页识别为当前文件："hompage": "."

这些是使Heroku加载正确的构建文件而不用index.html覆盖任何内容的步骤。

在DevTool中，我仍然收到一个有趣的警告： DevTools failed to parse SourceMap: https://cloze-maker.herokuapp.com/static/js/1.4929ae08.chunk.js.map

但是该应用程序正常运行。

希望这对其他人有帮助。

Heroku上的React / React-Router使用空文件构建

0 个答案: