时间戳

首页 > 解决方案 > 使用托管在 S3 上的 create-react-app 来访问 Heroku API

reactjs - 使用托管在 S3 上的 create-react-app 来访问 Heroku API

问题描述

背景

后端是在 Heroku 上运行的仅限 Rails API 的应用程序（在本地开发期间在端口上）5000。

前端由 AWS CloudFront 后面的 S3 存储桶（在本地开发期间位于端口上）制作create-react-app并托管在其中。3000

开发设置

在本地，前端package.json包括：

"proxy": "http://localhost:5000",

这让我可以运行一个 Javascript 命令，例如……</p> 

await fetch(`/someEndpoint`)

…并且在其上运行的开发服务器localhost:3000转发来自http://localhost:5000/someEndpoint. 这很好用，我的前端成功处理了响应。

生产问题

现在我正在生产。

如果我什么都不做，同一行将尝试从https://asdfasdfasdf.cloudfront.net/someEndpoint404 加载。

相反，我想配置应用程序，以便在生产中它会访问https://my-awesome-rails-app.herokuapp.com/someEndpoint运行 Rails API 的 Heroku 应用程序。

问题

（1）在不更改代码的情况下我想要什么

await fetch(`/someEndpoint`)

通过配置要使用的前端my-awesome-rails-app.herokuapp.com，或者通过配置 CloudFront 将一些请求转发到 S3 而将其他请求转发到 Heroku？

（2）如果两者都不可能，我应该如何编写fetch()命令让我在生产中命中 Heroku，但在本地开发期间仍然保持本地代理行为？也许使用环境变量？

标签： reactjsamazon-web-servicesherokuamazon-cloudfrontcreate-react-app

解决方案

在我看来，最好在所有环境中遵循相同的流程（获取 API 主机名）。此外，仅出于此目的设置 CloudFront 也没有说服力，除非您有其他理由这样做。

我认为您可以使用环境变量，这是您可以做到的。

在反应项目中使用环境变量

react-scripts supportsdotenv使用库的环境变量。

我们使用以下方法构建反应应用程序：

REACT_APP_API_DOMAIN=REACT_APP_API_DOMAIN npm run build

或者您可以定义环境变量设置为的.env.production位置。NODE_ENVproduction

REACT_APP_API_DOMAIN=http://localhost:5000

然后在您的代码文件中，您可以从process.env

await fetch(`${process.env.REACT_APP_API_DOMAIN}/someEndpoint`)

请阅读参考资料，您应该使用一种模式来定义环境变量以使其工作。例如，您定义的每个环境变量都应该以REACT_APP_

参考：

https://create-react-app.dev/docs/adding-custom-environment-variables/

希望这可以帮助。

推荐阅读