Astro의 API 키 및 환경 변수: 완벽한 보안 가이드

Astro로 웹 애플리케이션을 개발할 때 외부 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. 힘내 구성

.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 키와 환경 변수를 안전하게 처리하는 것은 모든 최신 웹 애플리케이션에 매우 중요합니다. Astro에서 이러한 모범 사례를 따르면 다음과 같은 이점을 얻을 수 있습니다.

• 자격 증명을 안전하게 유지하세요
• 환경별 별도 구성
• 강력한 검증 구현
• 외부 서비스를 안전하게 통합

위 내용은 Astro의 API 키 및 환경 변수: 완벽한 보안 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!