Quickstarters
Как создать бэкенд для Astro?

21min
Введение
В этом руководстве о как построить бэкенд для astro, вы узнаете, как создать полный бэкенд с использованием Back4App для вашего проекта Astro. 
Мы рассмотрим интеграцию важных функций Back4App, включая управление базами данных, облачные функции, аутентификацию, хранение файлов, запросы в реальном времени и многое другое — демонстрируя практический подход к созданию быстрых приложений с современными инструментами.
Используя среду Back4App, вы избегаете многих трудоемких задач, таких как настройка серверов или написание слоев безопасности с нуля. 
Эта настройка экономит ваше время и усилия, позволяя при этом определить конечную точку для надежной серверной логики. 
Вы также увидите, как включить переменные окружения в ваш проект astro, что упростит безопасное хранение учетных данных или других конфиденциальных данных.
После завершения у вас будет масштабируемая структура бэкенда для Astro, и вы будете знать, как обрабатывать данные с помощью REST, GraphQL, аутентификации пользователей, событий в реальном времени и многого другого. 
Вы будете готовы добавить свою собственную логику для любых реальных нужд, сохраняя при этом надежную основу безопасности.
Предварительные требования
Аккаунт Back4App и новый проект Back4App
Начало работы с Back4app.﻿
Проект Astro
Настройка Astro - Убедитесь, что у вас есть базовая среда разработки Astro и установлен Node.js.
Установленный Node.js (версия 14 или выше)
Установка Node.js﻿
Знание концепций фронтенда и серверной стороны
Вы должны знать, как создавать или редактировать .astro файлы, обрабатывать переменные окружения и выполнять простой POST-запрос с помощью fetch или аналогичной библиотеки.
Убедитесь, что эти предварительные условия выполнены перед началом. Наличие вашего аккаунта Back4App, среды Astro и базовых знаний JavaScript поможет вам более плавно следовать этому руководству.
Шаг 1 – Создание нового проекта на Back4App и подключение
Создать новый проект:
Войдите в свою учетную запись Back4App.
Нажмите Новый приложение в вашей панели управления Back4App и дайте ему имя (например, “Astro-Backend-Tutorial”).
Получите учетные данные Back4App:
В вашей панели управления Back4App, в разделе Настройки приложения или Безопасность и ключи, запишите ваш ID приложения, Ключ REST API, и URL сервера (https://parseapi.back4app.com по умолчанию). Эти переменные окружения будут использоваться в вашей интеграции с Astro.
Подключение Astro к Back4App через API:
Поскольку мы не используем Parse SDK напрямую, мы будем делать запросы, используя fetch или другую библиотеку из наших файлов Astro. Храните свои учетные данные в переменных окружения для безопасности. Например, в файле .env :
Шаг 2 – Настройка базы данных
Создание модели данных
Создайте модель данных вручную:
Перейдите на панель управления Back4App и нажмите на База данных.
Создайте новый класс (например, “Todo”), и добавьте поля, такие как title (String) и isCompleted (Boolean).
Используйте AI-агента для создания модели данных:
Откройте AI-агента из панели управления вашего приложения.
Опишите вашу схему простым языком (например, “Создайте новое приложение ToDo с классом, который имеет поля title и isCompleted.”).
Агент сгенерирует класс и поля для вас.
Чтение и запись данных с использованием REST API
С вашим моделью данных готова, давайте определим конечную точку внутри компонента Astro или серверного файла для обработки POST-запроса и запроса на чтение. Например, вы можете создать файл как src/pages/api/todos.astro:
Text
---
import type { APIRoute } from 'astro';

export const post: APIRoute = async ({ request }) => {
  const body = await request.json();

  // "create" a Todo
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: body.title,
      isCompleted: body.isCompleted
    })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};

export const get: APIRoute = async () => {
  // "read" all Todos
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY
    }
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};
---

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content="astro.generator" />
    <title>Todos API</title>
  </head>
  <body>
    <h1>API for Todo</h1>
  </body>
</html>
---
import type { APIRoute } from 'astro';

export const post: APIRoute = async ({ request }) => {
  const body = await request.json();

  // "create" a Todo
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: body.title,
      isCompleted: body.isCompleted
    })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};

export const get: APIRoute = async () => {
  // "read" all Todos
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY
    }
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};
---

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content="astro.generator" />
    <title>Todos API</title>
  </head>
  <body>
    <h1>API for Todo</h1>
  </body>
</html>
﻿
Этот пример использует переменные окружения (import.meta.env.*) для хранения ваших учетных данных Back4App. Мы определяем два метода в одном файле: export const post для создания Todo и export const get для получения всех Todos. Вы можете адаптировать это под структуру вашего компонента макета и другие страницы сайта.
Чтение и запись данных с использованием GraphQL API
Аналогично, вы можете выполнять запросы GraphQL с ваших страниц Astro:
Text
---
export async function post({ request }) {
  const body = await request.json();
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/graphql`;

  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${body.title}"
          isCompleted: ${body.isCompleted}
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Todos GraphQL</title>
  </head>
  <body>
    <h1>GraphQL Endpoint for Todos</h1>
  </body>
</html>
---
export async function post({ request }) {
  const body = await request.json();
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/graphql`;

  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${body.title}"
          isCompleted: ${body.isCompleted}
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Todos GraphQL</title>
  </head>
  <body>
    <h1>GraphQL Endpoint for Todos</h1>
  </body>
</html>
﻿
Работа с живыми запросами (необязательно)
Живые запросы позволяют получать обновления ваших данных в реальном времени. Чтобы использовать их, включите живые запросы в панели управления Back4App и настройте соединение WebSocket. Однако, если вы создаете статический сайт на Astro, вы можете интегрировать обновления в реальном времени через клиентские скрипты, указывающие на wss://YOUR_SUBDOMAIN.b4a.io. Живые запросы могут отправлять изменения вашим подключенным клиентам всякий раз, когда записи создаются, обновляются или удаляются.
Шаг 3 – Применение безопасности с помощью ACL и CLP
ACL (Списки управления доступом) и CLP (Разрешения на уровне класса) являются основополагающими для контроля доступа к данным. Вы можете настроить их в разделе База данных вашей панели управления Back4App. Например:
Ограничить чтение/запись только для аутентифицированных пользователей
Используйте ACL для безопасности на уровне объектов
Используйте Руководство по безопасности Back4App для обеспечения защиты ваших данных. Вы также можете установить эти правила из панели управления, гарантируя, что даже если ваши REST-вызовы открыты, только правильные учетные данные могут изменять или просматривать данные.
Шаг 4 – Написание функций облачного кода
Почему облачный код: Вы можете перенести ключевую бизнес-логику на серверную сторону, избегая раскрытия секретов или необходимости поддерживать отдельные серверы. Облачный код может слушать триггеры (beforeSave, afterSave) или обрабатывать пользовательские конечные точки.
Пример
JS
// main.js (Cloud Code)
Parse.Cloud.define('greetUser', async (request) => {
  const userName = request.params.name || 'Guest';
  return `Hello, ${userName}! Welcome to the Astro project.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js (Cloud Code)
Parse.Cloud.define('greetUser', async (request) => {
  const userName = request.params.name || 'Guest';
  return `Hello, ${userName}! Welcome to the Astro project.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
Разверните это через Back4App CLI или непосредственно в разделе Облачный код вашей панели управления Back4App.
Вызов функции
Из Astro вы можете определить конечную точку, которая использует fetch для вызова вашей облачной функции:
Text
---
export async function post({ request }) {
  const body = await request.json();

  const url = `${import.meta.env.BACK4APP_SERVER_URL}/functions/greetUser`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: body.name })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Cloud Code Greet</title>
  </head>
  <body>
    <h1>Greet Function Endpoint</h1>
  </body>
</html>
---
export async function post({ request }) {
  const body = await request.json();

  const url = `${import.meta.env.BACK4APP_SERVER_URL}/functions/greetUser`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: body.name })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Cloud Code Greet</title>
  </head>
  <body>
    <h1>Greet Function Endpoint</h1>
  </body>
</html>
﻿
Шаг 5 – Настройка аутентификации
Back4App использует класс _User для управления учетными записями пользователей. С помощью REST вы можете управлять регистрацией, входом или выходом. Например, регистрация нового пользователя:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: application/json" \
  -d '{"username":"user1","password":"secret123","email":"[email protected]"}' \
  https://parseapi.back4app.com/users
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: application/json" \
  -d '{"username":"user1","password":"secret123","email":"user1@example.com"}' \
  https://parseapi.back4app.com/users
﻿
Вы можете воспроизвести эту логику из Astro с помощью fetch аналогичным образом, используя переменные окружения. После входа в систему пользователь получает токен сессии для последующих запросов.
Социальный вход
Для социальных провайдеров (таких как Google или Apple) используйте специальные конечные точки или настройте OAuth поток. Обратитесь к Документации по входу с Apple или другим руководствам по социальному входу, чтобы интегрировать расширенную аутентификацию. Это особенно полезно, если вы хотите позволить людям входить в вашу астро-проект с минимальными трудностями.
Шаг 6 – Обработка хранения файлов
Чтобы хранить файлы в Back4App, вы отправляете их с помощью REST API. Например:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/local/image.png" \
  https://parseapi.back4app.com/files/myImage.png
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/local/image.png" \
  https://parseapi.back4app.com/files/myImage.png
﻿
Ответ содержит URL файла. Вы можете связать этот URL с записью, например, с объектом класса Photo , чтобы отслеживать ссылки на файл в вашей базе данных. Вы также можете контролировать, кто может загружать файлы, изменяя настройки безопасности файлов в конфигурации вашего приложения.
Шаг 7 – Подтверждение электронной почты и сброс пароля
Включить подтверждение электронной почты: В разделе Настройки приложения на панели управления Back4App включите подтверждение электронной почты и настройте шаблон письма для подтверждения.
Настроить сброс пароля: Аналогично, настройте ваши письма для сброса пароля и убедитесь, что у класса _User есть действительные адреса электронной почты.
Процесс: Когда пользователь запрашивает сброс из вашего проекта astro (через вызов API), Back4App автоматически отправляет электронное письмо с безопасной ссылкой для изменения пароля.
Шаг 8 – Планирование задач с помощью облачных заданий
Используйте Облачные задания для планирования повторяющегося обслуживания или других задач:
JS
// main.js
Parse.Cloud.job('cleanupOldTodos', async () => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  query.lessThan('createdAt', new Date(now - THIRTY_DAYS));

  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
// main.js
Parse.Cloud.job('cleanupOldTodos', async () => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  query.lessThan('createdAt', new Date(now - THIRTY_DAYS));

  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
﻿
Разверните ваш код, затем запланируйте задачу из Настройки сервера > Фоновые задачи в консоли Back4App. Это автоматизирует задачи, такие как очистка данных, отправка электронных писем или любая рутинная функция, которую вы хотите выполнять через определенные интервалы.
Шаг 9 – Интеграция вебхуков
Вебхуки позволяют вам уведомлять внешние сервисы, когда в вашем приложении Back4App происходят определенные события. Например, вы можете отправлять данные в Slack каждый раз, когда создается новая задача Todo:
Перейдите в Разное > Вебхуки в вашей панели управления Back4App.
Добавьте вебхук с указанием URL Slack.
Выберите событие (например, объект создан в классе Todo).
Это позволяет потоку запросов/ответов поддерживать синхронизацию ваших внешних систем с данными вашего приложения на основе Astro.
Шаг 10 – Изучение панели администратора Back4App
Приложение Back4App Admin App является удобной панелью управления для редактирования данных. Оно особенно полезно для не технических членов команды, которым нужен прямой доступ к вашей базе данных.
Включите приложение администратора в Дополнительно > Приложение администратора.
Создайте администратора для безопасного доступа.
Используйте эту панель для быстрого выполнения операций CRUD, проверки журналов или настройки более сложных параметров.
Заключение
Вы успешно создали безопасный и эффективный бэкенд для проекта Astro, используя Back4App. На протяжении этого руководства вы:
Определили и настроили схему базы данных
Использовали REST и GraphQL API для чтения и записи данных
Обеспечили безопасность данных с помощью ACL, CLP и аутентификации пользователей
Расширили логику через Cloud Code и запланированные задачи
Управляли хранением файлов для изображений или документов
Интегрировали Webhooks для внешних уведомлений
Изучили панель администратора для упрощенного управления данными
Этот подход подчеркивает, как построить надежный, масштабируемый и легкий в обслуживании бэкенд для Astro. Используя переменные окружения, вы сохраняете свои учетные данные в безопасности, обеспечивая при этом гибкость вашего кода для будущего роста.
Следующие шаги
Разверните ваш проект Astro на хостинг-платформах, которые поддерживают серверный рендеринг или среды на основе Node.
Добавьте расширенные функции, такие как контроль доступа на основе ролей или специализированные интеграции платежей, используя Cloud Code или внешние API.
Оптимизируйте производительность с помощью реализации стратегий кэширования и настройки параметров содержимого вашего окна просмотра для улучшения пользовательского опыта.
Просмотрите документацию Back4App чтобы узнать о журналах, аналитике и более продвинутых мерах безопасности.
Продолжайте исследовать функции реального времени с помощью Live Queries и создавайте по-настоящему динамичные, совместные приложения.
﻿
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Как создать бэкенд для Python?
Как создать бэкенд для Deno?