これは3-in-1プロジェクトです。
bpmtech.no- DJの無料オンラインリアルタイムBPMカウンター
（クリックして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サブスクリプションも必要です。持っていない場合は、200ドルのクレジットでAzureサブスクリプションを無料で入手できます。
Azure Static Web Apps Serviceには、多くの種類の個人プロジェクトに十分な寛大な無料層があることに注意してください。
GitHubアカウントにリポジトリを使用し、Azureサブスクリプションの準備ができたら、Visual StudioコードまたはAzureポータル用のAzure Static Web Apps拡張機能を使用してSWAリソースを作成します。
- または - 
次のパラメーターを使用します。
何が起こるか：
.github/workflowsフォルダーで作成されます。元のリポジトリのものと同様です。これで、Azure Static Webアプリ機能を探索する準備ができました。
mainブランチ（またはリソース作成中に指定したブランチ）にコミットしてプッシュします。
これはサービスワーカー主導のアプリケーションであるため、ページをリロードするプロンプトが表示されます。
プリプロダクション環境のプルリクエストは、メインブランチにマージされる前に確認できます。
git checkout -b new-featureアプリケーションでコード変更を行います。最初のページではっきりと表示されるもの、たとえば背景色を変更します。
git add .
git commit -m " New feature "
git push origin new-featureGithub Repoページに移動し、ブランチから新しいプルリクエストを作成します。
リポジトリのアクションページに移動して、ワークフローが実行されていることを確認します。
完了すると、新しいURLにAzureに展開されたWebサイトの新しいバージョンがあります。このURLは、Azureのワークフロー出力から、または[環境上のAzureポータル]で取得できます。 GitHub Actions Botは、このURLをプルリクエストコメントに投稿します。
これで、新しいバージョンでさまざまなテストを実行できます。
新しいバージョンが見栄えがよく、このプル要求をメイン（SWAで追跡）ブランチにマージすると、ワークフローはこの追跡されたブランチとステージング環境を削除する新しいバージョンを自動的に展開します。
GitHubリポジトリがプライベートであっても、アプリケーションの段階的バージョンは現在、URLによって公開されています。
？ドキュメント
Azure関数を使用して、Static Webアプリ用に独自のAPIを構築できます。最も単純なオプションは、Managed Functions Optionを使用することです。API apiで作成するすべてのAzure関数は、SWAに自動的に展開されます。このプロジェクトでは、 feedback関数を使用して、検出された正しいBPMまたは間違ったBPMの統計を収集します。
音楽を再生しなくてもテストするには、「ハードコーディングされた」BPM値をアプリケーションに渡すことができます。BPMパラメーターを使用して。テストする方法：
https://bpmtech.no/api/feedbackエンドポイントとその応答に行われたネットワークの投稿リクエストを確認してください。新しいAPI関数を作成する方法：
？ドキュメント
Azure SWAは、次のことを可能にするカスタムルーティングをサポートしています。
staticwebapp.config.jsonでルールを構成します。これは、リポジトリのアプリケーションフォルダーにどこにでも配置できます。出力（パブリック）フォルダーに配置する必要はありません。
テストする方法：
ホストされたアプリケーションはサービスワーカーによって制御されていることに注意してください。したがって、最初の負荷の後、ルーティングは上記の説明とまったく同じように見えるかもしれません。サービスワーカーなしでアプリをテストするには、プライベート/シークレットモードで新しいブラウザセッションを開始します。
？ドキュメント
Azure Static Webアプリの助けを借りて、ロールベースのアクセス制御（RBAC）でアプリケーションリソースを保護できます。
認証のセットアップ：
anonymous （すべてのユーザー向け）とauthenticated （ログインしている人向け）。.authは組み込まれており、いくつかの便利なエンドポイントを含むシステムフォルダーと呼ばれます。administratorなど）を提供するには、Azureポータルで「ロール管理」タブを使用します。 [招待]ボタンをクリックし、フォームに入力し、[生成]をクリックします。役割を受け入れるためにユーザーに送信するリンクを受け取ります。 
[ロール管理]タブでユーザーと役割を管理できます。
x-ms-client-principalヘッダーを読み取ります。デモ：
authenticatedユーザーのみが利用可能になるように構成されています。 Twitterログインページにリダイレクトされ、同意を求められます。administratorを与える必要があります。？ドキュメント
プロジェクトディレクトリでは、実行できます。
npm run start開発モードでアプリを実行します。
http：// localhost：3000を開いて、ブラウザで表示します。
編集すると、ページがリロードされます。
また、コンソールに糸くずエラーも表示されます。
サービスワーカーは、開発環境で使用されていません。
npm run build buildフォルダーへの生産用のアプリをビルドします。
生産モードで反応することを正しくバンドルし、最高のパフォーマンスのためにビルドを最適化します。
ビルドが縮小され、ファイル名にはハッシュが含まれます。
あなたのアプリは展開する準備ができています！
生産対応のサービスワーカーも生成されます。
マキシム・サルニコフ。プロジェクト、PWA、Azure Static Webアプリについて質問がある場合は、お気軽にお問い合わせください。
