演習 - フォールバック ルートを作成する

  • 4 分

次は、ユーザーがアプリに正常に移動できるように、フォールバック ルートを作成します。

最新のコードをプルする

Azure Static Web Apps では、前の演習で選択したブランチに GitHub Actions ワークフロー ファイルが追加されました。 まず、Git からコードをプルして、このファイルを取得します。

これらの手順に従って、Git からコードの変更をプルします。

  1. Visual Studio で ShoppingList ソリューションを開きます。

  2. GitHub から最新の変更をプルします。

    Screenshot showing where to pull changes from GitHub.

これで、.github/workflows フォルダー内のワークフロー ファイルがエクスプローラーに表示されるようになります (このファイルは Visual Studio ソリューションには含まれません)。

ルーティング規則を作成する

アプリを発行する前に、フォールバック ルートを含むルーティング規則を作成します。

staticwebapp.config.json ファイルを作成する

ご自分のプロジェクトに、staticwebapp.config.json ファイルがまだない場合は、次の手順に従って作成します。

  1. Visual Studio で、Client プロジェクト内の wwwroot フォルダーを右クリックします。

  2. [追加] -> [新しい項目] を選択します。

  3. 使用可能なテンプレートから [JSON ファイル] を選択し、staticwebapp.config.json という名前を付けて、Enter キーを押します。

staticwebapp.config.json が作成されたら、次のフォールバック ルートを含めて更新します。

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/_framework/*", "/css/*"]
  }
}

Git に変更をプッシュする

ここで、変更を保存して、ローカルの Git リポジトリにコミットします。 次に、それらの変更を GitHub にプッシュします。

フォールバック ルートを試す

GitHub Actions ワークフローでは、アプリをビルドしてデプロイします。

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

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

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

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

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

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

アプリが再デプロイされた後、それを参照します。 URL に /products が表示されることに注目してください。 ここで、F5 キーを押してブラウザーを更新し、フォールバック ルートをテストします。 ルーティング規則のフォールバック ルートのおかげで、アプリは正常に再読み込みされるはずです。