用于 UAT 和 Live 的 React 中的运行时环境变量，用于单个构建 devops

Question

Sorry if you think this has been asked before but there doesn't seem like a good solution anywhere.

I have a build pipeline that packages up my react app into a single artifact. The release pipeline pushes that artifact to different Azure storage accounts for each environment (Dev, UAT, Live).

Surely there is a way to use DevOps variables to configure variables in my package per environment.

Other solutions:

1. One build per environment - I don't want to do this because I would need to create a branch for each environment, a pipeline for each, the env configs for each, and a release pipeline for each. This means a change to 1 environment takes 3 times as long. Also, the time to build these environments trebles.

2. Using a JSON file and swapping this out on deployment. - This didn't work because webpack imported the JSON file into the build so whilst I transformed the config.json files. It was too late. This seems similar to using env.development and env.live and would mean 3 builds

3. Pull environment out of the request URL and call an endpoint - seems like my only option but definitely has flaws.

This isn't an issue in .NET (or Java I believe, .NET is my background) and was solved years ago with web.config and appSettings.

Please let me know if you have solved this and how? Thanks for your help

Answer 1

Runtime Environment Variables in React for UAT and Live for a single build devops

We could use the task Replace Tokens to use DevOps variables to configure variables in the package per environment:

The format of variable in .json file is #{TestVar}# .

And define the key's values on the Variables based on the stages:

Hope this helps.