将构建文件夹部署到 Netlify 时获取空白页面答案

【问题标题】：Getting a Blank page when build folder is deployed to Netlify将构建文件夹部署到 Netlify 时获取空白页面
【发布时间】：2021-04-06 05:01:18
【问题描述】：

我正在尝试在 Netlify 上部署 react 应用程序的构建文件夹。上传过程显示没有错误，网站上线，但观察到空白页面。

构建文件夹中的我的 json 文件：

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [{
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

link to app

【问题讨论】：

您有netlify.toml 文件吗？您可以在那里配置构建相关的详细信息。您包含的 JSON 看起来更像 PWA 的清单文件。
不，我不需要在构建文件夹中创建一个 .toml 文件吗？

标签： javascript reactjs netlify

【解决方案1】：

在检查了您包含的site 后，控制台中显示了很多错误。

加载资源失败：服务器响应状态为 404 ()
清单：行：1，列：1，语法错误。

您的manifest.json 文件似乎存在语法错误，因此这是一个不错的起点。接下来，几乎所有的构建文件都无法被页面加载。这让我认为 Netlify 能够部署您的网站，但构建文件夹中的静态资产不可用，因此所有构建文件块（如 main.e8a3c755.chunk.js）出现“加载资源失败”错误。

创建 Netlify 配置文件

netlify.toml 是一个配置文件，用于指定 Netlify 如何构建和部署您的站点。要开始使用它，只需在项目的根目录中创建一个名为 netlify.toml 的文件。此配置文件将为 Netlify 提供有关如何构建项目、如何处理重定向以及其他有用信息的信息。

[build]
  command = "npm run build"
  publish = "build-output"

 [[redirects]]
  from = "https://some-url.com"
  to = "https://some-other-url.com"

上面定义了[build] 上下文和重定向规则的一些基本构建配置。 command 设置指定默认构建命令。这应该是您在package.json 中定义的构建命令。 publish 设置指定包含来自您的构建的可部署静态资产的目录。因此，当前的publish 设置将发布到位于绝对路径root/build-output 的目录。

您还可以在[[redirects]] 中定义一些重定向规则。这很简单，from 设置是您希望重定向的 URL，to 也是您应该重定向的位置。默认的 HTTP 状态代码是 301，但您可以在 [[redirects]] 中提供一个 status 键来提供自定义状态代码。

底线，看不到您的项目代码或指向它的链接。当 Netlify 部署您的站点时，很难确定为什么您的构建文件没有被识别。它归结为你的构建命令是如何被使用的，例如它是如何运行的"build": do build stuff 以及 React 构建文件的输出位置。最后，确保创建一个netlify.toml 文件，以向 Netlify 提供有关如何构建和部署站点的详细信息。这是 Netlify 如何推荐 Deploying a React app 的链接。

【讨论】：

感谢 tanner 在添加 toml 文件并引用了我能够建立网站的文档后
@Lp-Tester 欢迎您。我很高兴你能够启动并运行。编码愉快！

【解决方案2】：

打开您的package.json 文件并将homepage 部分留空：

{
  "name": "react-table",
  "version": "0.1.0",
  "private": true,
  "homepage": "",
...
}

我的主页设置为"homepage": "https://tamalanwar.github.io/periodic-table/",

因此，Netlify 试图从 /periodic-table/ 目录打开 JS 和 CSS 文件并返回 404 错误。

这解决了我的问题。

因此，请在此处设置域名或将其留空，直到您决定生产 URL。

【讨论】：