Создайте сервис сокращения URL с помощью Neon и безсерверных функций Azure

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

Тем не менее, давайте попробуем эту новую интеграцию, создав API для сокращения URL с помощью Неон, безсерверных технологий Azure и Node.js.

Примечание: У вас должен быть доступ к терминалу, редактору, такому как VS Code, и установленной версии Node v22 или новее.

Настройка инфраструктуры

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

Шаг 1. Откройте веб-портал Azure. Если у вас его еще нет, вам нужно будет создать учетную запись Microsoft.

Шаг 2. Вам также нужно будет создать подписку, если у вас ее еще нет, что вы можете сделать в Azure.

Шаг 3. Теперь мы можем создать группу ресурсов для хранения нашей безсерверной функции и базы данных. Перейдите на страницу создания новой группы ресурсов Azureи заполните форму следующим образом:

• Это страница создания группы ресурсов Azure с установленным именем группы ресурсов “AzureNeonURLShortener” и местоположением “Западный США 3”.
• В общем, используйте местоположение, ближайшее к вам и вашим пользователям, так как местоположение будет определять стандартное размещение безсерверных функций и области с наименьшей задержкой. Это не критично в этом примере, но вы можете просмотреть выпадающий список, если хотите использовать другое. Однако имейте в виду, что у Neon еще нет местоположений во всех этих регионах, что означает, что вам придется разместить свою базу данных в регионе, более удаленном от вашей безсерверной функции.

Шаг 4. Нажмите “Просмотреть и создать” внизу, чтобы перейти на страницу обзора конфигурации. Затем снова нажмите “Создать”.

Шаг 5. Теперь мы можем создать безсерверную функцию. К сожалению, это включает еще одну форму. Перейдите на страницу создания безсерверного приложения Azure Flex и заполните форму. Используйте ранее созданную группу ресурсов, выберите уникальное имя для безсерверной функции, разместите функцию в регионе вашей группы ресурсов и используйте Node v20.

Шаг 6. Название, которое вы выберете для вашего серверного приложения, будет поддоменом, который Azure предоставит вам для доступа к вашему API, так что выбирайте мудро. После того как вы заполните все данные, нажмите “Просмотреть и создать”, а затем “Создать”. Azure должен перенаправить вас на страницу нового приложения. Теперь мы можем настроить Neon. Откройте новую страницу ресурсов Neon на портале Azure и, как вы догадались, заполните форму.

Как создать базу данных Neon на Azure

Шаг 1. Создайте новую страницу ресурсов Neon с “AzureURLNeonShortener” в качестве группы ресурсов, “URLShortenerDB” в качестве имени ресурса и “West US 3” в качестве местоположения. Если выбранная вами область недоступна, выберите следующий наиболее близкий регион. После завершения заполнения всех данных нажмите “Просмотр и создание” и затем “Создать”, как вы делали для предыдущих ресурсов.

Шаг 2. Возможно, вам придется немного подождать, пока база данных Neon инициализируется. После этого откройте страницу конфигурации и нажмите “Перейти к Neon.”

Шаг 3. Вас перенаправит на страницу входа. Разрешите Neon доступ к вашей информации Azure, после чего вы окажетесь на странице создания проекта. Заполните форму ниже:

Имя проекта и базы данных не имеют значения, но убедитесь, что база данных расположена в Azure West US 3 (или в любом другом регионе, который вы выбрали). Это предотвратит запросы к базе данных покидание центра обработки данных, уменьшая задержки.

Шаг 4. Нажмите “Создать” внизу страницы, оставив конфигурацию автомасштабирования по умолчанию. Сейчас вас должно перенаправить на страницу базы данных Neon. На этой странице находится наша строка подключения, которая нам понадобится для подключения к базе данных из нашего кода. Нажмите “Копировать фрагмент”, чтобы скопировать строку подключения.

Убедитесь, что не потеряли это, так как нам это понадобится позже, но сейчас нам нужно создать структуру нашей базы данных.

Шаг 5. Нажмите “SQL-редактор” в боковой навигации и вставьте следующий SQL:

CREATE TABLE IF NOT EXISTS urls(id char(12) PRIMARY KEY, url TEXT NOT NULL);

Затем нажмите “Запустить”. Это создаст таблицу, которую мы будем использовать для хранения URL-адресов. Таблица довольно проста: Первичный ключ ID – это 12-символьная случайная строка, которую мы будем использовать для ссылки на URL-адреса, и URL-адрес – это строка переменной длины, которая будет хранить сам URL-адрес.

Шаг 6. Если вы посмотрите на вид таблицы в боковой навигации, вы увидите таблицу “urls”. Наконец, нам нужно получить нашу строку подключения. Нажмите на “Панель инструментов” в боковой навигации, найдите строку подключения и нажмите “Копировать фрагмент”.

Теперь мы можем начать писать код.

Создание API

Шаг 1. Сначала нам нужно установить серверный CLI Azure, который поможет нам создать проект и в конечном итоге протестировать/опубликовать его. Откройте терминал и выполните:

npm install -g azure-functions-core-tools --unsafe-perm true

Шаг 2. Если вы хотите использовать другие менеджеры пакетов, такие как Yarn или pnpm, просто замените npm на предпочтительный вами менеджер пакетов. Теперь мы можем приступить к нашему реальному проекту. Откройте папку, в которой хотите разместить проект, и выполните следующие три команды:

func init --javascript

func new --name submit --template "HTTP trigger"

func new --name url --template "HTTP trigger"

npm install nanoid @neondatabase/serverless

Теперь вы должны увидеть новый проект Azure в этой папке. Первая команда создает проект, две следующие команды создают наши безсерверные API-маршруты, а последняя команда устанавливает драйвер безсерверного Neon для взаимодействия с нашей базой данных и Nano ID для генерации идентификаторов. Мы могли бы использовать стандартный драйвер Postgres вместо драйвера Neon, но драйвер Neon использует безсостоятельные HTTP-запросы для снижения задержки при одноразовых запросах. Поскольку мы запускаем функцию без сервера, которая может обрабатывать только один запрос и отправлять только один запрос, важна задержка однократного запроса.

Вы захотите сосредоточиться на коде в папке src/functions, так как там находятся наши маршруты. Вы должны увидеть там два файла: submit.js и redirect.js.

submit.js

submit.js будет хранить код, который мы используем для отправки URL-адресов. Сначала откройте submit.js и замените его код на следующий:

import { app } from "@azure/functions";

import { neon } from "@neondatabase/serverless";

import { nanoid } from "nanoid";

​

const sql = neon("[YOUR_POSTGRES_CONNECTION_STRING]");

app.http("submit", {

  methods: ["GET"],

  authLevel: "anonymous",

  route: "submit",

  handler: async (request, context) => {

    if (!request.query.get("url"))

      return {

        body: "No url provided",

        status: 400,

      };

    if (!URL.canParse(request.query.get("url")))

      return {

        body: "Error parsing url",

        status: 400,

      };

    const id = nanoid(12);

    await sql`INSERT INTO urls(id,url) VALUES (${id},${request.query.get(

      "url"

    )})`;

    return new Response(`Shortened url created with id ${id}`);

  },

});

Давайте разберем это по шагам. Сначала мы импортируем API-функций Azure, безсерверный драйвер Neon и Nano ID. Здесь мы используем ESM (ES Modules) вместо CommonJS. Нам понадобится внести несколько изменений позже, чтобы поддерживать это.

Затем мы создаем подключение к нашей базе данных. Замените [YOUR_POSTGRES_CONNECTION_STRING] на строку, скопированную из панели управления Neon. В целях безопасности вы, вероятно, захотите использовать службу, такую как Azure Key Vault, для управления вашими ключами в производственной среде, но пока просто помещение их в скрипт будет достаточно.

Теперь мы находимся на актуальном маршруте. Первые несколько свойств определяют, когда должен быть запущен наш обработчик маршрута: мы хотим, чтобы этот маршрут был запущен при GET-запросе к submit.

Наш обработчик довольно прост. Сначала мы проверяем, был ли передан URL через параметр запроса URL (например, /submit?url=https://google.com), затем мы проверяем, является ли он допустимым URL с помощью нового API URL.canParse. Затем мы генерируем ID с помощью Nano ID. Поскольку наши идентификаторы составляют 12 символов, мы должны передать 12 в генератор Nano ID. Наконец, мы вставляем новую строку с новым ID и URL в нашу базу данных. Драйвер Neon serverless автоматически параметризует запросы, поэтому нам не нужно беспокоиться о том, что злоумышленники передают операторы SQL в URL.

redirect.js

redirect.js – это место, где происходят наши фактические перенаправления URL. Замените его код на следующий:

import { app } from "@azure/functions";

import { neon } from "@neondatabase/serverless";

​

const sql = neon("[YOUR_POSTGRES_CONNECTION_STRING]");

app.http("redirect", {

  methods: ["GET"],

  authLevel: "anonymous",

  route: "{id:length(12)}",

  handler: async (request, context) => {

    const url =

      await sql`SELECT * FROM urls WHERE urls.id=${request.params.id}`;

    if (!url[0]) return new Response("No redirect found", { status: 404 });

    return Response.redirect(url[0].url, 308);

  },

});

Первый раздел скрипта такой же, как в submit.js. Ещё раз замените \[YOUR\_POSTGRES\_CONNECTION\_STRING\] на строку, скопированную из панели инструментов Neon.

Маршрут – это место, где все становится более интересным. Нам нужно принимать любой путь, который может быть идентификатором перенаправления, поэтому мы используем параметр с ограничением в 12 символов. Обратите внимание, что это может пересекаться, если у вас когда-нибудь будет другой маршрут из 12 символов. В этом случае вы можете переименовать маршрут перенаправления, чтобы начать с Z или другого алфавитно-цифрового символа, чтобы Azure serverless загружал маршрут перенаправления позже.

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

Файлы конфигурации

Есть еще два изменения, которые нам нужно сделать. Во-первых, мы не хотим префикс /api во всех наших функциях. Чтобы удалить его, откройте host.json, который должен находиться в вашем проектном каталоге, и добавьте следующее:

"extensions": {

    "http": {

      "routePrefix": ""

    }

  }

Это позволяет вашим маршрутам работать без каких-либо префиксов. Единственное, что нам осталось сделать, – это переключить проект на ES-модули. Откройте package.json и вставьте следующее в конце файла:

"type": "module"

Вот и все!

Тестирование и развертывание

Теперь вы можете попробовать протестировать локально, запустив func start. Вы можете перейти на http://localhost:7071/submit?url=https://example.com, затем используйте полученный идентификатор и перейдите по адресу http://localhost:7071/[ВАШ_ID]. Вас должно перенаправить на example.com.

Конечно, мы не можем просто запустить это локально. Чтобы развернуть, нам нужно установить Azure CLI, что можно сделать с помощью одной из следующих команд, в зависимости от вашей операционной системы:

macOS (Homebrew)

brew install azure-cli

Windows (WPM)

winget install -e --id Microsoft.AzureCLI

Linux

curl -L <https://aka.ms/InstallAzureCli> | bash

Теперь перезапустите терминал, выполните вход, запустив az login, и выполните следующее в каталоге проекта:

func azure functionapp publish [FunctionAppName]

Замените [FunctionAppName] на то, как вы назвали свою функцию ранее.

Теперь вы должны иметь доступ к вашему API по адресу [FunctionAppName].azurewebsites.net.

Заключение

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