如何通过 Vercel 或 heroku 部署 React 网站?

How to deploy a React website via Vercel or heroku?

我正在开发一个用于研究的 React 项目,并希望发布。 我尝试了一些方法,但是网站是空白的,没有来自我正在使用的 NEWS-API 的数据。 好像没有弄错。 它是一个前端应用程序,只与 API.

反应

如果有帮助,请查看存储库 link。 https://github.com/carlos-souza-dev/apinews

我从您的 github 存储库访问了您在 vercel 中的部署并注意到了这个问题。

您通过不安全的 http 从 API 请求数据,而您由 vercel 托管的页面使用 https。

现代浏览器不允许通过 https 提供的页面请求 http 数据。

这可能只是通过将您的 url 更改为使用 https 来解决,或者如果 API 没有 https,您可能需要采取其他解决方法。(尽管最好使用支持 https 的 API)

我在访问您的页面后打开控制台发现了这些 Mixed content requests blocked 错误。

加载后出现空白页的原因是 Promise 从 API 获取数据被拒绝但从未处理导致 JavaScript 执行停止

[编辑 1] 我通读了您存储库中的一些代码,注意到 link 指向 localhost。看起来你试图设置一个 nodejs 服务器来通过 https

代理数据

您使用的 API 似乎支持 HTTPS

结论:

  • 尝试在你的 React 代码中将 links 更改为 API 到 https 而不是 http,看看它是否有效。如果是这样,就不需要你自己的后端服务器
  • 但是,如果 API 不支持 HTTPS,请执行 其中一个
    • 迁移到另一个 API 支持 HTTPS
    • 尝试通过后端服务您的静态 React 应用程序并将您的 React 应用程序指向 /path/to/api/route 而无需绝对 url 并使用 package.json 中的代理设置 here 发展
    • 指向您的后端服务器在 Internet 上的完整路径(即删除本地主机 links)

另请注意,您不能将后端部署到 Vercel,但它支持 serverless functions