Быстрые стартеры
Как создать серверную часть для Gatsby?

36min
Введение
В этом учебном пособии вы узнаете как создать бэкенд для Gatsby с использованием Back4App. 
Мы покажем вам, как интегрировать функции Back4App — такие как управление базами данных, функции облачного кода, REST API и возможности GraphQL-запросов , аутентификацию пользователей и запросы в реальном времени (Live Queries) — чтобы создать безопасный, масштабируемый и надежный бэкенд, к которому можно получить доступ с вашего Gatsby сайта.
Вы также увидите, как быстрая настройка и интуитивно понятная среда Back4App могут значительно сократить время и усилия, необходимые для выполнения задач бэкенда. 
К концу вы точно узнаете как создать бэкенд для Gatsby , который хранит и извлекает данные, обрабатывает аутентификацию, интегрирует облачные функции и многое другое. 
Это позволит вам легко внедрять пользовательскую логику, добавлять сторонние API или расширять вашу модель данных, не беспокоясь о традиционном обслуживании серверов.
Что вы создадите и почему это ценно
Полная интеграция бэкенда: Вы создадите масштабируемую структуру бэкенда для вашего сайта Gatsby, включая Parse SDK, который идеально подходит для динамических потребностей данных.
Экономия времени: Back4App предоставляет инструменты, такие как AI Agent, запросы в реальном времени и облачные задания, которые ускоряют создание бэкенда.
Расширяемые навыки: После завершения вы сможете адаптировать эти концепции для более продвинутых функций Gatsby, таких как создание страниц во время сборки или подключение к безсерверным функциям для динамических операций.
Предварительные требования
Учетная запись Back4App и новый проект Back4App
Начало работы с Back4app.
Если у вас нет учетной записи, вы можете создать ее бесплатно. Следуйте приведенному выше руководству, чтобы подготовить ваш проект.
Базовая среда разработки Gatsby
Вы можете настроить это, установив Gatsby CLI и выполнив:
Установленный Node.js (версия 14 или выше)
Установка Node.js﻿
Знание JavaScript и концепций Gatsby
Официальная документация Gatsby.
Прочитайте документацию или учебник для начинающих, если вы новичок в Gatsby.
Убедитесь, что у вас есть эти требования. Это обеспечит плавный процесс, когда вы создаете новый файл для конфигурации или выполняете запросы GraphQL в вашей среде Gatsby.
Шаг 1 – Настройка проекта Back4App
Создание нового проекта
Первый шаг в создании бэкенда для Gatsby на Back4App – это создание нового проекта. Если вы еще этого не сделали:
Войдите в свою учетную запись Back4App.
Нажмите кнопку “Новое приложение” на вашей панели управления.
Дайте вашему приложению имя (например, “Gatsby-Backend-Tutorial”).
﻿
После создания проекта он появится на вашей панели управления Back4App. Мы будем использовать этот проект в качестве основы нашего бэкенда.
Подключите Parse SDK
Back4App использует платформу Parse для управления вашими данными, предоставления функций в реальном времени, обработки аутентификации пользователей и многого другого. Для Gatsby вы все равно можете npm install parse и затем интегрировать его в ваши исходные файлы:
Получите ваши ключи Parse:
На вашей панели управления Back4App найдите ваш Application ID и JavaScript Key, обычно в разделе “Настройки приложения” или “Безопасность и ключи.” Вы также найдете Parse Server URL (обычно что-то вроде https://parseapi.back4app.com).
﻿
Установите Parse SDK в вашем сайте Gatsby:
Bash
npm install parse
npm install parse
﻿
Создайте parseConfig.js в корневом каталоге вашего проекта Gatsby или в src/:
src/parseConfig.js
// src/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
Каждый раз, когда вы импортируете Parse из parseConfig.js в ваши файлы Gatsby (например, в gatsby-node.js, gatsby-browser.js, или страницы/компоненты), у вас будет предварительно настроенный экземпляр, готовый для выполнения запросов к вашему бэкенду Back4App.
Шаг 2 – Настройка базы данных
Создание модели данных
В Back4App данные управляются как “классы” (аналогично таблицам) с полями для ваших данных. Давайте создадим класс “Todo” для демонстрации. Мы покажем несколько способов, как вы можете сохранять и извлекать данные в Gatsby с помощью Parse.
Перейдите в раздел “База данных” в вашей панели управления Back4app.
Создайте новый класс (например, “Todo”) и добавьте столбцы, такие как заголовок (String) и isCompleted (Boolean).
Создать новый класс
﻿
Или вы можете позволить Parse автоматически создавать столбцы, когда объекты впервые сохраняются из вашего кода.
Создание модели данных с помощью AI-агента
Back4App предоставляет AI-агента, чтобы помочь определить вашу структуру данных.
Откройте AI-агента из вашей панели управления приложением или меню.
Опишите вашу модель данных (например, “Пожалуйста, создайте новую схему приложения Todo с заголовком и статусом завершения.”).
Позвольте AI-агенту сгенерировать схему для вас.
﻿
Чтение и запись данных с использованием SDK
Пример фрагмента в Gatsby может выглядеть так (например, на странице на основе React или в gatsby-browser.js):
JS
import Parse from '../parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);
  todo.set('isCompleted', isCompleted);

  try {
    const savedTodo = await todo.save();
    console.log('Todo saved successfully:', savedTodo);
    return savedTodo;
  } catch (error) {
    console.error('Error saving Todo:', error);
  }
}

async function fetchTodos() {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
import Parse from '../parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);
  todo.set('isCompleted', isCompleted);

  try {
    const savedTodo = await todo.save();
    console.log('Todo saved successfully:', savedTodo);
    return savedTodo;
  } catch (error) {
    console.error('Error saving Todo:', error);
  }
}

async function fetchTodos() {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
﻿
Чтение и запись данных с использованием REST API
В качестве альтернативы вы можете взаимодействовать с базой данных через REST API:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
﻿
Чтение и запись данных с использованием GraphQL API
Back4App также поддерживает GraphQL API, поэтому вы можете выполнять запросы или мутации, такие как:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
Это особенно удобно, если вы хотите, чтобы ваш сайт на Gatsby получал данные через запросы GraphQL во время сборки.
Работа с живыми запросами
Gatsby — это генератор статических сайтов, но вы все равно можете настроить динамические соединения в реальном времени с помощью Parse Живые запросы. Это может быть полезно в коде, выполняемом в браузере, или в ваших собственных безсерверных хуках.
Включите живые запросы в вашей панели управления Back4app (в разделе Настройки сервера).
Добавьте URL сервера живых запросов в parseConfig.js:
JS
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';
﻿
Подпишитесь на класс для уведомлений в реальном времени:
JS
async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    callback('delete', deletedTodo);
  });

  return subscription;
}
async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    callback('delete', deletedTodo);
  });

  return subscription;
}
﻿
Это будет отправлять обновления данных в реальном времени на фронтенд вашего проекта Gatsby.
Шаг 3 – Применение безопасности с помощью ACL и CLP
Что такое ACL и CLP?
ACL (Списки управления доступом) позволяют вам определять разрешения на отдельные объекты, в то время как CLP (Разрешения на уровне класса) применяются ко всем классам в вашей базе данных Back4App.
﻿
Настройка разрешений на уровне класса
Перейдите в База данных в вашей панели управления Back4App.
Выберите класс (например, Todo).
Нажмите на вкладку Разрешения на уровне класса.
Настройте, является ли класс общедоступным для чтения, требует ли аутентификации или ограничен для определенных ролей.
Использование ACL в коде
В вашем коде Gatsby вы можете определить ACL для каждого нового объекта:
JS
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);

  todo.setACL(acl);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error saving private todo:', err);
  }
}
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);

  todo.setACL(acl);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error saving private todo:', err);
  }
}
﻿
Шаг 4 – Написание функций облачного кода
Зачем облачный код?
С помощью облачного кода вы можете добавить пользовательскую серверную логику в ваш бэкенд Back4App. Это отлично подходит для бизнес-правил, REST API преобразований, триггеров или валидаций данных, которые вы хотите сохранить в безопасности и не показывать на стороне клиента.
Пример облачной функции
JS
// main.js
Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
// main.js
Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
﻿
Развертывание облачного кода
С помощью Back4App CLI: Установите и настройте CLI, затем выполните b4a deploy.
С помощью панели управления: Перейдите в Cloud Code > Functions на вашей панели управления, вставьте ваш код в main.js, и нажмите Deploy.
﻿
Вызов вашей функции
Из Gatsby/Parse SDK:
JS
import Parse from '../parseConfig';

async function getTextLength(text) {
  try {
    const result = await Parse.Cloud.run('calculateTextLength', { text });
    console.log('Text length:', result.length);
  } catch (err) {
    console.error('Error calling cloud function:', err);
  }
}
import Parse from '../parseConfig';

async function getTextLength(text) {
  try {
    const result = await Parse.Cloud.run('calculateTextLength', { text });
    console.log('Text length:', result.length);
  } catch (err) {
    console.error('Error calling cloud function:', err);
  }
}
﻿
Шаг 5 – Настройка аутентификации
Класс пользователя Parse
Back4App использует класс Parse.User для аутентификации. По умолчанию он обрабатывает хеширование паролей, сессии и безопасное хранение.
Регистрация и вход в Gatsby
JS
import Parse from '../parseConfig';

// SignUp
async function signUpUser(username, password, email) {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User signed up successfully!');
  } catch (error) {
    console.error('Error signing up user:', error);
  }
}

// Login
async function logInUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user);
  } catch (error) {
    console.error('Error logging in user:', error);
  }
}
import Parse from '../parseConfig';

// SignUp
async function signUpUser(username, password, email) {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User signed up successfully!');
  } catch (error) {
    console.error('Error signing up user:', error);
  }
}

// Login
async function logInUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user);
  } catch (error) {
    console.error('Error logging in user:', error);
  }
}
﻿
После входа в систему вы можете вызвать Parse.User.current() чтобы проверить, вошел ли пользователь в систему.
Социальный вход
Вы можете интегрировать Google, Facebook, Apple, и других провайдеров с дополнительными настройками. Узнайте больше в документации по социальному входу.﻿
Шаг 6 – Обработка хранения файлов
Загрузка файлов
Используйте Parse.File для загрузки изображений или других файлов. Например, в компоненте Gatsby:
JS
async function uploadImage(file) {
  const name = file.name;
  const parseFile = new Parse.File(name, file);

  try {
    const savedFile = await parseFile.save();
    console.log('File saved:', savedFile.url());
    return savedFile.url();
  } catch (err) {
    console.error('Error uploading file:', err);
  }
}
async function uploadImage(file) {
  const name = file.name;
  const parseFile = new Parse.File(name, file);

  try {
    const savedFile = await parseFile.save();
    console.log('File saved:', savedFile.url());
    return savedFile.url();
  } catch (err) {
    console.error('Error uploading file:', err);
  }
}
﻿
Затем вы можете прикрепить этот файл к объекту Parse, сохранить его и позже получить URL файла для отображения на вашем сайте Gatsby.
Шаг 7 – Подтверждение электронной почты и сброс пароля
Почему это важно
Подтверждение электронной почты подтверждает адрес электронной почты пользователя, а процессы сброса пароля улучшают пользовательский опыт. Оба легко настраиваются в Back4App.
Перейдите в настройки электронной почты вашего приложения в панели управления.
Включите подтверждение электронной почты и настройте шаблон электронной почты для сброса пароля.
Используйте методы SDK Parse (например, Parse.User.requestPasswordReset(email)) для отправки писем для сброса пароля.
Шаг 8 – Планирование задач с помощью облачных заданий
Обзор облачных заданий
Используйте Облачные задания для автоматизации повторяющихся задач, таких как удаление устаревших данных или отправка ежедневных сводок. Например:
JS
// main.js
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
// main.js
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
﻿
Затем запланируйте это в разделе Настройки приложения > Настройки сервера > Фоновая работа.
Запланировать облачную задачу
﻿
Шаг 9 – Интеграция вебхуков
Вебхуки позволяют вашему приложению Back4App отправлять HTTP-запросы во внешние сервисы, когда происходят определенные события — например, создание новой записи.
Перейдите в вашу панель управления Back4App > Дополнительно > Вебхуки.
Добавьте новый вебхук, указав URL-адрес конечной точки для внешнего сервиса.
Выберите то, что вызывает вебхук (например, afterSave в классе Todo).
Добавление вебхука
﻿
Вы также можете интегрироваться со Slack или платежными системами, добавив соответствующую конечную точку.
Шаг 10 – Изучение панели администратора Back4App
Admin App Admin App — это интерфейс, ориентированный на модели, для управления данными. Вы можете предоставить нетехническим пользователям безопасный доступ для выполнения операций CRUD с вашими классами.
Включение Admin App
Перейдите в App Dashboard > More > Admin App и нажмите “Включить Admin App.”
Включить Admin App
﻿
Затем создайте пользователя Admin и выберите поддомен для интерфейса администратора.
﻿
Теперь вы можете войти в свой Admin App, чтобы просматривать и изменять данные без написания кода.
﻿
Заключение
В этом учебном пособии вы узнали как создать бэкенд для Gatsby с использованием Back4App. Вы научились:
Настроить безопасную базу данных с классами, пользовательскими полями и отношениями.
Использовать Parse SDK, вместе с REST API и GraphQL запросами для транзакций данных.
Настроить ACL и CLP для безопасности данных.
Написать и развернуть Cloud Code для расширения бизнес-логики и триггеров.
Управлять аутентификацией пользователей с регистрацией, входом, сбросом пароля и подтверждением электронной почты.
Обрабатывать хранение файлов для изображений и документов.
Запланировать автоматизированные задачи с помощью Cloud Jobs.
Интегрировать внешние сервисы через Webhooks.
Использовать Admin App для простого администрирования данных.
С этими навыками ваш сайт на Gatsby может использовать мощные динамические функции, при этом пользуясь статической отрисовкой Gatsby. Отсюда вы можете:
Расширить вашу модель данных и добавить сложную бизнес-логику.
Интегрировать больше внешних API для действительно комплексной платформы.
Следовать официальной документации Back4App для более глубокого изучения безопасности, производительности и аналитики.
Экспериментировать с функциями времени сборки Gatsby—например, “создавать страницы” из динамических данных или настроить плагин “gatsby source” для вашего бэкенда Back4App.
Теперь у вас есть прочная основа для создания будущих, ориентированных на данные приложений с помощью Gatsby и Back4App.
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Как создать бэкэнд для Flutter?
Как построить бэкенд для jQuery?