Azure Static Web Appsでの404エラー解消法：クライアントサイドルーティング設定

はじめに

ローカル環境ではパス遷移が正常に動作していたが、Static Web Appsにデプロイしたアプリでは、ブラウザのリロードやURLを直接入力すると404エラーが返されてしまいました。

原因

この問題は、Static Web Appsがデフォルトではクライアントサイドのルーティングをサポートしていないために発生します。

シングルページアプリケーション（SPA）では、ReactやVueなどを使用してクライアント側でページ遷移を管理します。このため、ボタンを押してページ遷移する場合はクライアント側で完結するためエラーが出ません。しかし、ブラウザリロードやURLを直接入力するとサーバーにリクエストが送信されるため、サーバーが適切なHTMLファイルを返さないと404エラーが発生します。

引用：
Azure Static Web Apps についてよく寄せられる質問

Static Web Apps からクライアント側ルートを要求した場合、そのルートはアプリのデプロイ済みアセットに存在しないため、404 エラーが返されます。

解決策

ドキュメント：Azure Static Web Apps を構成する

Static Web Appsの構成ファイル（staticwebapp.config.json）にnavigationFallbackセクションを追加し、すべてのクライアントサイドルートに対してindex.htmlを返すように設定します。これにより、ブラウザのリロードやURLへの直接アクセスでもクライアントサイドのルーティングが正しく動作するようになります。

staticwebapp.config.jsonの例

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/img/*.{png,jpg,gif}", "/css/*"]
  }
}

• クライアントサイドのルートに直接アクセスした場合、サーバーはindex.htmlを返し、クライアントサイドのルーティングが適切に機能します。
• /images/logo.pngのような実際の静的ファイルは通常通り返されます。