Как создать фронтенд на Gatsby и подключить его к бэкенду?

в этом учебном пособии вы создадите приложение список дел, используя gatsby, и подключите его к надежному бэкенду, предоставляемому back4app этот гид идеально подходит для тех, кто хочет интегрировать основные операции crud (создание, чтение, обновление, удаление) в быстрый статический сайт к концу вы получите полностью функциональное приложение, которое демонстрирует, как использовать бэкенд сервисы back4app, используя gatsby для молниеносного фронтенда создание полнофункционального приложения может быть сложной задачей, с такими сложностями, как настройка бэкенда, управление базами данных, аутентификация и развертывание чтобы упростить этот процесс, мы используем back4app—это масштабируемое решение бэкенда как услуги (baas) —так что вы можете сосредоточиться на создании вашего сайта на gatsby, пока он обрабатывает хостинг, базы данных и api back4app предлагает комплексный набор бэкенд сервисов, включая готовую к использованию базу данных, аутентификацию, cloud code для серверной логики и бесшовные интеграции sdk его поддержка контейнеризованных развертываний делает его отличным вариантом для современных полнофункциональных приложений с этими инструментами вы можете быстро разрабатывать и развертывать приложения, не управляя серверной инфраструктурой основные выводы следуя этому руководству, вы научитесь инициализировать современный проект gatsby интегрировать бэкенд сервис для управления данными вашего приложения реализовать основные операции crud для интерактивного пользовательского опыта развернуть полностью функциональное приложение to do list с использованием контейнеризованных рабочих процессов на back4app предварительные требования убедитесь, что у вас есть следующее перед началом node js и npm установите последнюю lts версию node js с nodejs org https //nodejs org/ и проверьте, выполнив node v и npm v в вашем терминале базовые знания gatsby ожидается знакомство с react, graphql и слоем данных gatsby если вы новичок в gatsby, рассмотрите возможность предварительного изучения его основ аккаунт back4app зарегистрируйтесь на back4app https //www back4app com/ для настройки и управления вашими бэкенд сервисами с этими предварительными требованиями вы готовы настроить свой проект и начать разработку настройка проекта начните с настройки вашей локальной среды разработки и инициализации вашего проекта gatsby убедитесь, что node js (lts версия) установлен если необходимо, загрузите его с nodejs org https //nodejs org/ проверьте вашу установку node v npm v создайте новый проект gatsby с помощью gatsby cli выполните следующую команду (замените todo app на желаемое имя проекта) npx gatsby new todo app перейдите в каталог вашего проекта cd todo app запустите сервер разработки, чтобы проверить настройку npx gatsby develop ваш сайт gatsby теперь должен работать локально откройте предоставленный url в вашем браузере, чтобы подтвердить далее вы настроите свой бэкенд на back4app для управления хранением данных и взаимодействиями с api создание бэкенда todo back4app предоставляет полностью управляемый бэкенд сервис на базе parse , предлагая nosql базу данных, аутентификацию, cloud code и автоматически сгенерированные api прямо из коробки этот раздел проведет вас через создание task модели данных для хранения ваших задач и подключения ее к вашему фронтенду на gatsby настройка вашего бэкенд приложения войдите в вашу панель управления back4app https //www back4app com/ и нажмите "создать новое приложение " назовите ваше приложение (например, todogatsbyapp ) и выберите nodejs/parse в качестве типа бэкенда после создания приложения перейдите в "база данных" > "обозреватель" нажмите "создать класс" и выберите "пользовательский" назовите класс task и установите разрешения на уровне класса для разрешения публичного чтения и записи (вы можете уточнить эти настройки позже) в классе task добавьте следующие поля title (строка) – название задачи description (строка) – подробности о задаче completed (булевый) – указывает, завершена ли задача duedate (дата) – срок выполнения задачи нажмите "сохранить" для завершения вашей схемы интеграция back4app с gatsby интегрируйте back4app в ваш проект gatsby, используя parse javascript sdk установите sdk через npm npm install parse настройте sdk, инициализировав его с вашим application id и javascript key получите эти учетные данные на вашей панели управления back4app в разделе app settings > security & keys в вашем проекте создайте файл (например, src/utils/parse config js ) и добавьте следующую конфигурацию // src/utils/parse config js import parse from "parse/dist/parse min js"; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; export default parse; теперь вы можете импортировать эту конфигурацию в ваши страницы и компоненты gatsby для взаимодействия с вашим бэкендом разработка фронтенда с gatsby теперь, когда ваш бэкенд подключен, создайте пользовательский интерфейс для вашего приложения to do list с помощью gatsby вы создадите страницы и компоненты для добавления, отображения, обновления и удаления задач, используя react и graphql организация ваших компонентов ваше приложение будет включать следующие ключевые компоненты taskform js – обрабатывает добавление новых задач tasklist js – отображает все задачи и предоставляет элементы управления для отметки задач как выполненных или их удаления taskitem js – представляет отдельную задачу с действиями для переключения выполнения или удаления создайте components папку внутри src и добавьте эти файлы mkdir src/components touch src/components/taskform js src/components/tasklist js src/components/taskitem js управление состоянием с помощью react hooks используйте хуки react ( usestate и useeffect ) для управления состоянием и побочными эффектами на вашей главной странице (например, src/pages/index js ), настройте состояние следующим образом // src/pages/index js import react, { usestate, useeffect } from "react"; import parse from " /utils/parse config"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; const indexpage = () => { const \[tasks, settasks] = usestate(\[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map(task => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; useeffect(() => { fetchtasks(); }, \[]); return ( \<div classname="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); }; export default indexpage; создание компонента формы задач в taskform js , создайте управляемую форму для добавления задач управляйте значениями ввода с помощью usestate , и отправляйте данные в back4app // src/components/taskform js import react, { usestate } from "react"; import parse from " /utils/parse config"; const taskform = ({ fetchtasks }) => { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title); task set("description", description); task set("completed", false); await task save(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); }; export default taskform; отображение списка задач в tasklist js , отобразите список задач, пройдя по массиву задач и используя компонент taskitem // src/components/tasklist js import react from "react"; import taskitem from " /taskitem"; const tasklist = ({ tasks, fetchtasks }) => { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); }; export default tasklist; создание компонента задачи в taskitem js , создайте компонент, который позволяет вам отметить задачу как завершенную или удалить её // src/components/taskitem js import react from "react"; import parse from " /utils/parse config"; const taskitem = ({ task, fetchtasks }) => { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); }; export default taskitem; стилизация вашего приложения создайте файл styles css в папке src с базовой стилизацией / src/styles css / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } container p { font size 1rem; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } импортируйте этот css в ваш макет или страницу gatsby (например, в gatsby browser js ) // gatsby browser js import " /src/styles css"; завершение пользовательского интерфейса ваше приложение to do list на gatsby теперь имеет динамичный интерфейс, интегрированный с back4app и с пользовательским стилем приложение позволяет вам добавлять, отображать, обновлять и удалять задачи, обеспечивая эффективное взаимодействие между фронтендом и бэкендом далее вы развернете свой сайт gatsby, используя платформу веб развертывания back4app развертывание фронтенда на платформе веб развертывания back4app back4app web deployment предлагает полностью управляемую, контейнеризированную среду для хостинга ваших приложений с развертываниями на основе docker вы можете упаковать свой сайт gatsby и развернуть его без усилий настройка gatsby для продакшена gatsby по умолчанию генерирует статический сайт постройте свой готовый к продакшену сайт с помощью npx gatsby build создание dockerfile для вашего сайта перед созданием dockerfile , сначала создайте файл dockerignore в корневом каталоге вашего проекта и добавьте следующие строки кода git node modules eslint prettier git vscode readme md dockerfile docker compose yml public cache затем создайте файл docker compose yml для использования команд docker compose целью файла должен быть этап развертывания в вашем dockerfile ваш файл docker compose yml должен содержать команды ниже version '3' services app image todo app gatsby build context dockerfile dockerfile target deploy ports \ "8000 80" теперь создайте dockerfile в корне проекта, чтобы контейнеризировать ваш сайт gatsby from node 20 as build workdir /usr/src/app copy run npm install run npm run build from nginx 1 18 alpine as deploy workdir /usr/share/nginx/html run rm rf / copy from=build /usr/src/app/public entrypoint \[ "nginx", " g", "daemon off;" ] тестирование контейнера локально перед развертыванием постройте и протестируйте ваш docker контейнер docker build t todo gatsby frontend запустите контейнер docker run p 8000 80 todo gatsby frontend посетите http //localhost 8000 в вашем браузере, чтобы убедиться, что ваш сайт обслуживается правильно публикация на github и развертывание через back4app отправьте ваш проект на github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main затем разверните с помощью back4app web deployment войдите в back4app web deployment https //www back4app com/containers нажмите "создать новое приложение" , укажите имя и выберите github repository авторизуйте back4app для доступа к вашему репозиторию и выберите todo gatsby репозиторий выберите dockerfile deployment и подтвердите настройки сборки нажмите "развернуть" для начала процесса сборки мониторинг и управление развертываниями после развертывания используйте панель управления back4app для просмотра логов для устранения неполадок мониторинга производительности контейнера и использования ресурсов запуска переразвертывания при новых коммитах настройки пользовательских доменов при необходимости тестирование и отладка вашего приложения после развертывания тщательно протестируйте ваш сайт на gatsby проверьте подключение к api откройте консоль разработчика вашего браузера (f12 → сеть), чтобы проверить вызовы api во время выполнения задач добавление и получение задач используйте интерфейс для добавления задач, затем обновите страницу, чтобы подтвердить сохранение данных в браузере базы данных back4app тестирование операций crud убедитесь, что отметка задач как завершенных и удаление отображаются правильно на сервере обработка крайних случаев проверьте вводимые данные формы и смоделируйте медленные сетевые условия с помощью инструментов разработчика если возникнут проблемы, просмотрите журналы back4app или проверьте конфигурацию вашего api лучшие практики использования услуг back4app улучшите производительность и безопасность вашего приложения, следуя оптимизация вызовов api используйте пакетные запросы для нескольких операций и запрашивайте только необходимые поля защита конфиденциальных данных храните учетные данные, такие как идентификатор приложения и ключ javascript, в переменных окружения с gatsby создайте файл env gatsby parse app id=your app id gatsby parse js key=your js key включение авто масштабирования активируйте авто масштабирование в back4app web deployment для управления высоким трафиком улучшение безопасности ограничьте разрешения на уровне классов (clp), чтобы контролировать изменения данных, и настройте acl по мере необходимости использование облачного кода перенесите сложную логику в облачный код для повышения производительности и уменьшения воздействия api заключение теперь вы создали полнофункциональное приложение to do list, используя gatsby для фронтенда и надежные бэкенд сервисы back4app этот учебник провел вас через настройку проекта gatsby, интеграцию parse sdk и развертывание вашего сайта с использованием контейнеризованных рабочих процессов на back4app по мере продолжения разработки рассмотрите возможность добавления таких функций, как расширенная аутентификация пользователей, обновления в реальном времени и интеграции с третьими сторонами для получения дополнительной информации и поддержки обратитесь к документации back4app https //www back4app com/docs