前へ

次へ

演習 - Azure Static Web アプリを作成する

完了

この演習では、アプリケーションを自動的に構築して発行する GitHub アクションを含む Azure Static Web Apps インスタンスを作成します。

Static Web アプリを作成する

GitHub リポジトリを作成したので、Azure portal から Static Web Apps インスタンスを作成できるようになりました。

このモジュールでは、演習を完了するのに使用できる無料の一時的な Azure サブスクリプションを Azure サンドボックスを使用して提供しています。 続ける前に、このページの上部にあるサンドボックスをアクティブにしたことを確認してください。

1. Azure portal にサインインします。サンドボックスをアクティブにしたときと同じアカウントを使用してサインインします。

2. Azure の [ホーム] ページにある [Azure サービス] で、[リソースの作成] を選択します。 [リソースの作成] ウィンドウが表示されます。

3. マーケットプレースの検索ボックスで、「静的 Web アプリ」を検索して選択します。 [静的 Web アプリ] ウィンドウが表示されます。

4. [作成] を選択します。 [静的 Web アプリの作成] が表示されます。 新しいアプリを構成し、GitHub リポジトリにリンクします。

5. [基本] タブで、各設定に対して次の値を入力します。

   設定	値
   プロジェクトの詳細
   サブスクリプション	コンシェルジェ サブスクリプション
   リソース グループ	[サンドボックス リソース グループ名]
   Static Web App details (静的 Web アプリの詳細)
   名前	アプリの名前を指定します。 有効な文字は a-z (大文字と小文字は区別されません)、0-9、および - です
   ホスティング プラン
   アプリケーションの価格レベル	[無料] を選択します
   Azure Functions and staging details (Azure Functions とステージングの詳細)
   Azure Functions API のリージョンとステージング環境	最も近いリージョンを選択します
   展開の詳細
   source	[GitHub] を選択します
   GitHub アカウント	[Sign in with GitHub](GitHub アカウントでサインイン) を選択します。 [Authorize Azure Static Web Apps](Azure Static Web Apps の承認) ウィンドウが表示されます。 [Authorize Azure-App-Service-Static-Web-Apps] を選択します。 パスワードを入力します。
   Organization	リポジトリを作成した組織を選択します
   リポジトリ	my-static-blazor-app
   [Branch]\(ブランチ)	メイン
   ビルドの詳細
   Build Presets (ビルドのプリセット)	Blazor
   アプリの場所	クライアント
   Api location (Api の場所)	Api
   Output location (出力場所)	wwwroot

6. [確認と作成]>[作成] の順に選択します。

7. デプロイが完了したら、[リソースに移動] を選択します。 [Static Web App] ウィンドウが表示されます。

GitHub アクションを確認する

この段階では、Static Web Apps インスタンスが Azure に作成されていますが、アプリはまだデプロイされていません。 Azure によってリポジトリに作成される GitHub アクションは自動的に実行され、アプリの最初の構築とデプロイがトリガーされますが、完了するまでに数分かかります。

次のリンクを選択して GitHub リポジトリの [Actions] ページに移動すると、ビルドおよびデプロイ アクションの状態を確認できます。

完了したら、次の手順を実行します。

1. [Azure Static Web Apps CI/CD] を選択します。

2. 「ci: add Azure Static Web Apps workflow file」というタイトルのコミットを選択します。

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

ここから、ビルド時にアプリの進行状況を確認できます。

Web サイトを表示する

GitHub アクションによって Web アプリのビルドと発行が完了すると、実行中のアプリを参照して確認できるようになります。

Azure portal の [URL] リンクを選択して、ブラウザーでアプリにアクセスします。

これでアプリはグローバルに使用できるようになりましたが、まだデータや API がないため、引き続き "データを読み込んでいます" と表示されます。 次のセクションで、Web アプリの API を追加します。

お疲れさまでした。 初めてのアプリを Azure Static Web Apps にデプロイしました。

Note

アプリがまだビルドおよびデプロイされていないことを示す Web ページが表示されても心配しないでください。 しばらくしてからブラウザーを再更新してみてください。 Azure Static Web アプリが作成されると、GitHub アクションによって自動的に実行されます。 そのため、スプラッシュ ページが表示されても、アプリはデプロイ中です。

次のステップ

アプリにショッピング リスト用の API がありません。 次に、静的資産と共に Azure に発行するアプリに Azure Functions API を追加する方法を確認します。

続行