Vercel 如何处理环境变量和配置管理？

Vercel 提供了一套完善的环境变量和配置管理系统，让开发者能够安全地管理不同环境下的配置信息。

环境变量管理

1. 环境变量类型

Vercel 支持三种主要的环境变量类型：

Production（生产环境）：用于生产部署，只有合并到主分支的代码才能访问
Preview（预览环境）：用于预览部署，所有 Pull Request 和分支都能访问
Development（开发环境）：用于本地开发，通过 Vercel CLI 访问

2. 设置环境变量

可以通过以下方式设置环境变量：

通过 Vercel Dashboard：

进入项目设置
选择 "Environment Variables"
添加变量名称和值
选择适用的环境（Production、Preview、Development）

通过 Vercel CLI：

bash
vercel env add MY_API_KEY production
vercel env add MY_API_KEY preview
vercel env add MY_API_KEY development

通过 vercel.json 配置文件：

json
{
  "env": {
    "MY_API_KEY": "@my-api-key"
  },
  "build": {
    "env": {
      "BUILD_TIME_VAR": "value"
    }
  }
}

3. 访问环境变量

在代码中可以通过 process.env 访问环境变量：

javascript
const apiKey = process.env.MY_API_KEY;

配置管理

1. vercel.json 配置文件

vercel.json 是 Vercel 的项目配置文件，可以定义构建、路由、重定向等设置：

json
{
  "version": 2,
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "create-react-app",
  "regions": ["iad1"],
  "functions": {
    "api/**/*.js": {
      "memory": 1024,
      "maxDuration": 10
    }
  },
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        }
      ]
    }
  ],
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "/api/:path*"
    }
  ]
}

2. 框架自动检测

Vercel 能够自动检测并配置常见的前端框架：

Next.js
React (Create React App)
Vue.js
Angular
Nuxt.js
Gatsby
SvelteKit

对于自动检测的框架，通常不需要手动配置 vercel.json。

3. 构建配置

构建命令：定义如何构建项目

json
{
  "buildCommand": "npm run build"
}

json
{
  "outputDirectory": "dist"
}

安装命令：自定义依赖安装命令

json
{
  "installCommand": "npm ci"
}

最佳实践

1. 安全性

永远不要将敏感信息提交到代码仓库
使用环境变量存储 API 密钥、数据库连接字符串等敏感信息
定期轮换敏感的 API 密钥和令牌

2. 环境隔离

为不同环境使用不同的配置
生产环境使用生产数据库和 API 端点
预览环境使用测试资源

3. 默认值处理

在代码中为环境变量提供默认值：

javascript
const apiUrl = process.env.API_URL || 'https://api.example.com';

4. 类型检查

使用 TypeScript 或其他类型检查工具确保环境变量的类型安全：

typescript
const API_URL = process.env.API_URL as string;
const PORT = parseInt(process.env.PORT || '3000', 10);

常见问题

1. 环境变量未生效

确保：

变量已正确设置在对应的环境中
重新部署项目以应用新的环境变量
检查变量名称的大小写是否正确

2. 本地开发访问环境变量

使用 Vercel CLI 拉取环境变量到本地：

bash
vercel env pull .env.local

3. 环境变量长度限制

Vercel 对环境变量的长度有限制，对于大型配置，考虑使用配置文件或环境变量管理服务。