如何为部署在Google Cloud Storage存储桶的React静态应用添加环境变量

你不能直接在Google Cloud Storage（GCS）存储桶中配置环境变量供前端React应用使用。

原因说明 #

• GCS是纯静态对象存储服务，没有运行时执行环境，也不支持动态向托管的静态资源中注入变量，所有上传到GCS的文件都是固定内容的静态资源，无法在访问时动态修改或插入配置值。
• Create React App（CRA）中REACT_APP_前缀的环境变量本质是构建阶段硬编码到JS产物中的固定值，只要你在构建时传入了密钥，不管部署到任何静态托管平台，都会明文出现在公开的JS资源中，公共存储桶的所有访问者都可以直接检索到这些密钥。

可行的替代方案 #

绝对不要把需要保密的API密钥直接嵌入前端代码，推荐用以下方案实现需求：

1. 新增代理层转发请求
   在GCP上部署Cloud Function或者Cloud Run服务作为代理，所有需要携带密钥的API请求都先发送到这个代理服务，密钥直接配置在代理服务的运行时环境变量中，代理服务收到请求后自动补全密钥再转发给目标API，再把结果返回给前端，全程前端不会接触到密钥。
2. 改用身份鉴权替代密钥
   如果需要调用的是Google Cloud自身的服务，直接在前端集成Google Identity或者Firebase Auth做用户身份认证，后端服务做权限校验，前端请求只需要携带用户身份凭证即可，不需要存储任何长期密钥。

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