当我们使用 Astro 开发 Web 应用程序时,我们经常需要与外部 API 和服务进行交互。安全地管理凭证和 API 密钥对于保护我们的应用程序至关重要。在本指南中,我们将探索在 Astro 项目中管理 API 密钥和环境变量的最佳实践。
在 Astro 中,环境变量的处理方式与其他现代框架类似。首先,我们在项目的根目录中创建一个 .env 文件:
# .env PUBLIC_API_URL=https://api.ejemplo.com PRIVATE_API_KEY=tu_clave_secreta DATABASE_URL=postgresql://usuario:password@localhost:5432/db
对于 TypeScript,建议创建一个 env.d.ts 文件来输入我们的变量:
/// <reference types="astro/client" /> interface ImportMetaEnv { readonly DATABASE_URL: string; readonly PRIVATE_API_KEY: string; readonly PUBLIC_API_URL: string; } interface ImportMeta { readonly env: ImportMetaEnv; }
在 Astro 中,我们可以根据上下文以不同的方式访问环境变量:
--- // En archivos .astro const apiKey = import.meta.env.PRIVATE_API_KEY; const publicUrl = import.meta.env.PUBLIC_API_URL; ---
// En archivos .ts o .js const apiKey = import.meta.env.PRIVATE_API_KEY;
Astro 遵循环境变量的重要约定:
# .env PUBLIC_API_URL=https://api.publica.com # ✅ Visible en el cliente PRIVATE_API_KEY=secreto123 # ⛔ Solo servidor
要处理需要身份验证的 API,我们必须创建无服务器端点:
// src/pages/api/data.ts export async function GET() { try { const response = await fetch('https://api.externa.com/data', { headers: { 'Authorization': `Bearer ${import.meta.env.PRIVATE_API_KEY}` } }); const data = await response.json(); return new Response(JSON.stringify(data), { status: 200, headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: 'Error al obtener datos' }), { status: 500 }); } }
在应用程序开始时实现验证功能:
// src/utils/validateEnv.ts export function validateEnv() { const requiredEnvVars = [ 'DATABASE_URL', 'PRIVATE_API_KEY', 'PUBLIC_API_URL' ]; for (const envVar of requiredEnvVars) { if (!import.meta.env[envVar]) { throw new Error(`La variable de entorno ${envVar} es requerida`); } } } // src/pages/index.astro --- import { validateEnv } from '../utils/validateEnv'; if (import.meta.env.MODE === 'development') { validateEnv(); } ---
为每个环境创建不同的文件:
.env # Variables por defecto .env.development # Variables de desarrollo .env.production # Variables de producción .env.local # Variables locales (ignoradas en git)
提供.env.example文件:
# .env.example PUBLIC_API_URL=https://api.ejemplo.com PRIVATE_API_KEY=tu_clave_aqui DATABASE_URL=postgresql://usuario:password@localhost:5432/db
确保在 .gitignore 中包含敏感文件:
# .env PUBLIC_API_URL=https://api.ejemplo.com PRIVATE_API_KEY=tu_clave_secreta DATABASE_URL=postgresql://usuario:password@localhost:5432/db
/// <reference types="astro/client" /> interface ImportMetaEnv { readonly DATABASE_URL: string; readonly PRIVATE_API_KEY: string; readonly PUBLIC_API_URL: string; } interface ImportMeta { readonly env: ImportMetaEnv; }
--- // En archivos .astro const apiKey = import.meta.env.PRIVATE_API_KEY; const publicUrl = import.meta.env.PUBLIC_API_URL; ---
// En archivos .ts o .js const apiKey = import.meta.env.PRIVATE_API_KEY;
# .env PUBLIC_API_URL=https://api.publica.com # ✅ Visible en el cliente PRIVATE_API_KEY=secreto123 # ⛔ Solo servidor
// src/pages/api/data.ts export async function GET() { try { const response = await fetch('https://api.externa.com/data', { headers: { 'Authorization': `Bearer ${import.meta.env.PRIVATE_API_KEY}` } }); const data = await response.json(); return new Response(JSON.stringify(data), { status: 200, headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: 'Error al obtener datos' }), { status: 500 }); } }
// src/utils/validateEnv.ts export function validateEnv() { const requiredEnvVars = [ 'DATABASE_URL', 'PRIVATE_API_KEY', 'PUBLIC_API_URL' ]; for (const envVar of requiredEnvVars) { if (!import.meta.env[envVar]) { throw new Error(`La variable de entorno ${envVar} es requerida`); } } } // src/pages/index.astro --- import { validateEnv } from '../utils/validateEnv'; if (import.meta.env.MODE === 'development') { validateEnv(); } ---
API 密钥和环境变量的安全处理对于任何现代 Web 应用程序都至关重要。通过遵循 Astro 的这些最佳实践,我们可以:
以上是Astro 中的 API 密钥和环境变量:完整安全指南的详细内容。更多信息请关注PHP中文网其他相关文章!