演習 - GitHub Actions を使用して API を発行する

完了

Web アプリと API の両方がローカルで実行されています。 次は、Web アプリと API を Azure Static Web Apps に発行します。

GitHub に変更をプッシュする

前の演習では API を変更しました。 次に、それらの変更を api ブランチにコミットし、GitHub にプッシュします。

pull request を作成する

api ブランチを GitHub にプッシュしました。 次は、GitHub アクションで、Web アプリと API をプレビュー URL で発行する必要があります。 したがって、次の手順では、main ブランチに対する pull request を作成します。

  1. ブラウザーを開きます。

  2. リポジトリに移動します。

    https://github.com/<YOUR_GITHUB_USERNAME>/my-static-blazor-app

  3. [Pull requests] リンクを選択します。

  4. [New pull request]\(新しい pull request\) を選択します。

  5. [base] ドロップダウン リストから [main] ブランチを選択します。

  6. [compare] ドロップダウン リストから[api] ブランチを選択します。

  7. [pull request の作成] を選択します。

  8. [Create pull request]\(pull Request の作成\) を再度選択します。

GitHub アクションがトリガーされるようになりました。

GitHub アクションのビルドと発行を監視する

ブラウザーでリポジトリを開いたまま、GitHub アクションの進行状況を監視することができます。 進行状況を表示するには、これらの手順に従います。

  1. [Actions] メニューを選択します。

  2. [Workflows](ワークフロー) メニューで、[Azure Static Web Apps CI/CD] ワークフロー項目を選択します。

  3. 右側のアクションの実行の最新 (一番上) のリンクを選択します。

  4. [Build and Deploy Job](ビルドおよびデプロイ ジョブ) リンクを選択します。

Web アプリと API をビルドして発行するときに、GitHub アクションの進行状況を確認することができます。

プレビュー URL を参照する

GitHub アクションが正常に完了したら、実行中のアプリをブラウザーで表示できます。

  1. [Pull requests] メニューを選択します。

  2. pull request を選択します。

  3. [Azure Static Web Apps: Your stage site is ready! Visit it here] というメッセージに続いて表示されるリンクを選択します。

プレビュー URL には、後に数字が続くハイフンが含まれていることに注目してください。 この数字は、作成した pull request の pull request 番号と一致します。 作成するすべての pull request について、一意の反復可能なプレビュー URL を取得します。 また、リージョンはプレビュー URL の形成にも使用されます。

次のステップ

お疲れさまでした。これで、Web アプリと API で最初の Azure Static Web Apps インスタンスが作成されました。 作成した pull request をマージすると、Azure Static Web Apps によって、変更が運用アプリに自動的にデプロイされます。