netlify app что это
Как создать бессерверное приложение с Netlify и JavaScript
Из статьи вы узнаете:
Понятие бессерверного подхода и случаи его применения
При взгляде на термин “бессерверный” можно подумать, что для запуска кода не нужен сервер. Но на самом деле это не так. А иначе каким образом будет выполняться программа?
В своей книге “Бессерверные приложения на JavaScript” Слободан Стоянович сравнивает их со стиральной машиной, которая используется лишь от 5 до 15 часов в неделю. При этом она занимает место на кухне и потребляет энергию даже в состоянии бездействия. По этой причине некоторые предпочитают пользоваться прачечными, где оплачивается только непосредственное время стирки.
Вполне возможно, что и ваш сервер работает впустую в ожидании запросов. Даже если изредка через него проходит трафик, он все равно обходится в копеечку. А было бы лучше платить только за время, потраченное сервером на обработку запросов.
В этом случае бессерверный подход оказывается как нельзя кстати. Он позволяет реализовывать проекты в облаке на основе оплаты по факту применения. А самое главное преимущество в том, что вы концентрируетесь только на написании кода, не беспокоясь о среде хостинга и базовой ОС. Облачный провайдер встанет на стражу вашего покоя и все сделает за вас.
Какие провайдеры поддерживают бессерверные технологии?
Почти все провайдеры облачных хостингов предоставляют возможности для создания бессерверных приложений. К числу самых известных из них относятся AWS Lambda, Google Cloud Functions и Netlify.
В статье мы создадим бессерверную функцию с помощью Netlify. В качестве аргумента она примет ссылку на веб-сайт и воспользуется API Readability от Mozilla для предоставления его контента. Поскольку она будет находиться на веб-сервере, мы сможем вызывать ее с помощью конечной точки API. Перед вами итоговый результат предстоящей работы:
Настройка проекта
Клонирование репозитория шаблона
Основой для данной программы послужит репозиторий Netlify Up And Running. Клонируем его, нажимая на Use this template.
После этого GitHub попросит назвать приложение. Присвоив ему имя, нажимаем на Create repository from this template для создания репозитория на основе имеющегося шаблона.
Проект успешно создан. Теперь нужно скачать его код в компьютер.
Но прежде проинформируем Git о месте расположения проекта. Нажимаем на Code для получения URL созданного репозитория.
Затем выполняем следующую команду терминала на компьютере:
Клонирование репозитория на локальный компьютер
Установка CLI Netlify
На следующем этапе необходимо установить инструмент командной строки Netlify. Для этого выполняем команду:
Далее авторизуемся с помощью ntl login :
По завершении этого процесса инструктируем Netlify создать веб-сайт с репозиторием. В каталоге проекта выполняем данную bash-инструкцию:
Проверяем, что выбраны следующие опции:
Теперь протестируем настройки и запустим веб-приложение следующим образом:
Как видим, веб-сервер приведен в состояние готовности для реализации намеченных целей разработки.
Результат выполнения команды терминала
Это означает, что настройки заданы корректно! Нажимаем на клавиатуре CTRL + C для завершения работы сервера.
Структура проекта
В каталоге netlify/functions создаем файлы:
В итоге каталог проекта должен выглядеть следующим образом:
Структура проекта
А теперь приступаем к программированию!
Создание приложения
Установка зависимостей
Для приложения потребуются такие модули:
Для получения этих зависимостей выполняем команды:
Парсинг сайта
В данном разделе создадим функцию, которая проинструктирует Node.js извлечь основное содержимое с нужной страницы.
Переходим к файлу netlify/functions/utils/readerUtils.js и пишем в нем следующий код:
Далее добавляем в этот файл нижеуказанный код:
Несколько пояснений к нему:
Проверка валидности ввода пользователя
Здесь мы прописываем метод, выполняющий проверку на валидность, которая покажет, ввел ли пользователь корректный URL.
Для этого пишем следующий код в readerUtils.js :
Отправка обработанных данных
После того как мы выполнили проверку на валидность и провели парсинг нужной пользователю веб-страницы, остается лишь отправить ответ клиенту.
Добавляем нижеуказанный блок в readerUtils.js :
Разберем данный код детально:
Связывание утилит с приложением
На этом с кодом для утилит мы закончили. Теперь наша задача — связать эти функции с API.
В reader.js пишем код:
Тестирование
Перед публикацией API проверяем, все ли работает. Для локального запуска API, выполняем команду:
Результат выполнения команды
Для выполнения запроса к API задействуем следующий синтаксис:
Результат запроса
Как видно, код работает! Далее узнаем, как развернуть API с открытым доступом.
Развертывание
Netlify позволяет легко обновлять веб-сайт — просто отправляем код на GitHub:
Тем самым Netlify получает указание изменить код и опубликовать его на сервере.
Теперь возвращаемся на домашнюю страницу Netlify и выбираем наш сайт:
Нажимаем на имя сайта
Далее кликаем на Functions и получаем перечень функций, связанных с сайтом.
Выбираем имя функции. В данном случае это reader :
Вам будет предоставлена конечная точка API для вызова вашего метода.
На старт, внимание, запуск!
Вызываем конечную точку API с помощью клиента API. Так мы убедимся, что все работает.
Поздравляю! С помощью Netlify мы создали работоспособную бессерверную функцию.
Заключение
С недавнего времени бессерверная архитектура несомненно приобрела популярность. Если трафик вашего приложения рассчитывается на основании фактического потребления, то бессерверные функции станут отличным решением.
JAMstack: Как создать свой блог используя Gatsby + Contentful + Netlify
Вы уже слышали о новом подходе JAMstack? Возможность писать веб-приложения на любимом фреймворке, управлять контентом из админ панели, а на выходе получать полностью валидные HTML-страницы построенные согласно с самыми последними рекомендациями SEO, PWA и a11y.
Интересно? Тогда вот список рассматриваемых вопросов в этой статье:
JAMstack
Как известно: “Всё новое это давно забытое старое” и вот очередное подтверждение ― мода на статические сайты возвращается. Что представлял собой интернет десять лет назад? Это был PHP сервер-рендеринг, который подставлял данные из БД в HTML-шаблоны и отправлял на клиент.
Что дальше? JAM предлагает:
Клиент всегда получает, заранее отрендеренную страницу с полностью валидной версткой и вопрос о производительности теперь касается только скорости интернет соединения (но конечно же не стоит забывать про коэффициент прямоты рук разработчиков).
Инструментарий
JAM это всего лишь подход, средств для которого на рынке уже достаточно, но как известно гвозди можно забивать чем угодно, но я предпочту молоток.
Список лучших инструментов на 2019 год:
Gatsby ― это генератор статических сайтов из React + GraphQL приложений. Почему именно такой выбор, а не Angular или Vue я затрудняюсь ответить, но скорее всего дело в злой статистике, которая говорит что не смотря на все споры, React самый популярный фреймворк последних трех лет (не забросайте меня камнями в комментариях, за это утверждение, на самом деле мне заплатили). Для более наглядного представления create-react-app компилирует код в JavaScript билд, для дальнейшего рендера при запуске страницы, Gatsby генерирует полноценные HTML-страницы, с валидной версткой, которые показываются как есть, даже с выключенным JS.
Contentful ― система управления контентом на статических страницах. Это WordPress, который не сохраняет связи между шаблонами и данными в БД, а вместо этого меняет данные непосредственно в HTML файлах.
Netlify ― это очень простая в использовании система деплоймента, которая позволяет связать большинство популярных файловых хостингов с JAM приложением, да ещё и на HTTPS протоколе.
От теории к практике
Теперь когда определились с инструментами ― можно приступать.
Contentful
Создаем аккаунт и видим что по умолчанию сервис генерирует образцовый проект, который я рекомендую сразу же удалять, так как по моему субъективному мнению он больше мешает, чем помогает разобраться. Создаем новый бесплатный проект, без генерации примеров.
Система управления контентом базируется на двух сущностях ― Content model, описывающая структуру и типы данных, и непосредственно Content. Для начала создадим простую модель для нашего блога. Content model состоит из типов данных, например для блога типами данных будут: Article, Person.
конечно же можно выбрать любой уровень абстракции, который по душе, например можно упразднить Person и указывать данные об авторе внутри Article, как Article.author_name
Далее, используя уже созданные типы данных, добавляем контент, для текстов можно использовать SaganIpsum для картинок Unsplash.
Gatsby
Открываем терминал и создаем рабочую среду
Что получилось? React + GraphQL приложение собираемое с помощью Gatsby, что значит что можно любой старый проект, который долго рендерится перевести в статический HTML сайт и получить прирост в скорости в несколько раз.
Gatsby+Contentful
Создаем файл .env в корне приложения со следующим содержимым:
Расширяем конфигурацию в gatsby-config.js:
Перезапускаем Gatsby сервер и если консоль не показывает никаких ошибок, значит соединение с Contentful установлено и можно переходить дальше.
Gatsby+GraphQL+Contentful
Если Вы еще не знакомы с GraphQL, то не переживайте потому что это достаточно просто. Наш сайт сейчас находится по адресу:
Но мы пока что оставим его и откроем вторую вкладку:
Перед нами IDE для GraphQL прямо в браузере. С ним очень удобно строить запросы и тестировать их. Кликните на Docs в верхнем правом углу, чтобы развернуть сайдбар с документацией, но сюрприз, это не документация к GraphQL, это документация Вашего API. Разверните список Query чтобы увидеть все доступные схемы для запросов, с их типами данных.
Интересующие нас схемы имеют примерно следующее название:
contentfulВашТипДанных — один экземпляр
allContentfulВашТипДанных — список экземпляров
Используя левую панель построим правильный запрос для наших данных (попробуйте автодополнение, очень удобно).
Что можно отметить из структуры запросов:
Переносим схему запроса в проект и рендерим их как обычные данные в React-приложении. Общепринятым Best Practice считается использование компонента из пакета gatsby, который уже установлен в проект.
Как это работает? В query передается схема запроса GraphQL, а в render наш любимый JSX. Используйте деструктуризацию чтобы сделать код более читабельным.
Теперь когда стало ясно как получить и отрендерить данные можно приступать к разработке, но так как эта статья не о том как сделать сайт на реакте, то мы опустим этот момент и представим что сайт готов.
Разместим наш проект на GitHub, откуда его можно будет деплоить в следующем шаге.
Настраиваем Netlify
Создаем аккаунт используя тот сервис, на котором планируется размещение проектов. Я выбрал GitHub, поэтому после успешной авторизации настроим новый проект, клик на New site from Git. Подключаем наш репозиторий, а Netlify автоматически определит что это Gatsby проект и настроит все скрипты для сборки.
Выбираем нужную ветку, и не забываем про переменные окружения, для этого раскрываем меню Advanced settings и добавляем содержимое локального файла .env и подтверждаем настройки.
Осталось добавить хук на обновление контента. Переходим в настройки:
Deploy settings → Build hooks → Add build hook
Устанавливаем любое понятное название, для примера «Contentful hook», выбираем ветку с которой будем делать билд и подтверждаем. Результатом будет ссылка, копируем и идем в панель Contentful:
Settings → Webhooks
Ищем на правой боковой панели темплейт для Netlify и в два клика связываем две системы. Пробуем изменить контент и смотрим как новые данные появляются на сайте.
Итого
JAM-stack совмещает в себе решение проблем предшествующих подходов и похоже претендует на захват власти и всемирную популярность, но революция ли это? Ничего нового и особенного нет, но это самая передовая методология последних двух лет, там, на чужбине, а у нас? Мы только-только начали переводить проекты с WordPress на React и это однозначно прогресс, но может чтобы не остаться за бортом, как легендарный индийский аутсорс, нам пора делать более решительные шаги?
Как развернуть React-приложение в Netlify
Я научу вас развертке и хостингу React приложения с Netlify.
Netlify — это сервис для автоматизации сборки, развертывания и управления сайтами. В настоящее время Netlify считается одним из самых простых и быстрых решений по развертыванию приложений.
В Netlify есть бесплатный тариф. Для начала, авторизуемся на Netlify любым из доступных способов (Github, Gitlab, Bitbucket, адрес почты) на странице входа.
Начнем создание сборки нашего приложения со следующей команды:
Так мы создали папку сборки. В ней будут содержаться все файлы для развертывания в рабочей среде.
Есть два способа развертывания нашего приложения в Netlify.
Перетаскивание
В Netifly все до безобразия просто — перетащите папку сборки в онлайн-приложение (крайнее правое изображение выше). Так ваше приложение будет развернуто с реальным URL.
Примечание: Онлайн-приложение Netlify — это экран, который появляется после авторизации в Netlify.
Netlify CLI
Также в Netifly доступен интерфейс командной строки, который позволяет развертывать приложение прямо из командной строки. Именно этим мы сейчас и займемся.
Для начала, установим CLI с помощью следующей команды:
Теперь мы готовы к развертыванию. Для развертки приложения необходимо удостовериться, что мы находимся в папке проекта. Затем выполняем следующую команду:
Возможно, мы увидим всплывающее окно с предложением авторизоваться на Netlify и получить доступ к Netlify CLI.
Нажмем Authorize. После того, как мы авторизовались на сайте, следуйте указаниям командной строки для правильной развертки приложения.
Подсказки командной строки
1. В консоли вы видите: “This folder isn’t linked to a site yet. What would you like to do?” (Эта папка еще не привязана к сайту. Что Вы хотите сделать?) Здесь CLI спрашивает, хотите ли вы привязать эту директорию к существующему сайту или же создать и настроить новый сайт. Поскольку мы делаем новый сайт, то выбираем Create & configure a new site (Создать и настроить новый сайт).
2. Здесь нам предлагают выбрать название сайта. Я указываю portfolio on netlify (Вы можете придумать любое название).
3. Теперь система спрашивает, какой аккаунт Netlify вы собираетесь использовать. Я выбираю my account (Abhishek Jakhar), вы можете выбрать свой.
4. В качестве пути развертывания необходимо указать директорию сборки проекта, в которой содержатся ресурсы для развертки. Печатаем build и нажимаем Enter.
5. Мы создали сайт. Сначала он будет развертываться на черновом URL. Вы можете увидеть его, если скопируете и вставите URL в браузер.
Возвращаемся обратно в консоль и видим надпись: “If everything looks good on your draft URL, take it to live with the — prod flag” (Если в черновом URL все выглядит хорошо, перейдите в рабочую версию через флажок — prod).
Для перехода в рабочую среду выполним команду из подсказки в командной строке:
Нас опять просят указать путь развертывания, то есть папку сборки, но уже к реальной версии.
В результате в консоли мы получаем два URL. Unique Deploy URL (Уникальный URL развертывания), который представляет собой уникальный URL для каждой индивидуальной развертки, и Live URL (реальный URL), в котором всегда отображается самое последнее развертывание.
Поэтому каждый раз при обновлении сайта и его развертывании, вы будете получать уникальный адрес этой версии. То есть, если вы делаете многократную развертку, то получите много уникальных URL, которые позволят вам направлять пользователей к отдельным версиям приложения. Но Live URL всегда отображает только самые последние изменения для этого URL.
Примечание: Netlify автоматически и бесплатно защищает ваш сайт через HTTPS.
Ошибка Page Not Found
Если вы публикуете приложение, которое использует маршрут React Router, то нужно будет настроить редирект и добавить правила замены для URL. В противном случае, при нажатии на любой элемент навигации, будет выскакивать ошибка 404.
Настроить переадресацию и правила замены в Netlify очень просто. Нам нужно добавить файл в папку сборки приложения и назвать его _redirects. Внутри этого файла прописываем правило замены.
Благодаря этому правилу при любом запрашиваемом URL браузер будет открывать файл index.html, а не выдавать ошибку 404.
Ⓖ Как создать блог с помощью Gatsby и Netlify CMS
Перевод публикуется с сокращениями, автор оригинальной статьи Mohammed Asker.
Вы узнаете, как добавить Netlify на свой хостинг, настроить права доступа к файлам и подключить систему аутентификации пользователей.
Полный код проекта можно найти по ссылке.
Кто такой Gatsby?
Gatsby – основанный на React бесплатный и открытый инструментарий, который способен быстро создавать сайты и веб-приложения. Это также генератор статических сайтов, вроде Next.js, Hugo и Jekyll.
Gatsby включает в себя SEO и оптимизацию производительности без плагинов, что позволяет создавать готовый к работе софт за меньший срок, чем на чистом React.
Netlify CMS
Netlify CMS – еще один генератор статических сайтов. Он написан разработчиками Netlify и позволяет создавать/редактировать контент, почти как в WordPress, но проще и удобнее.
Главное преимущество Netlify заключается в отсутствии необходимости каждый раз создавать файлы markdown перед написанием поста. Это полезно для авторов, которые не хотят иметь дело с кодом, текстовыми редакторами, репозиториями и прочими подобными вещами.
Настройка среды
Установка Node.js
Node.js – среда, позволяющая запускать JavaScript вне веб-браузера и писать бекенд вместо использования других ЯП: Python, Java или PHP. Gatsby построен на Node.js, поэтому мы должны его установить.
Установка Git
Git – распределенная система управления версиями с открытым исходным кодом, которая помогает эффективно работать со своими проектами. Gatsby starter использует Git для загрузки и установки необходимых файлов.
Чтобы инсталлировать Git, следуйте инструкциям для вашей ОС:
Установка Gatsby CLI
Gatsby CLI – инструмент для создания сайтов на базе Gatsby. С его помощью можно установить любые плагины для Gatsby.
Для установки откройте терминал и выполните следующую команду:
Как только все будет готово, переходим к созданию сайта.
Создаем сайт
В терминале выполните следующую команду, чтобы установить новый блог:
Что означает описанная выше команда:
Как только установка будет завершена, перейдите в папку проекта:
Затем запустите проект:
Добавляем Netlify CMS
Настройка файловой структуры приложения
Когда вы откроете текстовый редактор, вас будет ждать множество файлов. В следующей статье описан каждый из них.
Нам интересна папка S tatic, в которой формируется основная структура CMS. Если у вас этой папки нет, то создайте ее в корневом каталоге проекта.
Внутри папки S tatic создайте папку admin, а в ней два файла: index.html и config.yml:
Файл index.html, является точкой входа в админку. Вам не нужно создавать стили или что-то еще – все уже сделано с помощью тега script:
Настраиваем серверную часть
Добавьте все фрагменты кода из этого раздела в файл admin/config.yml.
Начнем со следующего куска:
Далее добавим media_folder: «images/uploads». Это позволит добавлять фотографии, непосредственно в CMS и больше не нужно будет использовать текстовый редактор для добавления вручную.
Убедитесь, что в папке admin есть папка images. Внутри нее создайте папку uploads – тут вы будете размещать свои изображения.
Настройка коллекций
Коллекции определяют структуру различного типа контента на статическом сайте. Поскольку сайты могут быть разным, способы настройки параметров коллекции будет различаться.
Например, на вашем сайте есть блог, в котором посты хранятся в content/blog, а файлы имеют следующий формат: 2020-09-26-how-to-make-sandwiches-like-a-pro.md. Каждый пост начинается с настройки в формате YAML:
В примере выше процесс добавления параметров коллекции в ваш config.yml:
Рассмотрим, что делает каждая строка:
Включаем аутентификацию
Для этого добавьте код HTML в два файла:
Когда пользователь входит в систему с помощью виджета Netlify Identity, токен направляет его на главную страницу сайта. Для того чтобы завершить вход в систему и вернуться к CMS, перенаправьте пользователя обратно в /admin/. Для этого добавьте следующий код перед закрывающим тегом body в файлике public/index.html:
Разворачиваем сайт с помощью Netlify
Процесс развертывания не вызовет затруднений, а главное, у вас будет бесплатный SSL.
После завершения развертывания вы можете перейти на сайт, нажав зеленую ссылку в левом верхнем углу экрана. Например: https://random_characters.netlify.app.
Включаем Identity и Git Gateway
Сервисы Netlify Identity и Git Gateway помогают управлять админами сайта без необходимости иметь учетную запись Git.
Чтобы активировать эти службы, перейдите в админку и выполните следующие действия:
Кликните на «Settings» 
Прокрутите вниз и слева на боковой панели нажмите на «Identity» 
Кликните на «Enable Identity»
В подменю Identity, нажмите на ссылку «Registration», и вас перекинет в настройки регистрации.
3. Прокрутите вниз до Services > Git Gateway и кликните по Enable Git Gateway. Эта штука проверяет подлинность Git-узлов и генерирует токен доступа к API.
В этом случае мы оставляем поле Roles пустым, что означает, что любой вошедший в систему может получить доступ к CMS.
В подменю Identity, щелкните ссылку «Services». 
Кликните по EnableGitGateway.
Получаем доступ к CMS
Существует два способа войти в админку, в зависимости от того, какие параметры доступа были выбраны в Identity.
Если Invite only – вы можете пригласить себя и других пользователей, нажав кнопку «Invite user». Вам придет письмо со ссылкой для входа.
Если доступ к админке получить не удается, добавьте в конец адреса сайта следующую строку: #confirmation_token=random_characters, например: https://yoursite.com/admin/#confirmation_token=random_characters.
Если все хорошо сложилось, вы уже должны видеть панель администратора:
Админка
Создать новый пост можно нажав на кнопку «New post».
Когда будете готовы его опубликовать – нажмите «Publish Now». После нажатия данной кнопки пост создастся автоматически, изменения закоммитятся с датой и временем публикации, а потом все будет запушено в главный репозиторий.
Заключение
Из этого туториала вы узнали, как можно сделать несколько вещей:
Библиотека программиста надеется, что вы нашли это руководство полезным. Удачи в обучении!