Azure DevOps部署React至AWS S3时如何配置构建环境变量

报错ReferenceError: process is not defined和环境变量不生效是同一个问题导致的，核心逻辑如下：

• 浏览器运行环境不存在Node.js的process全局对象，本地开发能正常运行是因为React脚手架的构建能力会在构建阶段把代码中写的process.env.xxx静态替换为具体的字符串值，不会把process对象打包到前端静态资源里。如果构建阶段没有识别到对应的环境变量，这段代码会被原样保留到生产资源中，浏览器执行时找不到process就会直接抛出你看到的错误。
• 主流React脚手架对前端可注入的环境变量有强制命名规范，不符合命名规则的变量不会被构建工具识别替换：
  • 基于Create React App（CRA）搭建的项目，所有前端可读取的环境变量必须以REACT_APP_作为前缀，你直接使用API_GATEWAY作为变量名，生产构建阶段会被直接忽略。
  • 基于Vite搭建的项目，环境变量需要以VITE_作为前缀，且代码中需要从import.meta.env读取，不能直接使用process.env引用。

你本地在.env中写无REACT_APP_前缀的API_GATEWAY能正常运行，一般是本地dev server做了自定义变量透传，但生产构建流程走的是默认规则，不会识别这类无前缀变量，才会出现本地正常、部署后报错的情况。

不需要在CI流程中额外生成.env文件，直接调整变量命名和代码引用即可，步骤如下：

1. 调整代码中的环境变量引用，匹配脚手架命名规则
   如果是CRA项目，将原有代码修改为：

// 变量名必须带REACT_APP_前缀才能被构建工具识别
this._baseUrl = process.env.REACT_APP_API_GATEWAY;

如果是Vite项目，将原有代码修改为：

this._baseUrl = import.meta.env.VITE_API_GATEWAY;

2. 调整CI构建步骤的环境变量配置，和代码中的变量名保持一致即可，原有传参逻辑不需要改动：
   CRA项目的构建配置：

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

Vite项目的构建配置：

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

注意：前端环境变量属于构建时注入的公开值，会被明文打包到最终生成的JS静态资源中，不要在这类变量中存放密钥、账号密码等敏感信息。

内容的提问来源于stack exchange，提问作者yaml learning