create-react-app 区分测试/生产环境CDN URL

使用 create-react-app 构建的项目可以通过 .env 文件制定相应的构建配置，支持的配置列表如下： Advanced Configuration | Create React App (create-react-app.dev)

通常够用，但是有时候我们需要根据分支来配置不一样的选项。

比如，我团队的CDN资源url区分了两种：

• 测试环境（//webtest.yystatic.com/project/xx/）
• 正式环境（//web.yystatic.com/project/xx/）

并且与 git 分支的对应关系是：

• 测试环境（//webtest.yystatic.com/project/xx/） → dev/test 分支
• 正式环境（//web.yystatic.com/project/xx/）→ master 分支

这时候，我需要根据不一样的 git 分支，在 .env 文件配置 PUBLIC_URL 变量成：

• dev/test 分支 PUBLIC_URL=//webtest.yystatic.com/project/myapp/assets/
• master 分支 PUBLIC_URL=//web.yystatic.com/project/myapp/assets/

调查后发现，create-react-app 只能做到区分shell相关环境，并不支持 git 分支相关的内容，需要我们手动支持。Adding Custom Environment Variables | Create React App (create-react-app.dev)

在不 eject 的前提下，我们的处理方式是：

1. 我们通过CI脚本，以 .gitlab-ci.yml 为例, 可以通过shell变量 $CI_COMMIT_REF_NAME 获取分支名称。

2. 在 package.json 更改 npm scripts:

   "scripts": {
   	"build": "cp .env.master .env && react-app-rewired build",
   	"build:test": "cp .env.test .env && react-app-rewired build"
   }
   

3. 创建 .env.master:

   PUBLIC_URL=//web.yystatic.com/project/myapp/pc/html/ 
   

   创建 .env.test:

   PUBLIC_URL=//webtest.yystatic.com/project/myapp/pc/html/
   

4. 在 .gitlab-ci.yml 编写 shell 脚本，根据 $CI_COMMIT_REF_NAME 调用不一样的 npm script：

   script:
       - echo $CI_COMMIT_REF_NAME
       - yarn install
       - mkdir -p ./output/pc/html
       - if [ $CI_COMMIT_REF_NAME == "test" ]; then CI=false npm run build:test; fi;
       - if [ $CI_COMMIT_REF_NAME == "master" ]; then CI=false npm run build; fi;
       - cp --verbose -rf ./build/* ./output/pc/html/
   

Github 同理。