这是一个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静态Web Apps服务具有宽敞的免费层，足以容纳许多类型的个人项目。
在GitHub帐户中拥有存储库并准备好Azure订阅后，请使用Azure静态Web应用程序扩展为Visual Studio Code或Azure Portal来创建SWA资源。
- 或者 - 
使用以下参数：
会发生什么：
.github/workflows文件夹中创建一个github操作文件。类似于原始存储库中的一个。您现在准备探索Azure静态Web应用程序功能。
main分支（或您在资源创建期间指定的分支）。
请注意，这是一个服务工作者驱动的应用程序，因此您将看到重新加载页面的提示。
您可以在将其合并到主要分支之前，在预生产环境中查看拉的请求。
git checkout -b new-feature在应用程序中进行任何代码更改。在第一页上可以清晰可见的内容，例如更改背景颜色。
git add .
git commit -m " New feature "
git push origin new-feature转到GitHub回购页面，然后从分支机构创建一个新的拉请请求。
转到存储库的操作页面，以确保工作流程正在运行。
完成后，您将有一个新版本的网站部署到Azure到新的URL。您可以从Azure上的Workflow输出或环境卡上的Azure门户中获取此URL。 GitHub Actions Bot还将将此URL发布到您的拉请请求评论中。
现在，您可以对新版本进行各种测试。
如果新版本看起来不错，并且您将此拉的请求合并到主（SWA跟踪）分支，则工作流将自动将新版本部署到此轨道上的分支和删除登台环境中。
请注意，即使您的github存储库是私人的，您的URL目前都可以通过其URL公开访问您的应用程序。
？文档
您可以使用Azure功能为静态Web应用程序构建自己的API。最简单的选项是使用托管功能选项：您在api目录中创建的所有Azure函数将自动部署到SWA。在此项目中，我们使用feedback功能来收集有关检测到的正确或错误的BPM的统计信息。
为了测试它，即使没有音乐播放，您也可以将“硬编码” BPM值传递给应用程序：使用BPM参数。如何测试它：
https://bpmtech.no/api/feedback端点及其响应。如何创建新的API函数：
？文档
Azure SWA支持自定义路由，使您可以：
您可以在staticwebapp.config.json中配置规则，您可以将其放置在repo的应用程序文件夹中的任何位置，因此不需要将其放入输出（public）文件夹中）。
如何测试它：
请注意，托管申请由服务工作者控制。因此，在第一个负载后，路由可能看起来并不像上面所述。要在没有服务工作者的情况下测试应用程序，请以私有/隐身模式开始新的浏览器会话。
？文档
在Azure静态Web应用程序的帮助下，您可以使用基于角色的访问控制（RBAC）保护应用程序资源。
设置身份验证：
anonymous （适用于所有用户）和authenticated （对于登录的人）。.auth是内置的，它是所谓的系统文件夹，其中包含一些有用的端点。administrator ），您可以在Azure门户中使用“角色管理”选项卡。单击“邀请”按钮，填写表格，然后单击“生成”。您将收到一个链接，以发送给用户接受该角色。 
您可以在“角色管理”选项卡中管理用户和角色。
x-ms-client-principal标头。演示：
authenticated用户，该规则可用于。您将被重定向到Twitter登录页面并征得同意。administrator 。？文档
在项目目录中，您可以运行：
npm run start在开发模式下运行该应用程序。
打开http：// localhost：3000在浏览器中查看。
如果您进行编辑，该页面将重新加载。
您还将在控制台中看到任何棉绒错误。
服务工作者不在开发环境中使用。
npm run build将应用程序构建到build文件夹中。
它正确地捆绑了在生产模式下进行反应，并优化构建以获得最佳性能。
构建被缩小，文件名包括哈希。
您的应用已准备好部署！
还将生成可生产的服务工作者。
Maxim Salnikov。如果您对该项目，PWA，Azure静态Web应用程序有任何疑问，请随时与我联系。
