在具有多个环境的 s3 存储桶上部署 React 应用程序答案

【问题标题】：Deploying a react application on an s3 bucket with multiple environments在具有多个环境的 s3 存储桶上部署 React 应用程序
【发布时间】：2021-12-16 10:25:03
【问题描述】：

我使用 heroku 部署 nodejs 后端，使用 amazon s3 部署 react 应用程序的静态文件，因此存储在 s3 存储桶上的前端向 heroku 后端发出请求。

一旦我为 heroku 创建了暂存环境，我只需要创建一个新的存储桶并连接新的 url，以便暂存前端可以正确地向暂存后端发出请求，我最终在我的反应中得到了这样的结果应用：

// index.js
let BASE_API_URL;

if (process.env.NODE_ENV === "production") {
  BASE_API_URL = "https://myproductionapiurl.com";
else if (process.env.NODE_ENV === "staging") {
  BASE_API_URL = "https://mystagingapiurl.s3-website.us-east-2.amazonaws.com";
} else {
  BASE_API_URL = "https://someotherurl.com";
}

axios.defaults.baseURL = BASE_API_URL;

但后来我注意到 s3 作为保存静态文件的服务，无法设置环境变量，因此我无法根据 process.env.NODE_ENV 指定发出请求的 url，并且我被卡住了。

现在我只是对 url 进行硬编码以便它可以工作，但是一旦我尝试合并暂存环境和生产环境，git 冲突总是会出现，有什么方法可以使用 amazon s3 存储桶来做到这一点并做出反应？

【问题讨论】：

您必须将其作为 build 过程的一部分，但是您不能只通过不同的环境推广相同的人工制品（并且必须能够重建如果出现新环境）。
@jonrsharpe 我正在使用npm run build，我不确定是否在那里设置环境变量（即NODE_ENV=staging npm run build 可以解决问题，但如果可以，我可以将该命令添加到暂存分支上的管道，我不知道这是一个选项，我现在正在尝试它是否可以成为解决方案:)

标签： reactjs amazon-s3 axios environment-variables

【解决方案1】：

感谢@jonrsharpe，我能够让它工作，因为我使用的是反应，而不是使用NODE_ENV（不能被覆盖）我使用REACT_APP_ENV，并在运行之前将其设置为环境变量构建：

REACT_APP_ENV=staging npm run build

【讨论】：