Это проект 3-в-1:
Bpmtech.no - Бесплатный онлайн -счетчик BPM в реальном времени для DJ
(Нажмите, чтобы посмотреть на YouTube)
git clone https://github.com/webmaxru/bpm-counter.git
cd bpm-counter
npm install
# Installing tools for Static Web Apps and Azure Functions
npm install -g @azure/static-web-apps-cli
npm install -g azure-functions-core-tools@3 --unsafe-perm true # Instead of CRA's "npm start" we use SWA CLI's command to start everything at once
swa start http://localhost:3000 --run " npm start " --api-location ./apiОткройте http: // localhost: 4280 в вашем браузере.
Чтобы развернуть этот проект в Azure, вам необходимо разобраться с этим репо в своей собственной учетной записи GitHub. Вам также понадобится подписка на Azure. Если у вас его нет, вы можете бесплатно получить подписку на Azure бесплатно с кредитом 200 долларов.
Обратите внимание, что Azure Static Web Apps Service имеет щедрый бесплатный уровень, который достаточно для многих типов личных проектов.
После того, как у вас есть репо в своей учетной записи Github и готовая подписка Azure, используйте расширение Azure Static Web Apps для кода Visual Studio или портала Azure для создания ресурса SWA.
- или - 
Используйте следующие параметры:
Что произойдет:
.github/workflows в вашем репо. Подобно тому, что в оригинальном репо.Теперь вы готовы исследовать функции Azure Static Web Apps.
main ветвь (или филиал, который вы указали во время создания ресурсов).
Обратите внимание, что это приложение, управляемое обслуживающими работниками, поэтому вы увидите приглашение к перезагрузке страницы.
Вы можете просмотреть запросы на привлечение в предварительном производстве, прежде чем они будут объединены в основную филиал.
git checkout -b new-featureСделайте любое изменение кода в приложении. Что -то, что будет четко видно на первой странице, например, изменить цвет фона.
git add .
git commit -m " New feature "
git push origin new-featureПерейдите к вам на странице Github Repo и создайте новый запрос на привлечение из филиала.
Перейдите на страницу действий вашего репо, чтобы убедиться, что рабочий процесс работает.
По завершении у вас будет новая версия веб -сайта, развернутую в Azure на новый URL. Вы можете получить этот URL либо с вывода рабочего процесса на Azure, либо на вкладке Azure на средах. GitHub Actions Bot также опубликует этот URL -адрес вашему запросу на привлечение.
Теперь вы можете запустить различные тесты в своей новой версии.
Если новая версия выглядит хорошо, и вы объединяете этот запрос на притяжение в основную (отслеживаемой SWA) филиал, рабочий процесс автоматически развернется новой версией в эту отслеживаемую филиал и удаляет среду постановки.
Обратите внимание, что поставленные версии вашей заявки в настоящее время доступны публично по их URL -адресу, даже если ваш репозиторий GitHub является частным.
? Документация
Вы можете использовать функции Azure для создания собственного API для вашего статического веб -приложения. Самый простой вариант - это параметр «Управляемые функции: все функции Azure», которые вы создаете в Directory api , будут автоматически развернуты в SWA. В этом проекте мы используем функцию feedback для сбора статистики по правильным или неправильным обнаруженным BPMS.
Чтобы проверить его даже без воспроизведения музыки, вы можете передать значение «жестко -кодированному» приложению: с помощью параметра BPM. Как это проверить:
https://bpmtech.no/api/feedback Endpoint и ее ответ.Как создать новую функцию API:
? Документация
Azure SWA поддерживает пользовательскую маршрутизацию, которая позволяет:
Вы настраиваете правила в staticwebapp.config.json, которые вы можете поместить в любом месте в папке приложений репо, нет необходимости поместить его в папку Output (public)).
Как это проверить:
Обратите внимание, что размещенное приложение контролируется работником службы. Таким образом, после первой нагрузки маршрутизация может выглядеть не совсем как объясненная выше. Чтобы проверить приложение без работника службы, запустите новую сеанс браузера в частном/инкогнито -режиме.
? Документация
С помощью Azure статических веб-приложений вы можете защитить ресурсы приложения с помощью контроля доступа на основе ролей (RBAC).
Настройка аутентификации:
anonymous (для всех пользователей) и authenticated (для тех, кто вошел в систему)..auth в вашем проекте Azure SWA встроен, она так называется системной папкой , которая содержит некоторые полезные конечные точки.administrator ), вы используете вкладку «Управление ролями» на портале Azure. Нажмите кнопку «Пригласить», заполните форму и нажмите «Создать». Вы получите ссылку для отправки пользователю, чтобы принять роль. 
Вы можете управлять пользователями и ролями в вкладке «Управление ролями».
x-ms-client-principal в запросе.Демонстрация:
authenticated пользователей по этому правилу. Вы будете перенаправлены на страницу входа в Твиттер и попросите согласия.administrator роли, как описано выше.? Документация
В каталоге проекта вы можете запустить:
npm run start Запускает приложение в режиме разработки.
Откройте http: // localhost: 3000, чтобы просмотреть его в браузере.
Страница будет перезагружаться, если вы сделаете изменения.
Вы также увидите любые ошибки ворса в консоли.
Сервисный работник не используется в среде разработки.
npm run build Создает приложение для производства в папку build .
Он правильно реагирует в производственном режиме и оптимизирует сборку для наилучшей производительности.
Сборка занижена, а имена файлов включают хэши.
Ваше приложение готово к развертыванию!
Служитель, готовый к производству, также будет создан.
Максим Сальников. Не стесняйтесь обращаться ко мне, если у вас есть какие -либо вопросы о проекте, PWA, Azure Static Web Apps.
