如何通过CI/CD流水线避免将Staging URL推送至生产环境？

一、Jest测试用例实现Staging URL检测 #

你可以编写一个Jest测试用例，直接校验生产构建时BASE_URL是否为正式地址，防止Staging URL被误推。

创建测试文件src/__tests__/api-config.test.js，内容如下：

import { ApiConfigData } from '../path/to/your/api-config-file';

describe('API Configuration', () => {
  test('BASE_URL should not be staging URL in production', () => {
    // 校验BASE_URL不等于Staging地址
    expect(ApiConfigData.BASE_URL).not.toBe(ApiConfigData.STAGING_URL);
    // 额外硬编码校验正式地址，避免STAGING_URL被修改导致的检测失效
    expect(ApiConfigData.BASE_URL).toBe('https://app.xyz.io/app/');
  });
});

在CI/CD流水线中，执行生产构建前先运行该测试：

• 测试通过则继续部署流程
• 测试失败（比如BASE_URL是Staging地址）则直接终止流水线，阻止错误部署

二、更优的环境配置方案（推荐） #

手动切换URL容易出错，更可靠的方式是通过环境变量和自动化流程管理不同环境的配置：

• 使用环境变量区分环境
  在项目根目录创建对应环境的配置文件：

  • .env.development（开发/预发布环境）

    REACT_APP_BASE_URL=https://app.xyz.io/staging-app/
    

  • .env.production（生产环境）

    REACT_APP_BASE_URL=https://app.xyz.io/app/
    

  React会自动加载对应环境的变量，代码中直接使用process.env.REACT_APP_BASE_URL即可，无需手动修改配置文件。

• CI/CD流水线强制指定环境
  在生产部署阶段，明确指定使用生产环境构建：

  # React默认执行build时会加载.env.production
  npm run build
  # 也可以通过命令行直接传递变量（优先级更高）
  REACT_APP_BASE_URL=https://app.xyz.io/app/ npm run build
  

• 添加Git预提交钩子
  使用husky工具添加预提交钩子，在代码提交前自动运行配置校验测试，从源头避免错误配置被提交到仓库。

• 拆分环境配置文件
  将配置拆分为config/dev.js、config/prod.js等独立文件，通过构建脚本根据环境动态导入对应配置，彻底杜绝手动切换的可能。

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