Skip to content

Latest commit

 

History

History
151 lines (110 loc) · 7.24 KB

README-RU.md

File metadata and controls

151 lines (110 loc) · 7.24 KB

API-сервис электронной почты для контактных форм (Resend + Vercel)

🌐 Доступно на других языках: English | Bahasa Indonesia | Français | Deutsch | 日本語 | 中文 | Español | Polski | Português | 한국어

Это простой бэкенд-проект, который служит сервисом отправки электронной почты для контактных форм. Он создан с использованием Node.js и почтового сервиса Resend и предназначен для развертывания как бессерверная функция на Vercel.

Это решение является более простой и современной альтернативой Gmail с OAuth2, требуя для аутентификации только API-ключ.

✨ Возможности

  • Единая конечная точка API: Принимает POST-запросы, содержащие данные формы (name, email, message).
  • Надежная доставка электронной почты: Использует Resend для отправки транзакционных писем.
  • Готов к развертыванию на Vercel: Сконфигурирован как бессерверная функция для масштабируемости и простоты развертывания.
  • Обработка CORS: Включает встроенную конфигурацию CORS для разрешения запросов с вашего фронтенд-домена.
  • Ответ в формате JSON: Предоставляет четкие ответы о статусе (success или error) для бесшовной интеграции с фронтендом.

📦 Используемые технологии

  • Node.js (модули ES)
  • Resend
  • Бессерверная функция Vercel

🚀 Руководство по установке и развертыванию

Следуйте этим шагам, чтобы запустить ваш почтовый сервис.

1. Получите ваши учетные данные Resend

Перед развертыванием вам понадобятся API-ключ и проверенный домен от Resend.

  1. Создайте аккаунт: Зарегистрируйте бесплатный аккаунт на resend.com.
  2. Подтвердите ваш домен:
    • В панели управления Resend перейдите в раздел "Domains".
    • Добавьте домен, который вы будете использовать для отправки писем (например, домен вашего портфолио).
    • Следуйте инструкциям, чтобы добавить DNS-записи (обычно MX и TXT) у вашего доменного провайдера или в DNS-менеджере (например, Netlify или Cloudflare).
  3. Создайте API-ключ:
    • Перейдите в раздел "API Keys".
    • Нажмите "Create API Key", дайте ему имя и установите Разрешение на "Full Access".
    • Скопируйте и сохраните API-ключ — он будет показан только один раз.

2. Разверните проект на Vercel

  1. Клонируйте или сделайте форк этого репозитория: Получите копию этого проекта в свой аккаунт GitHub.
  2. Импортируйте в Vercel:
    • Войдите в Vercel и нажмите "Add New... > Project".
    • Выберите ваш репозиторий GitHub. Vercel автоматически определит его как проект Node.js.
  3. Установите переменные окружения:
    • В настройках вашего проекта Vercel перейдите в раздел "Environment Variables".
    • Добавьте следующую переменную:
      • Name: RESEND_API_KEY
      • Value: (Вставьте ваш API-ключ Resend, начинающийся с re_...)
  4. Разверните: Нажмите "Deploy", чтобы запустить ваш проект.

После завершения развертывания Vercel предоставит URL проекта (например, https://your-project-name.vercel.app).

📨 Документация API

Ваша конечная точка API будет доступна по URL вашего развертывания на Vercel с последующим путем API.

  • URL: https://your-project-name.vercel.app/api/handle-form
  • Метод: POST
  • Заголовки: Content-Type: application/json

Пример тела запроса (JSON)

{
  "name": "John Doe",
  "email": "john@example.com",
  "message": "Здравствуйте! Я заинтересован в сотрудничестве с вами."
}

Пример ответа

Успех (Статус 200)

{
  "status": "success",
  "message": "Сообщение успешно отправлено!"
}

Ошибка (Статус 400/500)

{
  "status": "error",
  "message": "Все поля обязательны для заполнения."
}

🔌 Пример интеграции с фронтендом

Используйте fetch в вашем фронтенд-коде JavaScript для отправки данных формы на развернутую конечную точку API.

// Пример реализации на фронтенде
const form = document.getElementById("contactForm");

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const apiUrl = "[https://your-project-name.vercel.app/api/handle-form](https://your-project-name.vercel.app/api/handle-form)";
  const formData = {
    name: form.name.value,
    email: form.email.value,
    message: form.message.value,
  };

  try {
    const response = await fetch(apiUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
    });

    const data = await response.json();

    if (data.status === "success") {
      alert("Сообщение успешно отправлено!");
      form.reset();
    } else {
      alert("Ошибка: " + data.message);
    }
  } catch (error) {
    console.error("Ошибка:", error);
    alert("Не удалось отправить сообщение. Пожалуйста, попробуйте позже.");
  }
});

📄 Лицензия

Этот проект лицензирован под Лицензией MIT.