Kunci API dan Pembolehubah Persekitaran dalam Astro: Panduan Keselamatan Lengkap

Apabila kami membangunkan aplikasi web dengan Astro, kami kerap perlu berinteraksi dengan API dan perkhidmatan luaran. Mengurus bukti kelayakan dan kunci API dengan selamat adalah penting untuk melindungi aplikasi kami. Dalam panduan ini, kami akan meneroka amalan terbaik untuk mengurus kunci API dan pembolehubah persekitaran dalam projek Astro.

Pembolehubah Persekitaran dalam Astro

Konfigurasi Asas

Di Astro, pembolehubah persekitaran dikendalikan sama seperti rangka kerja moden yang lain. Mula-mula, kami mencipta fail .env dalam akar projek kami:

# .env
PUBLIC_API_URL=https://api.ejemplo.com
PRIVATE_API_KEY=tu_clave_secreta
DATABASE_URL=postgresql://usuario:password@localhost:5432/db

Untuk TypeScript, adalah dinasihatkan untuk membuat fail env.d.ts untuk menaip pembolehubah kami:

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

Mengakses Pembolehubah

Di Astro, kita boleh mengakses pembolehubah persekitaran dengan cara yang berbeza bergantung pada konteks:

---
// 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;

Keselamatan Bahagian Hadapan

Pembolehubah Awam lwn Persendirian

Astro mengikuti konvensyen penting untuk pembolehubah persekitaran:

• PUBLIC_*: Boleh diakses pada klien dan pelayan
• Tiada awalan PUBLIC_: Hanya boleh diakses pada pelayan

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

Melindungi Kekunci Sensitif

Untuk mengendalikan API yang memerlukan pengesahan, kami mesti mencipta titik akhir tanpa pelayan:

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

Amalan Terbaik

1. Pengesahan Pembolehubah Persekitaran

Laksanakan fungsi pengesahan pada permulaan permohonan anda:

// 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. Pengurusan Persekitaran Pelbagai

Buat fail yang berbeza untuk setiap persekitaran:

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

3. Templat Pembolehubah Persekitaran

Menyediakan fail .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. Konfigurasi Git

Pastikan anda memasukkan fail sensitif dalam .gitignore:

# .env
PUBLIC_API_URL=https://api.ejemplo.com
PRIVATE_API_KEY=tu_clave_secreta
DATABASE_URL=postgresql://usuario:password@localhost:5432/db

Integrasi dengan Perkhidmatan Luaran

Contoh dengan Stripe

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

Contoh dengan Firebase

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

Deployment dan CI/CD

Konfigurasi dalam Vercel

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

Tindakan GitHub

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

Petua Keselamatan Tambahan

1. Putaran Kekunci: Laksanakan sistem untuk memutar kunci API secara berkala

// 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. Pemantauan Penggunaan: Laksanakan pengelogan untuk mengesan penyalahgunaan

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

Pengendalian kunci API dan pembolehubah persekitaran yang selamat adalah penting untuk mana-mana aplikasi web moden. Dengan mengikuti amalan terbaik ini di Astro, kita boleh:

• Pastikan kelayakan kami selamat
• Asingkan konfigurasi mengikut persekitaran
• Laksanakan pengesahan yang mantap
• Sepadukan perkhidmatan luaran dengan selamat

Atas ialah kandungan terperinci Kunci API dan Pembolehubah Persekitaran dalam Astro: Panduan Keselamatan Lengkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!