Развертывание и хостинг веб-приложений на Back4App

создание и хостинг полнофункционального веб приложения введение запуск полнофункционального приложения может быть сложной задачей вам нужно беспокоиться о хостинге вашего фронтенда, настройке/обеспечении сервера и связывании всего вместе вы, возможно, не знали, но back4app предоставляет оптимальную инфраструктуру для всего вышеперечисленного вы можете легко обслуживать ваш фронтенд html (включая фронтенд фреймворки, такие как react и vue) с помощью веб хостинга back4app cloud code создает отличный бэкенд, который запускается быстро в этом руководстве мы создадим полное, хотя и примитивное, веб приложение на back4app это гостевой учебник, написанный джоном консидином https //github com/considine , ведущим разработчиком в k optional https //koptional com/ цели запустить полнофункциональное веб приложение на back4app предварительные условия чтобы завершить этот учебник, вам нужно знать командную строку git и npm должны быть установлены иметь учетную запись back4app с установленным и настроенным инструментом cli, см здесь для помощи создать совершенно новый проект на вашей панели управления back4app см здесь для помощи этот учебник должен быть настроен на версию parse server 3 1 x смотрите ниже для получения более подробной информации этот проект будет использовать новую версию 3 1 parse server это означает, что вам нужно убедиться, что ваш проект back4app настроен на этот релиз в противном случае он не будет работать на вашей панели управления проектом перейдите в настройки сервера » управление parse server(настройки) и выберите 3 1 1 (возможно, он находится в бета версии) для получения дополнительной информации о миграции на parse server 3 1 x смотрите это руководство смотрите это руководство, если вы не понимаете синтаксис облачного кода для этого проекта фон проекта мы запустим примитивное приложение для обмена билетами оно позволяет пользователям зарегистрироваться, войти в систему и размещать билеты, которые они продают на различные мероприятия, которые администраторы могут создавать с помощью панели управления другие пользователи могут связаться с ними по электронной почте или номеру телефона, в зависимости от того, что разместивший выберет для отображения я запустил приложение здесь http //ticketlister koptional com/ , используя тот же код, который мы исследуем в этом руководстве вы можете создать учетную запись, разместить билеты и посмотреть, как выглядит приложение цель этого руководства продемонстрировать, как эффективно запустить приложение поэтому, вместо того чтобы углубляться в каждую строку кода, мы начнем с почти завершенной кодовой базы и сосредоточимся на простоте развертывания есть только одно место, где вам нужно будет редактировать код на шаге 1 вам нужно будет добавить настройки вашего проекта (id приложения, ключ javascript и url сервера) тем не менее, вы можете редактировать и расширять это приложение любым удобным для вас способом структура проекта прежде чем начать подготовку кода, важно понять файловую структуру этого проекта я буду использовать это в качестве справки на протяжении всего руководства вот как будет выглядеть ваша директория, когда все будет готово основные выводы из этой настройки frontend код находится в public директории фронтенд — это просто часть приложения, с которой будет взаимодействовать ваш конечный пользователь backend код находится в cloud директории бэкенд выполняет работу за кулисами в приложении это включает в себя сохранение данных в базе данных и отправку данных фронтенд сообщает бэкенду, что делать, отправляя http запросы в нашем случае это означает выполнение облачных функций обратите внимание на простоту этой настройки три html файла представляют три страницы в этом приложении весь наш бэкенд — это один файл! на шаге 2 мы кратко рассмотрим код фронтенда — то есть публичный каталог на шаге 3 мы перейдем к бэкенду 1 подготовка файлов как упоминалось в https //www back4app com/docs/advanced guides/web application hosting#prerequisites , у вас должен быть создан новый проект на back4app и https //blog back4app com/2017/01/20/cli parse server/ перед тем как посетить любой из кодов, вам нужно будет его скачать и подготовить на этом этапе мы именно это и сделаем обратите внимание, что вам придется выполнить несколько команд в командной строке я дам вам каждую из них, чтобы вы могли скопировать и выполнить если вы чувствуете себя запутанным на этом этапе, не беспокойтесь; это просто процесс, необходимый для подключения приложения back4app к проекту, который у меня есть на git не важно знать, что происходит на этом этапе мы инициализируйте локальный каталог с вашим проектом back4app, используя cli скачайте файлы примера проекта в этот каталог, используя git инициализация с back4app выполните в командной строке вам должно быть предложено выберите “e” для существующего затем выберите приложение, которое вы создали, из списка далее вам будет предложено назвать каталог, в который будет установлен код вы можете просто нажать ‘enter’, если у вас нет предпочтений для целей этого проекта я предположу, что каталог называется “ticketlister” наконец, когда вас спросят просто нажмите enter (не нажимайте blank) когда эта команда вернется, вы можете перейти в новый каталог вы должны увидеть два каталога один называется “cloud”, другой называется “public” ваш весь вывод должен выглядеть примерно так синхронизация приложения с файлами проекта в дополнение к облачным и публичным папкам в вашем каталоге будет два файла parse local parse project эти файлы содержат данные, относящиеся к проекту back4app все остальное должно быть перезаписано существующими файлами проекта из репозитория https //github com/back4app/back4app ticketlister следующий способ является самым простым если все прошло успешно, у вас теперь должны быть следующие файлы не переживайте — это была сложная часть! теперь мы можем сосредоточиться на проекте 2 фронтенд напоминаю, что код фронтенда для этого приложения находится в папке public чтобы сохранить все относительно просто, я решил не использовать фреймворк для фронтенда, такой как react, angular или vue таким образом, нет внешних зависимостей или сборок проект действительно использует html5 web components они поддерживаются нативно в браузере они помогают инкапсулировать функциональность различных частей пользовательского интерфейса они позволяют разработчику объявлять новые html элементы (подумайте о ‘\<p>’) в противном случае они просто используют обычный javascript в папке public/js находятся 4 файла javascript main js — это код, загружаемый главной страницей, index html эта страница — это место, где пользователи могут просматривать билеты и т д signup js — это код, загружаемый страницей регистрации, signup html signin js — это код, загружаемый страницей входа, login html parse js — это простой файл, который используют все страницы он создает соединение с бэкендом это единственный файл, который вам нужно будет редактировать, и проект не будет работать, если вы этого не сделаете! добавление ваших учетных данных back4app сначала вам нужно получить ваш application id и ваш javascript key из вашего проекта back4app после входа в back4app выберите ваш проект затем нажмите на app settings на левой панели и выберите security & keys вы должны увидеть несколько ключей получите application id и javascript key и держите их под рукой наконец, откройте public/js/parse js и поместите каждую из строк в нужное место не забудьте убедиться, что serverurl — это https //parseapi back4app com 1 // part 1 put your app id, js key, and server url 2 parse initialize( 3 '', // your app id 4 '' // your javascript key 5 ); 6 // your server url 7 parse serverurl = 'https //parseapi back4app com'; приложение теперь может общаться с сервером! поверхностное погружение в код хотя весь код в этом проекте выходит за рамки этого руководства, я призываю вас просмотреть каждый из файлов ничего не слишком сложного, и я хотел бы уделить минуту, чтобы дать обзор с высоты 1,000 футов этот проект использует html5 web components для инкапсуляции каждого логического раздела интерфейса важная разметка в html файлах находится внутри html \<template> html \<template> тегов вот как мы описываем макет «функциональность» приложения происходит в javascript файлах здесь приложение описывает, что делать, когда форма отправляется или кнопка нажимается и т д например, возьмем компонент входа разметка ( public/login html ) выглядит так 1 2 6 7 8 please sign in 9 email address 10 18 password 19 26 27 sign in 28 29 sign up 30 31 32 33 34 а функциональность появляется в javascript файле ( public/signin js ) 1 // code above ^ 2 // when the code is ready, listen for the form to be submitted when it is, 3 // call the 'onsubmit' method 4 connectedcallback() { 5 const form = this shadowroot queryselector('form'); 6 form addeventlistener('submit', this onsubmit bind(this), false); 7 } 8 // obtain the email and password from the markup inputs 9 onsubmit(e) { 10 e preventdefault(); 11 // get inputs 12 const email = this shadowroot queryselector('#inputemail') value; 13 const password = this shadowroot queryselector('#inputpassword') value; 14 this login(email, password); 15 } 16 // send a request to the backend, attempting to login if the login 17 // is successful, go to the index html page otherwise, give the user 18 // an alert explaining what went wrong 19 login(email, password) { 20 // add login method here 21 parse user login(email, password) 22 then(user => { 23 window\ location href = 'index html'; 24 }) 25 catch(e => { 26 alert(e message); 27 }); 28 } 29 // more code below 30 всё приложение имеет такую общую структуру обратите внимание на моменты, когда фронтенд взаимодействует с бэкендом вот так ( public/js/main js ) на следующем этапе мы рассмотрим, как объявляются эти функции 3 бэкенд весь бэкенд будет находиться в cloud/main js , файле функций cloud code он состоит из очень скромного объема кода, что подтверждает, сколько мы можем достичь за так мало с помощью back4app часть приложения (создание событий, под которыми могут быть перечислены билеты) просто будет использовать панель управления back4app эта потрясающая функциональность идет с нашим проектом, так что нет необходимости изобретать велосипед! снова, изучение каждой строки кода выходит за рамки нашего охвата тем не менее, мы еще раз взглянем на то, как работает код вы объявляете cloud functions в файле cloud/main js эти функции могут быть вызваны с фронтенда (см шаг 2 ) для получения дополнительной информации о cloud functions смотрите документацию кроме того, эти cloud functions выполняются на parse server этот гид обсуждает некоторые из используемого синтаксиса, поэтому может быть полезно взглянуть более конкретно, функции, которые мы определяем, это ‘ user\ signup ’ код для обработки процесса регистрации пользователя ‘ tickets\ list ’ код для получения всех перечисленных билетов ‘ tickets\ create ’ код для создания нового билета ‘ events\ list ’ код для перечисления всех событий и еще одна последняя заметка по коду я добавил простой метод в верхней части файла 1 const requireauth = user => { 2 if (!user) throw new error('user must be authenticated!'); 3 }; некоторые облачные функции требуют, чтобы пользователь был авторизован вызывая эту функцию с пользовательским свойством запроса, мы гарантируем, что никто не сможет делать несанкционированные запросы я настоятельно рекомендую вам просмотреть остальные функции, чтобы увидеть, как они работают теперь, когда вы знаете, что они делают, мы можем развернуть! 4 развертывание мы завершили весь код, и теперь приложение можно развернуть на back4app следующая команда загрузит все публичные и облачные файлы локальный хостинг веб сайта чтобы получить публичный домен для просмотра загруженного веб приложения, вам нужно включить веб хостинг на панели управления back4app сначала откройте "настройки сервера" на левой стороне панели управления затем нажмите на ссылку "настройки" под "веб хостинг и живой запрос" и наконец, отметьте "активировать хостинг back4app" вам нужно выбрать уникальный поддомен; я уже забронировал ticketlister для этого проекта, поэтому выберите что то другое при желании вы можете настроить домен, который вы владеете, чтобы "указать" на этот домен back4app я сделал это для http //ticketlister koptional com https //www back4app com/docs/advanced guides/my%20website и мои настройки выглядят так пожалуйста, обратите внимание на текст ниже «пользовательский домен», если вы планируете запустить его с вашего веб сайта если вы правильно выполните этот шаг, вы сможете перейти к своему домену и использовать приложение если у вас нет пользовательского домена, просто откройте http //<ваш субдомен> back4app io, где ваш субдомен — это имя, которое вы только что выбрали 5 использование и панель управления чтобы начать размещать билеты, вам нужно создать событие из панели администратора на back4app перейдите в браузер данных и создайте класс «событие» добавьте столбцы «имя» (строка) и «когда» (дата) затем вы можете добавить событие напрямую не забудьте заполнить все столбцы это должно выглядеть примерно так теперь на вашем веб приложении вы можете войти в систему и разместить билет на это событие эта функциональность администратора, которая идет с parse / back4app, является еще одним сокращением, которое уменьшает вашу рабочую нагрузку заключение создание веб приложения с бэкендом — это то, что часто занимает недели и месяцы мы воспользовались мощной инфраструктурой back4app и sdk parse, чтобы запустить его гораздо быстрее использование этого подхода для любого приложения позволяет вам создавать удивительные вещи, не тратя время