Azure Static Web App を計画する
最終的な目標は、Azure でアプリをホストすることです。 Azure Static Web Apps では、必要なすべての Azure リソースのプロビジョニングが自動的に行われます。
しかし、アプリをホストする前に、変更を行う際にアプリをビルドするための何かが必要になります。 これらの変更は、リポジトリへのコミットまた pull request によって行われる可能性があります。 Azure Static Web Apps の主な機能は、アプリケーションをビルドして発行するための GitHub Actions ワークフローを設定することです。
Azure Static Web Apps リソースを作成すると、GitHub Actions ワークフローが作成されます。 ワークフローはすぐにトリガーされ、アプリのビルドと発行が行われます。 また、リポジトリ内の監視対象ブランチに変更を加えるたびに、ワークフローがトリガーされます。
Azure Static Web Apps
Web アプリのデプロイには、次の 2 つの自動化された側面があります。 1 つ目は、アプリを構成する基になる Azure リソースのプロビジョニングです。 2 つ目は、アプリケーションをビルドして発行する GitHub Actions ワークフローです。
Azure Static Web Apps で Web にアプリを発行すると、Web アプリとスケーラブルな API のホストが高速になります。 また、GitHub Actions によって提供される統合ビルドおよびデプロイ ワークフローが得られます。
Static Web Apps インスタンスを GitHub に接続する
Azure Static Web Apps は、アプリケーションをホストするように設計されていますが、ソース コードは GitHub に存在しています。 Static Web Apps インスタンスを作成する場合は、GitHub にサインインし、アプリのコードが含まれているリポジトリを指定します。
また、アプリを自動的にビルドしてデプロイできるように、リポジトリ内に 3 つのフォルダー パスを指定する必要があります。
| 場所 | 場所の例 | 説明 | 必須 |
|---|---|---|---|
| アプリの場所 | クライアント | Web アプリのソースコードの場所 | はい |
| Output location (出力場所) | wwwroot | アプリのビルド成果物の場所 | いいえ |
| API の場所 | Api | API のソース コードの場所 | いいえ |
出力場所は、アプリケーションの発行ディレクトリへの相対パスです。 たとえば、ビルドされた資産を bin/<build profile>/<framework>/publish/wwwroot フォルダーに出力するアプリが Client にあるとします。 この場合、この場所の wwwroot を指定するだけで済みます。発行システムによってプレフィックスの残りの部分が処理されるためです。
GitHub Actions を使用してソース コードから静的資産へ
GitHub リポジトリには静的資産ではなくソース コードが格納されているため、発行する前にビルドする必要があります。
Static Web Apps インスタンスを作成すると、Azure によってリポジトリに GitHub Actions ワークフローが作成されます。 リリースを行う元となるブランチに対して変更内容をプッシュしたり、pull request を作成したりするたびに、ワークフローによってアプリがビルドされます。 このプロセスにより、ソース コードが Azure が扱う静的資産に変換されます。 ビルドが完了すると、アクションによって資産がデプロイされます。
その GitHub アクションはリポジトリの .github/workflows フォルダーに追加されます。 必要に応じて、このファイルを確認または変更できます。 リソースの作成時に入力した設定は、GitHub アクションのファイルに保存されます。
Azure Functions と統合された API
アプリに API が必要な場合は、それをリポジトリ内の Azure Functions プロジェクトとして実装できます。そして Static Web Apps インスタンスがそれを自動的にデプロイしてホストします。 アプリをビルドしてデプロイする GitHub Actions ワークフローが、"API の場所" パスで指定されたフォルダーの名前を使用してリポジトリ内の API を見つけます。
API がない場合はどうすればよいでしょうか。 心配はありません。 Azure Static Web Apps が指定されたフォルダー内で API を発見できない場合、API の発行は行いませんが、アプリの発行は行います。
次のステップ
Web アプリを Azure Static Web Apps に発行するには、何が必要でしょうか? 必要なものは GitHub リポジトリのアプリのみです。