基于React/Next.js的API项目部署平台选择及API密钥安全防护

一、适合React的永久免费部署平台 #

• Vercel：对React生态支持拉满，自动识别项目配置并完成构建部署，自带Serverless Functions能力，免费版提供无限静态站点配额和足够个人使用的函数调用量，生成的链接永久有效。
• Netlify：同样支持React一键部署，内置Netlify Functions作为轻量后端代理，免费版带宽和函数调用额度满足个人项目需求，链接稳定性高。
• GitHub Pages：完全免费的静态站点托管，适合纯静态React项目，但需要手动配置GitHub Actions完成构建，且无内置后端能力，需额外处理API密钥代理。

二、防止API密钥泄露的核心原则 #

前端代码会被完全暴露给用户，绝对不能在React组件、配置文件中硬编码API密钥。正确做法是：

• 引入后端代理层：前端只调用自己的后端接口，由后端携带密钥发起天气API请求，密钥仅存储在后端环境变量中。
• 利用平台无服务器函数：借助部署平台提供的Serverless/Edge Functions，无需单独搭建服务器，就能实现轻量后端代理。

三、Vercel永久免费安全部署分步方案 #

1. 推送代码到仓库：将React项目代码推送到GitHub或GitLab仓库。
2. 关联Vercel部署：
   • 登录Vercel，导入你的React仓库，平台会自动识别React的构建配置（如使用create-react-app的话无需额外设置）。
3. 配置环境变量：
   • 进入Vercel项目的「Settings」→「Environment Variables」，添加WEATHER_API_KEY变量，值为你的天气API密钥，保存后触发重新部署。
4. 编写Serverless代理函数：
   • 在项目根目录创建api/weather.js文件，示例代码如下（替换为你使用的天气API地址）：

     export default async function handler(req, res) {
       const { city } = req.query;
       const apiKey = process.env.WEATHER_API_KEY;
       const weatherRes = await fetch(`https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${city}`);
       const weatherData = await weatherRes.json();
       res.status(200).json(weatherData);
     }
     

5. 调整前端调用逻辑：
   • 前端不再直接请求第三方天气API，改为调用Vercel生成的代理接口：

     const getWeatherData = async (city) => {
       const res = await fetch(`/api/weather?city=${city}`);
       const data = await res.json();
       // 处理天气数据逻辑
     };
     

6. 完成部署：提交代码到仓库，Vercel会自动触发构建部署，完成后就能得到一个永久免费的公开访问链接（格式如your-project-name.vercel.app）。

四、额外注意事项 #

• 免费版平台的函数调用有额度限制，个人日常使用完全足够；若超出配额，可考虑切换平台或升级付费版。
• 避免在README、commit记录、分支代码中泄露密钥，定期检查环境变量配置确保安全。

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