如何安全上传含API密钥的HTML/JS项目至GitHub并用于部署？

• 环境变量注入（适配主流静态部署平台）
  绝大多数静态站点部署平台（Vercel、Netlify、Cloudflare Pages等）都支持配置环境变量。操作步骤：

  1. 把代码里硬编码的API密钥替换成占位符，比如纯JS项目可以用%API_KEY%作为占位，Vite/React项目直接用import.meta.env.VITE_API_KEY或process.env.REACT_APP_API_KEY。
  2. 在部署平台的后台配置对应名称的环境变量，密钥只会存储在平台服务器，不会出现在仓库或前端打包后的代码里（如果是构建时注入）。
  3. 仓库里只保留带占位符的源码，放心上传GitHub即可。

• 后端代理中转
  这是最稳妥的安全方案，彻底不让前端接触密钥：

  1. 写个轻量后端服务（比如Node.js/Express几行代码就能搞定），前端请求这个后端接口，后端拿着密钥去调用目标API，再把结果返回给前端。
  2. 后端的密钥用环境变量管理，部署后端时在服务器或部署平台配置好变量。
  3. 前端代码里只写后端接口的地址，完全不含密钥，直接上传GitHub毫无风险。

• GitHub Secrets + Actions 构建部署
  如果用GitHub Pages部署，用Actions实现构建时注入密钥：

  1. 进入仓库的「Settings」→「Secrets and variables」→「Actions」，添加你的API密钥（比如命名为API_KEY）。
  2. 新建.github/workflows/deploy.yml，写一个构建部署的工作流，在构建步骤里用命令替换源码里的占位符（比如sed -i 's/%API_KEY%/${{ secrets.API_KEY }}/' index.html），或者通过构建工具的环境变量注入。
  3. 整个注入过程在GitHub服务器完成，仓库源码始终是占位符，不会泄露密钥。

• 短期令牌替代永久密钥
  如果你的目标API支持OAuth2或短期令牌机制：

  1. 实现令牌获取逻辑，比如用户通过授权登录后从后端拿到短期访问令牌，或者调用API的令牌生成接口获取有效期较短的令牌。
  2. 前端只用短期令牌调用API，过期后自动重新获取，完全不用在代码里存放永久密钥。
  3. 仓库里只有令牌获取的逻辑代码，不存在任何敏感信息，直接上传安全无忧。

内容的提问来源于stack exchange，提问作者Leela prasad Lokesh