管理多个环境的 env 变量的最佳方法

Question

所以，我们有一个 React 项目。我们有 3 个分支：development、qa 和 staging。这是 3 个环境中 API URL 的代码：

发展：

const API_URL = process.env.NODE_ENV === 'development' ? 'https://our-website-development.com/api' : '/api';

qa:

const API_URL = process.env.NODE_ENV === 'development' ? 'https://our-website-qa.com/api' : '/api';

分期：

const API_URL = process.env.NODE_ENV === 'development' ? 'https://our-website-staging.com/api' : '/api';

当然这有一个问题：每次我们在环境之间移动东西时都会有这种冲突。所以我想把它移到 ENV 变量中。

但是我对如何实现它有些疑惑。我有一些问题。

选项 1：拥有三个 .env 文件（.env.development、.env.qa、.env.staging），每个文件都有正确的 URL，将此文件推送到三个分支，然后添加脚本来启动项目，如 npm start development 或 npm start qa.

选项 2. 只有一个 .env 文件并且不将其推送到项目中，使其对于每个环境都是静态的。这意味着每次我在开发时切换分支时都必须手动更改端点url。

还有更好的选择吗？

Answer 1

选项 1 稍作更改即可。保留 3 个环境文件，而不是在 3 个分支中使用它们，保留 3 个 npm 任务用于启动和构建。在构建时，保留单独的文件夹将很有用。如果您需要这个想法的示例，请告诉我。我正在使用 env-cmd 将我的 .env 文件挂接到我的任务。

更新：

下面是我来自 Package.json 的脚本，其中我有 2 个环境测试和生产，

"scripts": {
"start": "set PORT=41100 && env-cmd -f .env.test react-scripts start",
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
"build:test": "env-cmd -f .env.test npm run-script build && DEL /S /Q test && move build test",
"build:production": "env-cmd -f .env.production npm run-script build && DEL /S /Q production && move build production",
"test": "react-scripts test",
"format": "prettier --write src/**/*.ts{,x}",
"lint": "tsc --noEmit && eslint src/**/*.ts{,x}"

},

我正在使用 Windows 进行开发。如果你不是这个post可能有助于调整你的脚本，

配置是 .env.test 和 .env.production，内容看起来像，

REACT_APP_SOME_API = "https://myurl/api/resource"

管理多个环境的 env 变量的最佳方法

Best way to manage env variables for multiple environments

reactjs

dotenv