フォールバック ルートを構成する

• 2 分

ショッピング リストの製品の一覧を表示するフロントエンド アプリケーションには、クライアント側のルート /products があります。 [製品] リンクを選択してアプリの /products に移動すると、ブラウザーのアドレス バーで /products にいることが確認されます。 このページでブラウザーを更新するときに、アプリで製品の更新と表示を再度行う必要があります。 しかし、フォールバック ルートがない場合は、ページが見つからないことを示す 404 エラーが表示されます。

ページを更新すると 404 エラーが表示されます。これは、/products を提供するために、ブラウザーからホスティング プラットフォームに要求が送信されるためです。 しかし、products という名前のサーバーに、提供するページはありません。

幸い、この問題はフォールバック ルートを作成することで簡単に解決できます。 フォールバック ルートは、一致しないすべてのページ要求をサーバーに照合するルートです。

フォールバック ルートを構成する

Azure Static Web Apps は、アプリのソース フォルダーにあるオプションの staticwebapp.config.json ファイルに定義されているカスタム ルーティング規則をサポートしています。 ナビゲーション フォールバック ルートは、navigationFallback オブジェクトに定義します。 一般的なフォールバック ルートの構成は、次の例のようになります。

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

設定	値	説明
rewrite	/index.html	ルートが他のファイルと一致しなかった場合に提供されるファイル。
除外	["/_framework/*", "/css/*"]	フォールバック ルーティングで無視するパス。

ナビゲーション フォールバック規則は、staticwebapp.config.json ファイルに表示されるすべてのルーティング規則の後に適用されます。

ルート ファイルの場所

staticwebapp.config.json の場所に推奨されるのは、ワークフロー ファイルで app_location として設定したフォルダーです。 ただし、このファイルは、アプリケーションのソース コード フォルダー内の任意の場所に配置できます。