如何使用 Azuru DevOps 在 React 应用程序中处理多个环境

Question

那里的开发人员， 我在尝试使用 Azure DevOps 在我的反应项目中设置多个环境时遇到了一个小问题。没有太多关于如何完成这项工作的信息，我可以看到它是正确的。

我想要：

• 发展
• 生产

目前我已经在我的 React 应用程序上实现了它：

src > 服务 > JS instance.js > 实例

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://xxx-test.azurewebsites.net/api',
  // baseURL: 'https://localhost:5001/api',
})

export default instance

我的脚本是这样的，我没有改成package.json下的脚本：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Answer 1

使用.env file mechanism:

添加.env 文件：

REACT_APP_API_URL=https://localhost:5001/api

并修改您的代码：

import axios from 'axios'
import config from './config'

const instance = axios.create({
  baseURL: process.env.REACT_APP_API_URL
})

export default instance

现在，在管道中，您需要根据您的目标环境以不同的方式设置 REACT_APP_API_URL 环境变量。您可以为此使用pipeline variables（因为它们也作为环境变量公开）。在 yaml 中，它可能如下所示：

stages:
  - stage: test
    variables:
      REACT_APP_API_URL: https://xxx-test.azurewebsites.net/api
    jobs:
      - job: test_job
        steps:
          - script: npm run build
          # then deploy the app however you want
  - stage: prod
    variables:
      REACT_APP_API_URL: https://xxx-prod.azurewebsites.net/api
    jobs:
      - job: prod_job
        steps:
          - script: npm run build
          # then deploy the app however you want