部署ReactJS站点到GitHub Pages时如何避免泄露TMDb API密钥

首先说死一个绕不开的技术逻辑：纯前端静态站部署在GitHub Pages上，只要API密钥需要在用户浏览器里运行的代码中使用，就不可能做到100%不被公开拿到。你把.env加进.gitignore，只是防止密钥被提交到Git仓库而已——React项目构建时，所有REACT_APP_开头的环境变量会被直接硬编码打进最终打包的JS文件里，这些文件部署到GitHub Pages后是公开可访问的，不管你怎么混淆代码，用户打开开发者工具抓包、或者翻打包后的JS文件，迟早能掏出密钥。

你要的“发布站点同时密钥完全不公开”，唯一可行的思路就是密钥永远不传到用户浏览器，所有用到密钥的请求都在你可控的服务端完成，具体落地有两个低成本、适配GitHub Pages部署流程的方案：

方案1：加一层轻量服务端代理 #

用免费额度足够个人使用的Serverless服务（比如Cloudflare Workers、Vercel/Netlify的无服务器函数）搭一层极简转发层：

• 把TMDb的API密钥存在这层代理服务的环境变量里，永远不对外暴露
• 前端不再直接请求TMDb官方接口，所有请求都发到你自己的代理地址
• 代理收到请求后，自动附上存储在服务端的密钥转发给TMDb，拿到结果后再返回给前端
• 你还可以在代理层加简单的防护：比如限制只允许你的GitHub Pages域名跨域访问、限制单IP请求频率，避免接口被恶意盗刷
  这套方案不需要你买服务器，个人项目用免费额度完全覆盖，还可以和GitHub的代码提交流程打通，push代码后自动同时构建前端页面到GitHub Pages、更新代理逻辑，几乎没有额外维护成本。

方案2：构建阶段预生成静态数据 #

如果你的网站不需要支持用户实时搜索、动态拉取最新数据，只是展示固定的电影列表、榜单、提前选定的影片信息，那连代理都不用搭：

• 把TMDb密钥配置成GitHub Actions的加密密钥，这个密钥只会在项目的构建流程中临时可用，不会出现在任何公开内容里
• 在GitHub Actions执行React构建的步骤前，加一段脚本，用密钥提前拉取站点需要的所有电影数据，转成本地静态JSON文件存到项目里
• 后续React构建时直接引用这些本地JSON文件打包，整个运行时根本不需要调用TMDb接口，最终部署到GitHub Pages的静态文件里半点儿密钥相关的内容都没有
  这个方案安全性最高，完全没有密钥泄露的可能，缺点就是只适合内容固定、不需要实时动态查询的场景。

• 别信什么“前端环境变量藏密钥”“代码混淆加密密钥”的偏方，这些都是防君子不防小人，只要密钥到了用户浏览器里，就没有藏得住的可能
• 不要觉得.env进了.gitignore就安全，只要你在React代码里引用了process.env.REACT_APP_XXX对应的密钥，构建后就会明文出现在公开的静态JS资源里
• 如果实在懒得搭代理，至少要去TMDb后台给对应的密钥配置访问来源白名单、开用量预警，就算真的泄露了也能及时止损，但这种方式本质上达不到你要的“密钥始终无法被公开访问”的要求。

内容的提问来源于stack exchange，提问作者Aditya Mayukh Som