我之前也遇到过类似的需求，给你分享一下具体的实现思路和步骤：

一、先配置React应用的多环境变量 #

不同环境通常需要不同的API地址、功能开关等配置，Create React App本身支持通过环境变量来区分：

• 在项目根目录创建对应环境的.env文件：

  • .env.development：开发环境专属变量
  • .env.staging：预发布（stg）环境专属变量
  • .env.production：生产环境专属变量
    注意变量名必须以REACT_APP_开头才能被React识别，比如：

  # .env.staging示例
  REACT_APP_API_URL=https://api-stg.myproject.com
  REACT_APP_FEATURE_NEW_MODULE=true
  

• 安装env-cmd工具来加载指定环境的变量（Create React App默认只支持生产/开发两种环境，用它可以扩展更多环境）：

  npm install env-cmd --save-dev
  

• 在package.json里添加对应环境的构建脚本：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:dev": "env-cmd -f .env.development react-scripts build",
    "build:stg": "env-cmd -f .env.staging react-scripts build",
    "build:prod": "env-cmd -f .env.production react-scripts build"
  }
  

  现在运行npm run build:stg就能生成适配staging环境的静态文件了。

二、部署到Google App Engine（GAE）的两种方案 #

根据你想要的URL结构，有两种常用的实现方案：

方案1：用GAE版本（Versions）实现多环境 #

GAE允许为同一个服务部署多个版本，每个版本可以通过[版本名]-dot-[项目ID].appspot.com访问：

1. 先构建对应环境的代码：比如部署dev环境先运行npm run build:dev
2. 用gcloud命令部署并指定版本名：

   # 部署dev版本
   gcloud app deploy --version dev --project myproject
   # 部署stg版本
   gcloud app deploy --version stg --project myproject
   # 部署生产版本
   gcloud app deploy --version prod --project myproject
   

3. 访问对应URL：
   • Dev环境：dev-dot-myproject.appspot.com
   • Stg环境：stg-dot-myproject.appspot.com
   • 生产环境：myproject.appspot.com（可以通过gcloud app services set-traffic default --splits prod=100把prod版本设为默认访问版本）

方案2：用GAE自定义服务（Services）+ 自定义域名 #

如果想要更彻底的环境隔离，或者绑定自定义域名（比如stg.myproject.com），可以用自定义服务：

1. 为每个环境创建独立的GAE配置文件：

   • app.dev.yaml（dev服务配置）
   • app.stg.yaml（stg服务配置）
   • app.prod.yaml（prod服务配置）

   以app.stg.yaml为例，配置静态文件托管（适配Create React App的SPA特性）：

   service: stg
   runtime: python39
   handlers:
     # 托管静态资源文件夹
     - url: /static
       static_dir: build/static
     # 托管JSON、ICO、JS等静态文件
     - url: /(.*\.(json|ico|js))$
       static_files: build/\1
       upload: build/.*\.(json|ico|js)$
     # 所有其他请求指向index.html（支持SPA路由）
     - url: .*
       static_files: build/index.html
       upload: build/index.html
   

   注意每个配置文件的service字段对应不同的服务名（dev/stg/prod）

2. 构建后部署到对应服务：

   # 部署dev服务
   npm run build:dev
   gcloud app deploy app.dev.yaml --project myproject
   # 部署stg服务
   npm run build:stg
   gcloud app deploy app.stg.yaml --project myproject
   

3. 绑定自定义域名（可选）：

   • 登录Google Cloud Console，进入App Engine → 设置 → 自定义域名
   • 添加你的域名（比如stg.myproject.com）并完成所有权验证
   • 将自定义域名映射到对应的服务（比如把stg.myproject.com映射到stg服务）

三、注意事项 #

• 不要把.env文件提交到Git，在.gitignore里添加：

  .env
  .env.local
  .env.*.local
  

• 前端环境变量会被打包到代码中，不要存储敏感信息（比如API密钥），敏感信息应该通过后端代理来处理。

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