Создайте свой бэкэнд с функциями NetLify за 20 минут

NetLify делает развертывание вашего фронтального конца быстрым и простым, а функции NetLify позволяют выполнять без сервера бэкэнд таким же простым.

В этом руководстве мы получим настройку о том, как использовать функции NetLify. Как инди -разработчик, вы должны принять предложения без серверов из -за их низкого барьера для входа и щедрых бесплатных уровней. И как корпоративный магазин, вы должны серьезно рассмотреть их для чрезвычайно дешевого, быстрого и масштабируемого способа создания инфраструктуры бэкэнд.

Варианты использования – что вы можете построить?

Современные фреймворки JavaScript позволяют нам создавать большие и сложные приложения для клиента, но они могут иногда столкнуться с ограничениями. Для всего остального есть «бэкэнд», который превосходен при обращении с некоторыми из этих вариантов использования:

Защита секретов и полномочий
Рендеринг на стороне сервера
Отправка электронных писем
Обработка файла io
Запуск централизованной логики
Выполнение задач из основного потока
Обход проблем CORS для заблокированных APIS
Обеспечение прогрессивного улучшения/отрыва от NOScript

Состав функции

NetLify функции предоставляет обертку вокруг AWS Lambdas Анкет Хотя документация NetLify должна быть достаточной, полезно знать, что есть люк Escape, если вы когда -нибудь захотите запустить свою собственную подписку AWS. Тем не менее, NetLify обрабатывает часть магии развертывания для вас, так что давайте начнем там.

Вот голые кости функции NetLify в JavaScript:

exports.handler = async function(event, context) {
    return {
        statusCode: 200,
        body: JSON.stringify({message: "Hello World"})
    };
}

Если вы знакомы с запуском JavaScript на узле, это должно выглядеть несколько знакомо. Каждая функция должна жить в своем собственном файле, и будет выполнять все, что назначено Exports.handler . У нас есть доступ к событие и контекст Анкет Мы можем запустить любой код, который нам нужен на узле, и вернуть любой тип ответа, который мы хотели бы.

Чтобы настроить это, давайте создадим пустой репозиторий на GitHub. Нам нужно добавить функции в папку. Хотя мы можем использовать любое имя, общим шаблоном является создание имени папки функции . Давайте добавим там файл, называемый Привет

//functions/hello.js
exports.handler = async (event, context) => {
  const { name = "Anonymous" } = event.queryStringParameters;
  return {
    statusCode: 200,
    body: `Hello, ${name}`
  };
};

В нашей функции мы можем получить информацию из параметров строки запроса. Мы разрушим их ( со значением по умолчанию ) и поищите имя парамет

Чтобы фактически подключить нашу папку функций, нам нужно добавить netLify.toml Файл конфигурации в корне нашего проекта.

# netlify.toml
[build]
  functions = "functions/"

Прогуляйтесь перед бегом (локально)

Наш «репо» должен выглядеть так на данный момент:

my-app
├── functions
│   └── hello.js
└── netlify.toml

Лучший способ запустить ваш сайт NetLify локально, со всеми прикрепленными наворотами – это использовать NetLify dev который вы можете установить через NPM:

npm install netlify-cli -g

А потом так начните свой сервер Dev:

netlify dev

Ваш “сайт” теперь должен быть вживую в http://localhost: 8888 Анкет По умолчанию функции netLify хоста в подноме /.netlify/functions/ Таким образом, вы можете вызвать свою функцию здесь:

http://localhost:8888/.netlify/functions/hello?name= Бет

Теперь давайте сделаем адрес нашей функции немного чище, также воспользовавшись еще одной бесплатной функцией NetLify, используя перенаправления Анкет Это позволяет нам выявлять те же функции на URL Terser, заменив /.netlify/functions с /api .

От : /. netLify/functions/hello К : <сайт>/api/hello

Для этого добавьте следующую информацию к своему netLify.toml конфигурация и перезапустите NetLify Dev:

[[redirects]]
  from = '/api/*'
  to = '/.netlify/functions/:splat'
  status = 200

Это направит весь трафик в /api/* Внутренне к соответствующему каталогу функций, и подстановочный знак захватит всю дополнительную информацию о пути и перейдет к : splat Анкет Установив Http code = 200 , NetLify будет преобразовать «переписать» (в отличие от «перенаправления»), который изменит ответ сервера без изменения URL -адреса в адресной строке браузера.

Итак, давайте попробуем еще раз с нашим новым URL:

http://localhost:8888/api/hello?name= Бет

👏 Потрясающе, вы только что создали функцию! (Вы следите за живым, верно?)

Вытащить CRUD и отправка данных

Теперь, когда мы можем создавать функции, давайте создадим наш собственный API с некоторыми основными функциями CRUD (создавать, читать, обновить и удалять) для простого приложения Todos.

Одним из центральных арендаторов без серверных вычислений является то, что он также не имеет состояния. Если вам нужно хранить какое -либо состояние в разных вызовах функций, его следует сохранять для другого, слоя, как база данных. Для этой статьи давайте использовать бесплатный уровень DynamoDB, но не стесняйтесь BYODB (принесите свой собственный DB), особенно если у него есть узловой SDK.

На следующих шагах мы:

Настройка таблицы на DynamoDB в AWS
Установите пакеты NPM в наш проект
Секретные клавиши настройки в AWS и добавьте к нашей среде переменные среды
Инициализировать пакет AWS-SDK для Nodejs
А затем, наконец, добавьте маршрут функции NetLify, чтобы создать запись в нашей базе данных

AWS – Amazon Web Services

Это руководство примет некоторую степень знакомства с AWS & DynamoDB, но если вы новичок в DynamoDB, вы можете начать с этого руководства по Начало работы с node.js и Dynamodb Анкет

На AWS, Создайте таблицу с именем NetLifyTodos и ключ раздела строкости называется ключ Анкет

NPM – диспетчер пакетов узлов

Теперь давайте настроем NPM и установим AWS-SDK , наноидаль & dotenv Анкет

В терминале в корне вашего проекта запустите следующие команды:

npm init -y
npm install aws-sdk nanoid dotenv --save

Env – переменные среды

Вам нужно предоставить Ключ доступа/секрет для пользователя IAM что мы будем использовать для аутентификации наших вызовов API. Одним из преимуществ работы этих вызовов на сервере является то, что вы можете защитить секрет заявки через переменные среды, вместо того, чтобы отправлять их клиенту, что не рекомендуется.

Есть довольно много способов войти в AWS на вашей местной машине, но просто чтобы сохранить все внутри нашего проекта, давайте создадим .env файл в корне нашего проекта и заполните следующие ключи своими собственными значениями:

# .env
MY_AWS_ACCESS_KEY_ID=***
MY_AWS_SECRET_ACCESS_KEY=***
MY_AWS_REGION=us-east-1

Примечание : Один маленький Gotcha здесь – это более распространенное Aws_access_key_id является зарезервированным ключевым словом среды, используемом процессом NetLify. Поэтому, если мы хотим передать переменные ENV, нам придется использовать наш собственный ключ, в данном случае, префиксированный My_ Анкет

После их добавления в процесс мы можем разрушить их и использовать при настройке нашего SDK AWS. Нам нужно настроить AWS для каждой функции CRUD, поэтому давайте собираем всю эту логику в отдельном файле с именем Dyno-client.js Анкет

// dyno-client.js
require('dotenv').config()
const { MY_AWS_ACCESS_KEY_ID, MY_AWS_SECRET_ACCESS_KEY, MY_AWS_REGION } = process.env

Требуется следующее.

SDK – комплект разработчика программного обеспечения

Использование AWS-SDK значительно облегчает подключение к DynamoDB из нашей кодовой базы. Мы можем создать экземпляр клиента Dynamo, который мы будем использовать для оставшихся примеров:

// dyno-client.js
const AWS = require("aws-sdk");

AWS.config.update({
    credentials: {
        accessKeyId: MY_AWS_ACCESS_KEY_ID,
        secretAccessKey: MY_AWS_SECRET_ACCESS_KEY
    },
    region: MY_AWS_REGION,
});

const dynamoDb = new AWS.DynamoDB.DocumentClient();

Чтобы сделать это доступным для всех наших функций, добавьте экземпляр DynamoDB в свой экспорт, и мы возьмем его, когда нам это нужно:

module.exports = { dynamoDb, TABLE_NAME }

Создайте Todo (с учетом EOD 😂)

⚡ Мы наконец готовы создать нашу функцию API!

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

// functions/create.js
const { nanoid } = require("nanoid");
const { dynamoDb } = require("../dyno-client")

exports.handler = async(event, context) => {
    try {
        // parse form data
        const body = JSON.parse(event.body);

        // create item to insert
        const params = {
            TableName: TABLE_NAME,
            Item: {
                key: nanoid(7),
                text: body.text,
                createDate: new Date().toISOString(),
            },
        };

        let result = await dynamoDb.put(params).promise();

        // return success
        return {
            statusCode: 200,
            body: JSON.stringify({
                success: true,
                data: result,
            }),
        };

    } catch (error) {
        return {
            statusCode: error.statusCode || 500,
            body: JSON.stringify(error),
        };
    }

};

Это должно дать вам суть о том, как разоблачить ваши маршруты API и логику для выполнения различных операций. Я буду отдержать больше примеров, потому что большая часть кода здесь на самом деле просто специфична для DynamoDB, и мы сохраним это для отдельной статьи. Но вынос в том, что мы можем вернуть что -то значимое с очень минимальной сантехникой. И в этом все!

С функциями, ты Только Придется написать свою собственную бизнес -логику!

Отладка – для беспрепятственных петли обратной связи

Есть два критических инструмента отладки в коде Visual Studio, которые я люблю использовать при работе с Node и API -маршрутами.

Отладчик сценария и
Плагин для клиента REST

✨ Вы знали , вместо настройки пользовательского запуск.json Файл, вы можете запустить и прикрепить отладчиков непосредственно к сценариям NPM в Package.json файл:

И пока инструменты, такие как Почтальон являются ценной частью комплексного тестового набора, вы можете добавить Расширение клиента REST Вызывать команды API непосредственно в коде VS. Мы можем легко использовать браузер, чтобы издеваться над конечными точками, но это действительно позволяет легко вызывать другие глаголы HTTP и публиковать данные обратной формы.

Просто добавьте файл, подобный test.http к вашему проекту. REST CLIENT Поддерживает расширение переменной среды и пользовательские переменные. Если вы загрязняете несколько вызовов, вы можете разделить несколько разных вызовов, разграничивая ### Анкет

Добавьте следующее в примере файла:

@baseUrl = http://localhost:8888

// create todo item
POST {{baseUrl}}/api/create
content-type: application/json

{
    "text": "Feed the cats",
}

Теперь мы можем запустить вышеперечисленное, нажав «Запрос отправить». Это должно нажать наш сервер netlify dev и позволить нам пройти через нашу логику функции локально!

Издательский

Публикация в NetLify также легко. Убедитесь, что ваш проект предался, и поднялся на репозиторий GIT на GitHub, Gitlab или Bitbucket.

Войти в NetLify и нажмите на опцию, чтобы создать «новый сайт из GIT» и выберите свой репо.

NetLify будет предпринять для Команда сборки и а Публикуйте каталог Анкет Хотите верьте, хотите нет, но у нас еще нет ни одной из этих вещей, и, вероятно, это проект для другого дня, чтобы настроить нашу фронт. Эти команды относятся к статическому строительству сайта, часть развертывания. Все, что нам нужно для создания без серверных функций, находится внутри нашего каталога функций и нашего netLify.toml конфигурация

Как только мы развертываем сайт, последнее, что нам нужно сделать, это добавить переменные среды в NetLify в рамках Build> Environment

Следующие шаги – это только начало

Надеемся, что некоторые идеи раскручиваются относительно того, как вы можете использовать эти технологии на своих собственных сайтах и проектах. Основное внимание в этой статье уделяется созданию и отладке функций NetLify, но важное упражнение для читателя – воспользоваться этим на вашей передней части.

Совет : Если вы хотите добавить приложение Create React в свой текущий каталог (без создания новой папки), добавьте Анкет При разборе нового приложения, как это:

create-react-app .

Попробуйте – построите переднюю часть, и дайте мне знать, как это идет на Kylemitbtv !

Для получения дополнительного контекста вы можете просмотреть полный исходный код для статьи о Github At Kylemit/ NetLify-Functions-Demo Анкет

Для еще более практических примеров с фактическим кодом, также просмотрите следующие ресурсы!

Удачи, и иди построить вещи!

This Dot Labs – современная веб -консалтинговая деятельность, направленная на то, чтобы помочь компаниям реализовать свои усилия по трансформации цифровых технологий. Для экспертного архитектурного руководства, обучения или консультации в React, Angular, Vue, веб -компонентах, GraphQL, узле, базеле или полимере, посещение thisdotlabs.com .

Этот Dot Media сосредоточен на создании инклюзивной и образовательной сети для всех. Мы поддерживаем вас в курсе достижений в современной сети посредством событий, подкастов и бесплатного контента. Учиться, посетить thisdot.co .

Оригинал: “https://dev.to/thisdotmedia/build-your-backend-with-netlify-functions-in-20-minutes-2gc4”