后端是仅在Railoku上运行的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，但在本地开发过程中仍保持本地代理行为？可能会使用一些环境变量？
答案 0 :(得分：0)
我认为，最好在所有环境中都遵循相同的过程（以获取API主机名）。同样，仅出于此目的设置CloudFront也不能令人信服，除非您有其他理由这样做。
我认为您可以使用环境变量，这是您可以使用的方法。
react-scripts supports环境变量，使用dotenv库。
我们使用以下命令构建react应用
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/
希望这会有所帮助。