GAE部署前后端应用时env_variables不生效问题求助

核心原因 #

你在client.yaml里配置的env_variables不会被前端静态代码读取到——GAE的env_variables是给服务端运行时（比如Node.js服务）用的，而你的前端是预构建好的静态文件，运行在用户浏览器里，完全访问不到GAE的服务端环境变量。所以前端代码里的API地址还是构建时硬编码的http://localhost:3001。

解决方案 #

方案1：构建前端时注入环境变量 #

如果你的前端项目基于Node.js（比如React/Vue），可以在构建阶段把API地址注入到代码里：

• 前端代码里用环境变量占位，比如process.env.REACT_APP_API_LINK（Create React App要求前缀REACT_APP_，其他框架可直接用process.env.API_LINK）。
• 构建时传入实际的API地址：

  # 以React为例
  REACT_APP_API_LINK="https://gcloudezample-11111.lm.r.appsport.com/api" npm run build
  

• 再部署构建好的build文件夹到GAE，前端代码里的API地址就会被替换成生产环境地址。

方案2：动态适配当前域名（更灵活） #

利用GAE的dispatch路由规则，前端直接用当前页面的域名拼接API路径，无需硬编码：

• 把前端的API请求地址改成：

  const apiBaseUrl = `${window.location.origin}/api`;
  // 请求路径示例：`${apiBaseUrl}/v1/my-route`
  

• 这样不管部署到哪个域名，前端都会自动适配，无需修改构建配置。

额外修复：dispatch.yaml规则问题 #

你当前的dispatch规则'*/api'只能匹配/api根路径，无法匹配/api/v1/my-route这类子路径，需要修改为：

dispatch:
  - url: '/api/*'
    service: api

修改后重新部署dispatch.yaml：

gcloud app deploy dispatch.yaml

部署顺序建议 #

1. 先部署API服务：gcloud app deploy server/api.yaml
2. 再部署前端服务：gcloud app deploy client/client.yaml
3. 最后部署dispatch规则：gcloud app deploy dispatch.yaml

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