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

  • 5 分

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

Static Web アプリを作成する

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

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

  1. Azure portal にサインインし、サンドボックスをアクティブ化する場合と同じアカウントを使用してサインインしていることを確認します。

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

  3. Marketplace の検索ボックスで、Static Web App を検索して選択します。 [ 静的 Web アプリ ] ウィンドウが表示されます。

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

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

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

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

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

GitHub アクションを確認する

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

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

GitHub Actions ワークフローの進行状況を参照して表示する方法を示すスクリーンショット。

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

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

  2. " ci: Azure Static Web Apps ワークフロー ファイルの追加" というタイトルのコミットを選択します。

  3. [Build and Deploy Job]\(ビルドと配置ジョブ\) リンクを選択します

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

Web サイトを表示する

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

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

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

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

注

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

次のステップ

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