Описание

Моя цель состояла в том, чтобы создать конечную точку, к которой я мог бы получить доступ из портфолио, чтобы отправить хук раздора, не раскрывая URL-адрес. Первоначально я загружал прямо из моего внешнего интерфейса веб-крюк раздора, чтобы люди могли связаться со мной, но позже я узнал, что с этой информацией вы можете полностью удалить веб-хук, поэтому я хотел скрыть это. Я мог бы создать свой собственный сервер и размещать его на таком сервисе, как Heroku, однако я хотел окунуться в воды AWS. Итак, вот что я сделал.

1. Лямбда-функция

То, как я начал, сразу переходило в лямбда. Раньше я знал о его существовании и хотел изучить его. Итак, что я делаю в этой лямбда-функции? Ну, в моем случае я хочу передать некоторые данные в выборку, которая отправит Discord Webhook на сервер, который я сделал. Данные, которые я хочу передать, предназначены для контактной формы, поэтому я получаю имя, адрес электронной почты и сообщение от пользователя, и я хочу, чтобы он пинговал мой дискорд. То, как я это сделал, было просто в моей голове. По сути, я хотел скопировать то, что у меня было из моей выборки на веб-сайте, и это был упрощенный код, который мне нужен. Сначала я рассматривал это как маршрут сервера Express и обнаружил, что он немного отличается. Вы должны фактически разобрать тело, чтобы деструктурировать его.

import fetch from 'fetch-node';
export const handler = async(event) => {
    const { name, email, message } = JSON.parse(event.body);
    const options =
    {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            "embeds": [{
                "author": {
                    "name": name
                },
                "footer": {
                    "text": email
                },
                "description": message
            }]
        })
    };
    const result = await fetch(`YOUR_WEBHOOK_URL`, options);
};

Таким образом, обработчик — это то, что AWS дает с событием, и это событие передает данные из запроса. Поэтому я хотел получить свои переменные из тела (имя, адрес электронной почты и сообщение) и отправить их на свой веб-хук. Это казалось простым, и я написал это прямо в лямбда-редакторе, но, похоже, таким образом не было возможности установить fetch-node. Поэтому мне пришлось зайти в свой собственный редактор кода, создать этот файл с именем index.mjs и самостоятельно настроить менеджер пакетов. Как только я это сделал, я сжимаю эти файлы вместе и загружаю на лямбда.

Вы можете увидеть файловую структуру слева, если возникнет путаница в том, что вы архивируете. Теперь, когда я тестировал, у меня изначально были некоторые проблемы, потому что в оранжевой тестовой кнопке вы можете настроить тест, и я просто помещал свое тело запроса, чтобы оно выглядело примерно так.

{
  "name": "Chris",
  "email": "[email protected]",
  "message": "Hi"
}

Я ожидал, что это будет тело, но оказалось, что оно отправляет гораздо больше данных через событие, поэтому внутри этого объекта есть отдельный ключ для тела, и он содержит строковую версию JSON выше. А ниже что-то похожее на то, что на самом деле будет проходить через событие.

{
  "body": "{\"name\":\"Chris\",\"email\":\"[email protected]\",\"message\":\"Hi\"}"
}

Теперь, когда я все понял, я нажал кнопку развертывания и запустил тест. Он пинговал мой дискорд-сервер! Так здорово, что все сделано правильно?! Что ж, лямда-функция просто должна вернуть объект с кодом состояния (и, возможно, телом, которое я еще не успел проверить, но вот как выглядит мой возврат в конце функции.

const response = {
    statusCode: 200,
    body: JSON.stringify(result),
};
return response;

Теперь нам просто нужно настроить шлюз API, чтобы мы могли получить его из нашего внешнего интерфейса!

2. Шлюз API

Перейдите на шлюз API и создайте API с помощью оранжевой кнопки в правом верхнем углу. Я создал REST API, нажав кнопку сборки рядом с REST API (не частный).

После того, как вы нажали на это, вы хотите установить флажки для протокола REST, New API и настроить остальные параметры с именем API и убедиться, что тип конечной точки является региональным, а затем просто нажмите «Создать API».

Вы должны попасть в раздел ресурсов, где вам нужно настроить маршрут, из которого вы хотите, чтобы ваша лямбда-функция вызывалась. Таким образом, вверху должно быть раскрывающееся меню действий. Вы хотите нажать «Создать метод». Теперь ниже вашего корня (/) должно быть пустое раскрывающееся меню, и именно здесь вы установили свой HTTP-метод. Для этого я хочу использовать POST, поэтому я установил POST, а затем щелкнул крошечную галочку справа.

Теперь вас должны привести к настройке. Здесь вы должны установить тип интеграции на лямбда-функцию, установить флажок «Использовать интеграцию с лямбда-прокси» и установить для лямбда-региона тот же регион, что и для лямбда-функции (если вы не меняли регион при создании функции, тогда он должен быть установлен на ваш локальный регион). регион уже). Теперь, когда они у вас есть, начните вводить имя своей лямбда-функции в текстовое поле «Лямбда-функция», а затем нажмите «Сохранить».

Вернитесь к раскрывающемуся списку действий, нажмите «Развернуть API» и создайте новый этап «Развертывание». Настройте имя этапа, которое я назвал своим портфолио (это будет конец вашего URL-адреса), затем нажмите «Развернуть».

Если вы перейдете к своим этапам, вы увидите свой этап и свои маршруты. Нажмите на маршрут, который вы только что сделали, в этом случае он будет просто сообщением. Он должен дать вам URL-адрес вызова вверху. Итак, теперь мы просто хотим попасть по этому URL-адресу из нашего внешнего интерфейса.

3. Интерфейс

Это должно быть довольно просто. Мы только что получили наш URL-адрес, на который мы хотим отправить запрос POST, и теперь мы готовы его получить. Вот пример того, как это должно выглядеть.

await fetch('INVOKE_URL', {
    method: 'POST',
    mode: 'no-cors',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name, email, message })
});

Итак, мы хотим получить URL-адрес с помощью метода POST, и нам нужно установить режим no-cors или "Access-Control-Allow-Origin": "*" на шлюзе API, включив cors, но я еще не совсем понял это. В любом случае, это не имеет значения, потому что теперь ваше веб-приложение может отправлять веб-перехватчик Discord через бэкэнд, а не через внешний интерфейс, чтобы скрыть URL-адрес вашего веб-перехватчика!

Я надеюсь, что это было немного проницательно. Это мой первый раз, когда я веду какой-либо блог или публикую сообщения, и я только начинаю делать это, чтобы помочь себе закрепить знания и иметь возможность оглянуться на свой прогресс. Я многому научился, пытаясь настроить это, и я надеюсь придумать другие применимые идеи, чтобы опубликовать их. Хорошего дня :)