Отправка Email-сообщений c сайта на хостинге Netlify при помощи сервиса Postmark

Хостинг Netlify выгодно отличается от конкурентов встроенной возможностью обработки форм, размещённых на сайте, и отправкой Email-сообщений из формы на любой адрес или несколько адресов. Причём, на бесплатном тарифе можно отправлять до 100 сообщений в месяц. Но что делать, если Email-сообщения необходимо отправлять не из формы, а по другому событию? Для этого Netlify предлагает готовую интеграцию с тремя популярными сервисами отправки Email-сообщений:

Далее я покажу как настроить отправку Email-сообщений с сайта, размещённого на хостинге Netlify, при помощи сервиса Postmark, который позволяет отправлять до 100 сообщений в месяц бесплатно:

Регистрируемся на сервисе Postmark. При этом, нужно быть готовым к следующим ограничениям:

1.1. Сервис Postmark не позволяет зарегистрироваться с использованием Email-адреса общего пользования, таким как @gmail.com, @mail.ru, @yandex.ru и т.п. Для регистрации нужно воспользоваться Email-адресом в своём или корпоративном домене.

1.2. После регистрации необходимо дождаться подтверждения аккаунта, которое, по соображениям безопасности, делается вручную сотрудниками сервиса Postmark. Ожидание подтверждения аккаунта может продлиться до 24 часов в рабочие дни или более на выходных.
После подтверждения аккаунта Postmark необходимо выполнить ещё некоторые настройки:

2.1. Если для отправки Email-сообщений используется личный домен или домен, для которого есть возможность редактирования DNS-записей, то желательно добавить две DNS-записи, как показано на скриншоте, чтобы можно было отправлять Email-сообщения с любого адреса в домене:

Настройка DNS

2.2. Если для отправки Email-сообщений используется корпоративный домен, для которого нет возможности редактирования DNS-записей, то оправлять Email-сообщения можно будет только с подтверждённых адресов:

Подтвержденные адреса

После выполнения всех необходимых настроек переходим в свойства почтового сервера и копируем «Server API Token», который понадобится для настройки интеграции с хостингом Netlify:

API Token

Далее переходим на хостинг Netlify и в настройках сайта включаем Email-интеграцию:

Активация Email

В настройках Email-интеграции выбираем поставщика Postmark и в поле «Email Provider APY Key» вставляем скопированный ранее «Server API Token». Остальные настройки Email-интеграции оставляем без изменений:

Интеграция Email

В настройках пользователя Netlify создаём и сохраняем в надёжном месте «Personal Access Token», который понадобится позже для загрузки сайта на хостинг из командной строки:

Access Token

Далее переходим в папку проекта и устанавливаем библиотеку Netlify для работы с Email-интеграцией:

# terminal
npm i @netlify/emails

Кроме того, потребуется библиотека Netlify для работы с функциями:

# terminal
npm i @netlify/functions

Для возможности сборки и загрузки сайта на хостинг Netlify из командной строки устанавливаем библиотеку Netlify CLI:

# terminal
npm i netlify-cli

В корне проекта создаём файл netlify.toml:

// netlify.toml
[functions];
node_bundler = "esbuild";

В корне проекта создаём папку emails, которая была указана в поле «Emails directory» в настройках Email-интеграции Netlify по умолчанию. В этой папке можно создать несколько шаблонов для исходящих Email-сообщений. Для каждого шаблона создаётся отдельная подпапка с файлом index.html внутри. Название подпапки является названием шаблона. В данном примере шаблон будет иметь наименование notice:

<!-- emails/notice/index.html -->
<html>
  <body>
    <p>Hello, {{name}}!</p>
  </body>
</html>

В корне проекта создаём папку netlify, а в ней подпапку functions, которая будет содержать функции Netlify. Для отправки Email-сообщений создаём файл notify.ts:

// netlify/functions/notify/notify.ts
import { sendEmail } from "@netlify/emails";
import type { Handler, HandlerEvent, HandlerContext } from "@netlify/functions";
const handler: Handler = async (
  event: HandlerEvent,
  context: HandlerContext
) => {
  await sendEmail({
    from: "name@domain.ru",
    to: "name@gmail.com",
    subject: "Subject",
    template: "notice",
    parameters: {
      name: "World",
    },
  });
  return { statusCode: 200 };
};
export { handler };

Собираем проект:

# terminal
npm run build

Загружаем сайт на хостинг из командной строки:

# terminal
npx netlify deploy --auth ACCESS_TOKEN --site SITE_ID --dir BUILD_DIR --prod --build

В этой команде необходимо заменить ACCESS_TOKEN, SITE_ID и BUILD_DIR на свои значения. Создание «Personal Access Token» показано в п.6 выше, «Site ID» можно найти в настройках сайта на Netlify, а название папки финальной сборки сайта зависит от используемого генератора и его настроек.

Если все было сделано правильно, то отправить Email-сообщение можно обратившись по адресу функции:

// script.js
fetch("/.netlify/functions/notify").then((response) =>
  console.log(response.status)
);