Современный способ создания приложений.
Давайте создавать быстрые, отзывчивые, безопасные, надежные и легкие приложения с помощью JavaScript, API и разметки; безсерверный способ.

На прошлой неделе у меня была возможность пройти сессию по JAMStack в KDI Bangalore. JAMStack — это революционная концепция, меняющая способ проектирования нашей системы. В KDI Bengalore мы стремимся модернизировать способы разработки и развертывания наших веб-приложений. Поэтому для нас было естественным изучить появляющуюся среду JAMStack. Чтобы продемонстрировать большие преимущества JAMStack, я покажу, как легко создать и спроектировать веб-сайт обзора фильмов и развернуть его в Azure с помощью Azure DevOps и Azure Functions. Если вы хотите продолжить, вы можете посмотреть ссылку GitHub JAMStack.

Поэтому, не теряя времени, давайте JAM.

  • Концепция JAMStack
  • Обзор стека технологий
  • Преимущества бессерверной архитектуры
  • Эволюция Интернета
  • Архитектура приложений JAMStack
  • Демо
  • Возможности кода VS
  • Развертывание Azure
  • Расширить приложение с помощью Storage, Functions, Cosmos Db
  • Демо
  • Настройка CI/CD

Концепция JAMStack:

JAMstack — это не какой-то конкретный набор технологий. Это новый способ создания веб-сайтов и приложений, обеспечивающий более высокую производительность, более высокий уровень безопасности, меньшую стоимость масштабирования и лучший опыт разработчиков.

Здесь мы можем использовать любые фреймворки представления JavaScript, такие как angular, react или vuejs. у нас есть API, которые могут быть сторонними API или бессерверными функциями, которые мы будем использовать в этой демонстрации. И, наконец, у нас есть разметка, которая представляет собой шаблонную разметку, и все вместе мы получаем JAM.

Обзор стека технологий:

Ниже я упомянул краткую картину стека технологий, который мы будем использовать для нашей демонстрации.

Преимущества бессерверной архитектуры:

В этой демонстрации мы будем использовать бессерверную концепцию, это не значит, что у нас нет сервера, но это означает, что нам нужно меньше думать о серверах, следовательно, без сервера.
Ниже приведены причины, по которым мы выбрали бессерверные решения.

  • Безопасность: когда у нас меньше серверов, мы меньше беспокоимся о безопасности, поскольку поставщик уже позаботился о большей части тяжелой работы.
  • Высокая производительность
  • Высокая продаваемость
  • Бюджетный

Эволюция Интернета:

Как вы можете видеть, левое изображение изображает слои традиционного веб-приложения, а стек, отображаемый справа, изображает простую архитектуру JAM, которая представляет собой не что иное, как веб-браузеры и API-интерфейсы вместо веб-серверов. Преимущества наличия API: они могут напрямую общаться с веб-браузером и размещать его статически, что является самым быстрым способом запуска HTML в браузере.

Архитектура приложения JAMStack:

В соответствии с архитектурной схемой, показанной выше, мы применяем ту же концепцию при построении JAMStack. Теперь, когда у нас есть веб-браузер, как показано выше на диаграмме, у нас есть что-то вроде обратного прокси-сервера, который будет доступен, когда мы запустим его. Это означает, что он будет ориентироваться на один конкретный URL.

Мы увидим ту же процедуру в действии во время демонстрации. Для этой реализации мы используем бессерверные функции, которые будут иметь бессерверные API с функцией HTTP-Trigger, которая используется для получения списка фильмов. У нас есть база данных NOSQL; мы будем использовать Cosmos для хранения данных. Мы будем использовать интерфейс Angular и хранилище Azure для создания этой части. Все это решение будет основано на облаке. Это ненадолго делает файл JAMStack.

Демо:

Чтобы начать работу с демонстрацией, давайте возьмем исходный скелетный код с GitHub, чтобы помочь вам. После того, как вы клонируете репозиторий, ваш исходный код должен выглядеть примерно так.

Я объясню все биты через мгновение. Но перед этим давайте просто установим эти пакеты и запустим приложение. Сначала npm i для установки пакетов, а затем npm run start для запуска приложения, потому что в будущем мы будем конфигурировать прокси. как только мы это сделаем, все будет так

Теперь давайте продолжим и приступим к демонстрации. Прежде всего, давайте приступим к сборке проекта с помощью npm run build. Это создаст папку «dist», как показано ниже.

Теперь мы будем конвертировать это простое приложение в JAMStack. Если вы хотите увидеть источник этих значений, вы можете просмотреть папку API из файла Movies.json.

Его довольно простой угловой код, в котором эти данные обслуживаются службой angular, как показано ниже.

А фильм похож

Я не буду здесь много объяснять, так как вы можете исследовать это самостоятельно, это просто угловатость, ничего особенного!

Вы можете установить эти расширения Azure из marketplace. У меня здесь три элемента; хранилище, функции и служба приложений. После того, как у нас есть эти расширения, мы можем перейти к функциональному модулю и щелкнуть первый значок, который является значком папки, и ввести необходимую информацию, как показано ниже.

Затем мы нажимаем Значок обзора, как показано выше, а затем создаем новую папку с именем functions, как показано ниже.

Обратите внимание, что мы сохранили папку functions за пределами каталога проекта angular. Причина в том, что это независимые компоненты независимо от угловых зависимостей. Тогда мы получим следующие варианты создания функции

Здесь мы выберем Typescript. Затем мы получим следующее окно на выбор.

Здесь мы выберем Триггер HTTP для того же. Затем я дал имена функций как movies.

И, наконец, мы будем говорить уровень авторизации как Анонимный. Как только мы создадим эту функцию, в нашей исходной папке будет удалено несколько компонентов, связанных с этой функцией.

Помимо этого, в репозиторий добавлено много других компонентов. Мы пойдем один за другим в это. Папка функций выглядит так.

У него есть файл index.ts, который в основном представляет собой функцию и привязку, которую мы можем видеть в файле function.json.

Из кода видно, что функции «получить» и «отправить» уже настроены. Здесь мы можем настроить и другие HTTP-глаголы. Кроме того, есть несколько настроек и файлов, связанных с запуском, которые также находятся в репозитории. Они есть:

  • extensions.json
  • запуск.json
  • задачи.json
  • хост.json
  • пакет.json
  • прокси.json
  • tsconfig.json
  • функция.json
  • index.ts
  • образец.дата

Многие функции многих файлов говорят сами за себя. Тем не менее, я объясню те, которые требуются для демонстрации. Теперь я удалю этот шаблонный код из файла index.ts и заменю его приведенным ниже фрагментом.

Здесь есть несколько зависимостей, которые мне нужно установить. Если вы видите файл package.json внутри папки functions, он будет отображаться следующим образом:

Здесь мне нужно установить еще один пакет с помощью команды npm i @azure/cosmos внутри папки functions.

Как только необходимые зависимости будут установлены, я продолжу и добавлю необходимые настройки в файл local.settings.json, как показано ниже.

Файл настроек будет отправлен в Azure. Это своего рода файл настроек приложения, который содержит все, что связано с окружающей средой. По этой причине этот файл в проводнике отображается серым цветом, поскольку его нельзя зарегистрировать.

В этот момент я также могу запустить код локально. Я могу пойти дальше и отладить, а также. Если мы попытаемся отладить, то увидим, что «функция присоединения к узлу» уже есть.

И этот параметр берется из launch.json, как показано ниже.

Здесь я могу пойти дальше и добавить множество других конфигураций по мере необходимости. Итак, теперь мы можем зайти в окно отладки и нажать кнопку воспроизведения. Это запустит локальный API фильмов, который в основном является лазурной функцией на порту 7071.

Теперь, если я перейду на http://localhost:7071/api/movies

Это приведет к выводу, как показано выше. Давайте продолжим и используем ту же конечную точку в нашем коде. Для этого мы перейдем к файлу environment.ts и заменим его этой конечной точкой.

Давайте продолжим и отладим приложение, и на этот раз давайте установим точку останова в методе получения функции, как показано ниже. Как только функция запускается локально, я просто нажму на конечную точку в браузере, затем она должна попасть в точку останова, как показано ниже.

Здесь я также применил наблюдение к результату, поэтому, как только я выполню эту строку, я также смогу увидеть свои значения в окне наблюдения.

На этом этапе я могу продолжить и связать значения в своем приложении angular, также запустив приложение angular из другой командной строки cmd. Мы можем добиться от той же конфигурации.

Здесь у нас есть что-то под названием preLaunchTask, которое указывает на npm: start. Это можно настроить в файле tasks.json, как показано ниже. Вот, я настроил задачу. Это подберет правильный файл и сопоставит его с правильной папкой. Теперь, допустим, мне нужно запустить и клиент, и сервер параллельно, тогда в этом случае у меня есть опция launch.json для подключения соединений.

С указанным выше изменением, когда я увижу отладчик, он будет выглядеть так.

Здесь я выбрал JAM-Stack-Demo в качестве конфигурации и теперь отлаживаю приложение. Это гарантирует, что и клиент, и код функций запускаются из одного и того же окна, и я также могу отлаживать одну и ту же параллель.

Расширить приложение с помощью Storage, Functions, Cosmos Db:

Теперь мы приступаем к развертыванию нашего углового кода в хранилище Azure, а также перемещаем функции в облако. БД уже размещена в облаке. Тогда начнем с хранения.

Здесь вы можете нажать на значок стрелки вверх; то вы получите следующие параметры, как показано ниже.

Здесь я введу новую учетную запись хранения.

Затем я создам либо новую группу ресурсов, либо выберу существующую. Я выберу существующую и после этого выберу нужную локацию из списка.

При этом начнется развертывание необходимых ресурсов, как показано ниже.

После этого я получу всплывающее окно, подобное этому.

Здесь я нажму на первую кнопку. Затем я получу второе всплывающее окно, как показано ниже.

  • Нажмите «Ввод».
  • Введите имя файла Index.html во втором всплывающем окне.
  • нажмите Ввод

После этого я получу всплывающее окно для выбора папки, из которой мы хотели бы развернуть на Azure. Следовательно, в данном случае это уже просканированная папка dist. Поэтому будем выбирать такие же.

После того, как мы говорим «ОК», мы видим в нижней части редактора, что развертывание находится в процессе.

После успешного завершения мы можем увидеть сообщение об успехе в нижней части экрана.

Теперь я могу перейти на сайт https://ngjamstack.z30.web.core.windows.net/. Как только мы просмотрим то же самое, мы увидим тот же результат, как показано ниже.

Далее, давайте продолжим и развернем функции. Но перед этим я настрою свой файл proxies.json.

Итак, здесь я говорю, что все, что приходит из /index/*, должно быть проксировано на новый URL-адрес, который является не чем иным, как uri учетной записи хранения. Теперь давайте продолжим и развернем приложение-функцию. Здесь я подойду и выберу клавишу со стрелкой вверх.

Он запросит имя.

Как только я выберу глобально уникальное имя и нажму Enter, начнется развертывание ресурсов в Azure.

В случае успеха вы получите сообщение с подтверждением, подобное этому.

Теперь здесь мы нажмем на настройки загрузки. Это возьмет локальный файл настроек и применит изменения в функциях Azure. После успешного завершения вы увидите вкладку настроек; Кроме того, он имеет все значения. По умолчанию он будет в скрытом состоянии, но как только вы нажмете на него, отобразится значение, как показано ниже.

Теперь, когда приложение функций развернуто, давайте возьмем URL-адрес из

Поэтому после просмотра https://ngjamstack.azurewebsites.net/api/movies мы увидим те же данные, поступающие из azure.

Итак, мы сделали совсем немного до сих пор. У нас есть приложение для хранения, запущенное и работающее, у нас есть клиентское приложение, работающее и работающее. Нам также необходимо обновить значение среды (https://ngjamstack.azurewebsites.net/api/movies).

После этого нам нужно собрать приложение и снова развернуть его.

Это подскажет

Здесь нам нужно нажать кнопку удалить и развернуть. Он начнет развертывание новой сборки. Точно так же мы развернем функцию app.

Как только это будет сделано, мы увидим, что наше приложение работает нормально. Мы также можем выполнить настройку CI / CD с тем же.

Настройка CI/CD:

Теперь вы можете приступить к настройке CI/CD из самого Azure Marketplace, перейдя по следующей ссылке https://github.com/marketplace/azure-pipelines . Эта ссылка даст вам

На этой странице вы можете настроить свои затраты, как показано ниже.

У меня уже настроен бесплатный план. Поэтому, что я могу здесь сделать, так это настроить конвейер сборки для моего проекта, как показано ниже. Также там же мы можем щелкнуть ссылку Azure Pipelines. Это приведет нас на страницу ниже https://azure.microsoft.com/en-us/services/devops/pipelines/?nav=min

Здесь у меня есть два варианта. Я выберу второй, так как у меня уже есть код в моем репозитории github. Таким образом, я могу напрямую связать свое репо с конвейером. Это приведет меня к моей учетной записи Azure DevOps https://dev.azure.com/rahulsahay19. Здесь я создам новый проект.

Я сделал видимость общедоступной по умолчанию, так что вы, ребята, тоже можете взглянуть на проект пайплайна. Как только он будет создан, он представит панель инструментов, как показано ниже.

Теперь в меню слева я могу щелкнуть ссылку Repos,

Если я начинаю с нуля, то, вероятно, я клонирую эту ссылку в коде, а затем начну. Но, так как у меня уже есть репозиторий на git. Следовательно, мне просто нужно вытащить это в моей учетной записи VSTS, и это через кнопку импорта.

Как только я нажму кнопку импорта, начнется процесс импорта, как показано ниже.

Как только это будет сделано, это будет выглядеть так

Теперь, на этом этапе, я могу продолжить и настроить процесс сборки. Здесь мне нужно настроить две сборки; еще одно функциональное приложение и еще одно для приложения для хранения. Поэтому я нажму «Настроить сборку», и я попаду на страницу ниже.

Здесь я сначала создам конвейер для углового приложения на основе узла js. Поэтому я выбрал вышеуказанный шаблон. Вы перейдете на вкладку «Обзор», как показано ниже:

Просмотрев то же самое, вы можете продолжить и нажать кнопку «Сохранить и запустить». Это файл сборки на основе YML. Вы можете сделать то же самое с помощью классического редактора. Для лазурной функции я сделаю то же самое, используя классический редактор. Вы можете выбрать любой из этих двух способов.

Введите необходимую информацию, а затем нажмите кнопку «Сохранить и запустить». Он запустит конвейер, например

И если все пойдет хорошо, то это будет выглядеть так

Выше вы можете добавить в него больше задач для оптимизации сборки и это зависит от сценариев разработчика. Я только что сбросил базовый без каких-либо правок. Точно так же для приложения функции Azure вы можете создать то же, что показано ниже.

При выборе среднего он упадет ниже предварительно определенных задач, необходимых для конвейера.

Здесь единственное, что я изменил, — это путь к приложению функций, а не к корневому, как показано ниже.

Вы можете дать этому конвейеру какое-нибудь короткое подходящее имя по своему желанию или оставить его таким. Теперь я подойду и скажу: сохраните и поставьте в очередь.

Вы можете ввести необходимую информацию и нажать кнопку Сохранить и поставить в очередь. Это запустит сборку и очередь, как показано ниже.

После того, как вы нажмете на номер сборки, вы перейдете на страницу сборки.

После этого я также включил триггеры, как показано ниже.

Это гарантирует, что сборка будет автоматически запущена, если кто-то нажмет новую сборку.

В конце сборки мы создаем несколько артефактов, которые нам нужно развернуть в разных средах. И чтобы выбрать артефакты, нам нужен конвейер выпуска. Поэтому давайте продолжим и создадим его.

Мы можем создать по ссылке Новый конвейер, и это приведет меня на страницу ниже.

Здесь я выберу выделенный и нажму «Применить».

Здесь я дал название «Приложение-функция развертывания». Вы можете дать любое имя, которое вам нравится, но описательное имя имеет смысл. Затем я выбрал необходимые настройки, как показано ниже.

Я также добавил необходимые артефакты и, следовательно, установил триггер, как показано ниже:

Затем я создал пустую задачу, а затем сначала добавил «Извлечь файлы» с настройками ниже.

Это нужно для того, чтобы вытащить угловые артефакты из удаленного местоположения. Затем я добавил еще одну задачу для копирования файлов Azure с необходимыми настройками, как показано ниже.

Теперь мы можем продолжить и создать релиз со следующими настройками.

Здесь я продолжу и нажму кнопку «Создать». Это покажет ниже сообщение

Теперь, когда я нажимаю на ссылку выпуска, я попадаю на страницу выпуска ниже.

Здесь я могу продолжить и нажать кнопку развертывания.

Теперь я нажму «Развернуть несколько». Здесь я выберу все необходимые зависимости и нажму на развертывание.

Как только я нажму на то же самое, оно будет поставлено в очередь, как показано ниже.

Как только это будет завершено, это будет похоже на

Здесь вы можете видеть, что одно развертывание не удалось. Как только вы нажмете на нее, вы можете легко узнать причину.

Это произошло из-за того, что мое функциональное приложение на портале каким-то образом было удалено. Поэтому я снова развернул приложение-функцию. В результате он произвел ниже выхода

Заключительные примечания. В этом посте мы рассмотрели множество вопросов, начиная с JAM-Stack и заканчивая функциями Azure и хранилищем Azure. Затем отладка выполняется локально. После этого мы развернули то же самое в облаке, а затем настроили полный конвейер CI/CD для автоматизации наших сборок. Надеюсь, вам понравилось читать эту статью о JAMSTACK. Спасибо, что присоединились ко мне.

Примечание. Я запустил весь этот процесс в пробной версии Azure. Может случиться так, что через какое-то время ресурсы будут недоступны. На всякий случай, если у вас есть какие-либо вопросы относительно архитектуры или использования, задайте их мне @ https://twitter.com/rahulsahay19.

Мы всегда ищем талантливых разработчиков, которым нравится работать над интересными новыми технологиями.

Спасибо,

Рахул Сахай