使用Azure DevOps -AWS上的AZURE DEVOPS更改React App的可变价值（S3）

发布于 2025-02-09 16:03:33 字数 1196 浏览 2 评论 0原文

我有一个React应用程序，他们使用环境变量获得了后端API地址。下面在示例中：

this._baseUrl = process.env.API_GATEWAY;

在本地开发环境中，开发团队创建.env。文件和设置该文件中的环境变量值，以调用后端API，并且每个事物都可以正常工作，如下所示。

API_GATEWAY=http://localhost:3000

当我为同一项目创建CI/CD管道时，每个事情都可以正常工作，并且应用程序也已成功部署在AWS（S3桶）上，但是我无法在使用NPM构建项目时更改环境变量的价值，如下：

    - script: |
        npm run build
     displayName: 'npm build'
     env:
       API_GATEWAY: $(envAppApi)

<强>上面使用的API_GATEWAY 是代码中使用的环境变量的名称， $（envappapi）是在变量组中定义的变量。

但是，当应用程序部署在AWS上时，则环境变量值不会更改，并且在下面显示错误。

mutation.js:106 ReferenceError: process is not defined
    at new e (http-api.ts:17:42)
    at Function.value (http-api.ts:24:12)
    at Object.mutationFn (Auth.ts:13:26)
    at Object.fn (mutation.js:132:31)
    at c (retryer.js:95:31)
    at new u (retryer.js:156:3)
    at t.executeMutation (mutation.js:126:20)
    at mutation.js:86:20

（http-api.ts：17：42） =＆gt;这是设置API_GATEWAY环境变量并已经显示上面的同一行。

问题陈述： 在创建CI/CD管道时，有什么方法可以更新环境变量的值？因此，应用程序成功运行。谢谢。

注意：我不想使用.env。在我的管道中文件，以更新React应用程序中的环境值。

原文

I have a react application in which they are getting backend api address by using Environment variable. Below in the example:

this._baseUrl = process.env.API_GATEWAY;

In local development environment, development team create .env. file and set environment variable value in that file, to call backend api and every things work fine, like below.

API_GATEWAY=http://localhost:3000

When i create CI/CD pipeline for same project then every things works fine and application is also successfully deployed on AWS (s3 bucket) but i am not able to change the value of environment variable while building the project using npm, like below:

    - script: |
        npm run build
     displayName: 'npm build'
     env:
       API_GATEWAY: $(envAppApi)

API_GATEWAY used above is the name of environment variable used in code and $(envAppApi) is variable defined in variable group.

But when application is deployed on AWS then environment variable value not changed and it shows below error.

mutation.js:106 ReferenceError: process is not defined
    at new e (http-api.ts:17:42)
    at Function.value (http-api.ts:24:12)
    at Object.mutationFn (Auth.ts:13:26)
    at Object.fn (mutation.js:132:31)
    at c (retryer.js:95:31)
    at new u (retryer.js:156:3)
    at t.executeMutation (mutation.js:126:20)
    at mutation.js:86:20

(http-api.ts:17:42) => This is the same line where API_GATEWAY environment variable is set and already showed above.

Problem statement:
Is there is any way that we can update the value of environment variable while creating CI/CD pipeline? so the application run successfully. Thanks.

Note: I don't want to use .env. file in my pipeline for updating environment values in react application.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北城半夏 2025-02-16 16:03:33

在创建CI/CD管道时，有什么方法可以更新环境变量的值？

是的。我建议您可以使用Regex Match＆amp;从 regex match＆amp;替换任务。更换。

此任务将使用正则表达式来匹配文件中的字段。

这是一个示例：

steps:
- task: RegExMatchReplace@2
  displayName: 'RegEx Match & Replace'
  inputs:
    PathToFile: test.js
    RegEx: 'this._baseUrl = ([a-zA-Z]+(\.[a-zA-Z]+)+)_[a-zA-Z]+;'
    ValueToReplace: ' this._baseUrl = $(envAppApi)'

然后值将更新。

您可以使用此站点转换正式表达式： Regex Generator

Is there is any way that we can update the value of environment variable while creating CI/CD pipeline?

Yes. I suggest that you can use RegEx Match & Replace task from RegEx Match & Replace.

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

Here is an example:

steps:
- task: RegExMatchReplace@2
  displayName: 'RegEx Match & Replace'
  inputs:
    PathToFile: test.js
    RegEx: 'this._baseUrl = ([a-zA-Z]+(\.[a-zA-Z]+)+)_[a-zA-Z]+;'
    ValueToReplace: ' this._baseUrl = $(envAppApi)'

Then the value will update.

You can use this site to convert the regular expressions : Regex Generator

回复收藏 0 原文

~没有更多了~