Когда вы создаете статический веб-сайт, это означает, что вы не хотите управлять сервером или хотите сэкономить на расходах. Однако статический веб-сайт не может обрабатывать контактные формы, а это означает, что вам нужен внутренний сервер для обработки запросов контактных форм. Но если вам нужен сервер, то в чем логика создания статического сайта? Таким образом, простое решение - это бессерверные контактные формы.
Зачем переходить без сервера?
Создание бессерверных приложений дает множество преимуществ, но вкратце основные преимущества - это простота настройки, отсутствие управления и меньшая стоимость (бесплатно).
Выбор платформы
Есть много способов запустить бессерверный код, например aws lambda, облачные функции Google, облачные работники. Но я выбрал самый простой способ запустить бессерверный код, то есть облачные функции Google.
Google Cloud functions позволяет запускать функцию через HTTPS-запрос. Это также можно сделать с помощью лямбда aws, но для запуска функции необходимо дополнительно настроить шлюз API.
Расходы
Облако Google предлагает бесплатные 200 000 ГГц-секунд вычислительного времени, 5 ГБ исходящего интернет-трафика и 2 миллиона вызовов в месяц. Https://cloud.google.com/functions/pricing
Я использую среду выполнения 256 МБ / 0,4 ГГц, и обработка формы занимает ~ 800 мс.
Эта бесплатная квота слишком велика для отправки формы обратной связи.
0,4 x 0,8 с = 0,32 ГГц-секунды на вызов
200,000 / 0.32 = 625,000
Вы можете бесплатно обрабатывать 625 000 успешных форм в месяц *.
* Это всего лишь пример расчета и не включает стоимость электронной почты. На бесплатные ресурсы распространяются облачные политики Google.
Настраивать
Шаг 1. Создайте проект
(Если у вас нет облачной учетной записи Google, создайте ее, а затем создайте проект)
Шаг 2: Создайте функцию
Щелкните значок меню в левом верхнем углу. Прокрутите вниз и найдите Cloud Function в разделе COMPUTE.
Затем нажмите кнопку «Создать функцию».
Шаг 3. Заполните форму
Задайте имя функции (контактная форма).
Выделить память (256 МБ достаточно)
Установите триггер «HTTP» - он работает и для https.
Аутентификация не требуется, поэтому оставьте ее установленной, чтобы принимать неаутентифицированные запросы.
Исходный код может быть встроен или загружен ZIP-файл. Вы можете найти zip-файл здесь https://github.com/bansal-io/serverless-contact-form/tree/master/dist
Я выбрал здесь вариант встроенного редактора.
Шаг 4. Добавьте код в редактор
Откройте репозиторий https://github.com/bansal-io/serverless-contact-form
Скопируйте код файлов index.js и package.json и вставьте его на соответствующие вкладки редактора кода.
В поле "Функции" для выполнения введите onSubmit.
Шаг 5: установите переменные среды
Все переменные среды, относящиеся к SMTP, являются обязательными. Остальные переменные необязательны. Проверьте детали конфигурации https://github.com/bansal-io/serverless-contact-form/#configure
Нажмите кнопку «Создать», и ваша функция готова.
Примечание. Вместо установки переменных среды вы также можете изменить значения конфигурации в файле index.js.
Получить конечную точку http
После развертывания функции щелкните имя функции (контактная форма), затем вкладку «Триггер», чтобы найти URL-адрес.
Ваш URL будет выглядеть так.
https://YOUR_REGION-YOUR_PROJECT_ID.cloudfunctions.net/FUNCTION_NAME
Теперь вы можете установить этот URL-адрес в атрибуте действия в своей HTML-форме.
Вот рабочий пример контактной формы с облачной функцией Google https://serverless-contact-form.netlify.com/
Примечание. Этот код позволяет принимать запросы из любого домена. Чтобы ограничить это только своим доменом, вы также можете изменить значение 'Access-Control-Allow-Origin' с '*' на 'https: // your-website .com '.
