Astro 中的 API 金鑰和環境變數：完整安全指南

當我們使用 Astro 開發 Web 應用程式時，我們經常需要與外部 API 和服務進行互動。安全地管理憑證和 API 金鑰對於保護我們的應用程式至關重要。在本指南中，我們將探索在 Astro 專案中管理 API 金鑰和環境變數的最佳實務。

Astro 中的環境變數

基本配置

在 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 遵循環境變數的重要約定：

• PUBLIC_*：可在客戶端和伺服器上存取
• 無 PUBLIC_ 前綴：只能在伺服器上存取

# .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
    });
  }
}

最佳實踐

1.環境變數的驗證

在應用程式開始時實現驗證功能：

// 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();
}
---

2. 多重環境管理

為每個環境建立不同的檔案：

.env                # Variables por defecto
.env.development    # Variables de desarrollo
.env.production     # Variables de producción
.env.local          # Variables locales (ignoradas en git)

3.環境變數模板

提供.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

4.Git配置

確保在 .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;
}

Firebase 範例

---
// En archivos .astro
const apiKey = import.meta.env.PRIVATE_API_KEY;
const publicUrl = import.meta.env.PUBLIC_API_URL;
---

部署和 CI/CD

Vercel 中的配置

// En archivos .ts o .js
const apiKey = import.meta.env.PRIVATE_API_KEY;

GitHub 操作

# .env
PUBLIC_API_URL=https://api.publica.com    # ✅ Visible en el cliente
PRIVATE_API_KEY=secreto123                # ⛔ Solo servidor

額外的安全提示

1. 金鑰輪替：實作定期輪替 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
    });
  }
}

1. 使用狀況監控：實作日誌記錄以偵測誤用

// 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中文網其他相關文章！