Heroku“不是来自 webpack 的内容是从 apppublic 提供的”，尽管使用了所有默认的 create-react-app 配置

JS

使用create-react-app创建的React应用程序通常会将静态文件放在public文件夹中。但是，当我们将应用程序部署到Heroku时，我们可能会遇到一个问题：Heroku无法从webpack生成的内容中获取静态文件。这是因为Heroku默认情况下只能从/app/public文件夹中提供静态文件，而不是来自webpack的内容。

为了解决这个问题，我们可以通过修改默认的create-react-app配置来使Heroku能够正确提供静态文件。下面是一个示例，展示了如何在Heroku上部署使用create-react-app创建的React应用程序。

首先，我们需要在应用程序的根目录下创建一个名为static.JSon的文件。在该文件中，我们可以指定Heroku从哪个文件夹提供静态文件。以下是一个示例static.JSon文件的内容：

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

在上述示例中，我们将root属性设置为"build/"，这是create-react-app默认用于存储生成的静态文件的文件夹。我们还将clean_urls属性设置为true，以便Heroku正确处理URL。

接下来，我们需要将static.JSon文件添加到Git版本控制中。通过将其提交到Git仓库，我们可以确保在部署应用程序到Heroku时，该文件也会被包含在内。

然后，我们需要在package.JSon文件中添加一个postbuild脚本，以便在每次构建应用程序时，将static.JSon文件复制到生成的静态文件夹中。以下是一个示例package.JSon文件的内容：

JSon
{
  "name": "my-react-app",
  "version": "0.1.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && cp static.JSon build/",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...
}

在上述示例中，我们将"react-scripts build"命令与"cp static.JSon build/"命令组合在一起，通过&&运算符将两个命令连接起来。这样，在每次运行"npm run build"时，static.JSon文件都会被复制到生成的静态文件夹中。

现在，我们可以将我们的应用程序部署到Heroku了。当我们将代码推送到Heroku的Git仓库时，Heroku将会自动构建和部署我们的应用程序。在构建过程中，postbuild脚本将复制static.JSon文件到生成的静态文件夹中。这样，Heroku就可以正确提供静态文件了。

在本文中，我们学习了如何解决Heroku无法从webpack生成的内容中获取静态文件的问题。我们通过修改默认的create-react-app配置，使Heroku能够正确提供静态文件。我们创建了一个static.JSon文件来指定Heroku从哪个文件夹提供静态文件，并将其添加到Git版本控制中。我们还在package.JSon文件中添加了一个postbuild脚本，以便在每次构建应用程序时，将static.JSon文件复制到生成的静态文件夹中。通过这些步骤，我们可以成功地在Heroku上部署使用create-react-app创建的React应用程序。