Azure DevOps - React App - 在发布管道中设置环境变量

Question

We have a React app in AzureDevOps. We build it using npm install/npm run build and then upload the zip file. From there we'll do a release to multiple stages/environments. Due to SOX compliance we're trying to maintain a single build/artifact no matter what the environment.

What I'm trying to do is be able to set the environment variables during the release pipeline . For instance, be able to substitute the value of something like process.env.REACT_APP_CONFIG_VALUE

I've tried setting that in the Pipeline variables during the release but it does not seem to work. Is this possible or do I have to use a json config of some sort instead of using process.env?

Thanks

Answer 1

You could not achieve this by setting pipeline variables during the release.

Suggest you could use RegEx Match & Replace extension task to achieve this. Use this site to convert the regular expression: Regex Generator

Here is an example:

this._baseUrl = process.env.REACT_APP_CONFIG_VALUE;

This extension task will use regular expressions to match fields in the file.

Checking from published js.

Answer 2

This is how I did it -

Step1: Add all those files (.env.env.development.env.production) to azure devops library as secure files. We can download these secure files in the build machine using a DownloadSecureFile@1 pipeline task (yml). This way we are making sure the correct.env file is provided in the build machine before the task yarn build --mode development in the pipeline.

Step2: Add the following task in your azure yml pipeline in appropriate place. I have created a github repohttps://github.com/mail4hafij/react-yarn-azure-pipeline if you want to see a complete example.

  # Download secure file from azure library
  - task: DownloadSecureFile@1
    inputs:
      secureFile: '.env.development'

  # Copy the .env file
  - task: CopyFiles@2
    inputs:
      sourceFolder: '$(Agent.TempDirectory)'
      contents: '**/*.env.development'
      targetFolder: '$(YOUR_DEFINED_PROJECT_ROOT_FOLDER_VARIABLE)'
      cleanTargetFolder: false

Keep note, secure files can't be edited but you can always re-upload.