如何通过 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
我正在开发一个用于研究的 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