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

Posted 2023-03-27

【中文标题】使用托管在 S3 上的 create-react-app 来访问 Heroku API

【英文标题】：Using create-react-app hosted on S3 to hit a Heroku API

【发布时间】：2020-05-07 03:11:22

【问题描述】：

背景

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

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

开发设置

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

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

这让我可以运行一个 javascript 命令，例如……

await fetch(`/someEndpoint`)

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

生产问题

现在我正在生产中运行。

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

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

问题

(1) 在不改变代码的情况下是我想要的吗

await fetch(`/someEndpoint`)

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

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

【参考方案1】：

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

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

在 react 项目中使用环境变量

react-scripts supports 环境变量使用dotenv 库。

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

REACT_APP_API_DOMAIN=REACT_APP_API_DOMAIN npm run build

或者您可以定义一个.env.production，其中NODE_ENV 环境变量设置为production。

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/

希望这会有所帮助。