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 中国語 Web サイトの他の関連記事を参照してください。