통합 가이드 · ASTRO & JAMSTACK

Astro 문의 양식 통합(정적 및 SSR)

이메일 서버나 데이터베이스를 유지 관리하지 않고 Lugatu 엔드포인트를 사용하여 Astro 정적 사이트(SSG) 및 하이브리드 서버 경로에 문의 양식을 추가하는 방법입니다.

1. 순수 정적 사이트(SSG) 양식 수집

Astro는 기본적으로 JavaScript가 없는 것으로 유명합니다. Lugatu를 사용하면 Astro 사이트를 100% 정적으로 유지하면서 표준 HTML 양식과 가벼운 클라이언트 측 가져오기를 통해 문의를 수집할 수 있습니다.

src/pages/contact.astro astro

---
// src/pages/contact.astro
---
<form id="astro-contact-form" class="space-y-4 max-w-md">
  <div>
    <label class="block text-sm font-semibold mb-1">Your Name</label>
    <input type="text" name="name" required class="w-full border rounded-xl p-2.5" />
  </div>
  <div>
    <label class="block text-sm font-semibold mb-1">Email Address</label>
    <input type="email" name="email" required class="w-full border rounded-xl p-2.5" />
  </div>
  <div>
    <label class="block text-sm font-semibold mb-1">Message</label>
    <textarea name="message" rows="4" required class="w-full border rounded-xl p-2.5"></textarea>
  </div>

  <input type="text" name="_gotcha" style="display:none !important" tabindex="-1" autocomplete="off" />

  <button type="submit" class="btn-primary-editorial py-2.5 px-6">Send Message</button>
</form>

<script>
  const form = document.getElementById('astro-contact-form') as HTMLFormElement;
  form?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(form);

    const payload = {
      fields: {
        name: formData.get('name'),
        email: formData.get('email'),
        message: formData.get('message'),
      },
      honeypot: formData.get('_gotcha') || '',
    };

    const res = await fetch('https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify(payload),
    });

    if (res.ok) {
      alert('Thank you! Message delivered.');
      form.reset();
    }
  });
</script>

2. 서버 API 키를 사용한 Astro Hybrid / SSR API 경로

Astro 사이트가 Cloudflare Pages, Netlify 또는 Vercel에서 하이브리드 또는 SSR 모드로 실행되는 경우 Astro API 경로를 통해 제출물을 안전하게 전달하세요.

src/pages/api/contact.ts typescript

import type { APIRoute } from 'astro';

export const POST: APIRoute = async ({ request }) => {
  const data = await request.formData();
  const fields = {
    name: data.get('name')?.toString(),
    email: data.get('email')?.toString(),
    message: data.get('message')?.toString(),
  };

  const res = await fetch(`https://www.lugatu.com/api/v1/forms/${import.meta.env.LUGATU_FORM_ID}/submissions`, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${import.meta.env.LUGATU_API_KEY}`,
      'Content-Type': 'application/json',
      'Idempotency-Key': crypto.randomUUID(),
    },
    body: JSON.stringify({ fields }),
  });

  return new Response(JSON.stringify({ success: res.ok }), {
    status: res.status,
    headers: { 'Content-Type': 'application/json' },
  });
};

보안 및 인증 불변

보안 지침: Astro 클라이언트측 스크립트 태그에 import.meta.env.LUGATU_API_KEY를 노출하지 마세요. 클라이언트 스크립트는 공용 엔드포인트만 사용해야 합니다.

문제 해결 및 일반적인 수집 오류

양식은 로컬에서 작동하지만 프로덕션 Cloudflare/Netlify 빌드에서는 실패합니다.

프로덕션 환경 변수(LUGATU_FORM_ID 및 LUGATU_API_KEY)가 호스팅 대시보드에 구성되어 있는지 확인하세요.

자주 묻는 질문

Lugatu를 사용하여 Astro 사이트를 100% 정적으로 유지할 수 있나요?

예. 순수 정적(SSG) 사이트는 호스팅 공급자의 서버 컴퓨팅을 요구하지 않고 Lugatu 공개 엔드포인트에 직접 제출합니다.

양식 끝점을 만들 준비가 되셨나요?

몇 초 안에 무료로 시작해 보세요. 신용 카드가 필요하지 않습니다.

무료로 시작하세요 →