Azure Static Web AppsでホスティングされているSPAで、リロードによる404エラーを回避したい
waiMicrosoftが丁寧にドキュメント化してくれている。
SPAあるある問題である、トップページ以外でリロードすると404エラーが発生する件に関して、それをAzure Static Web Appsの構成で回避する方法です。
備忘録として残しておく。
対処方法
1.構成ファイルの作成
staticwebapp.config.jsonという構成ファイルを作成する。
作成箇所としては、GitHub Actions、もしくはAzure PipelinesのCI/CDパイプライン内においてapp_locationプロパティとして定義されるディレクトリに配置するように、とドキュメントに記載がある。
このapp_locationプロパティは、フロントエンドアプリケーションのソースコードが含まれている箇所を指すとのこと。
自分の場合は、プロジェクトのルートディレクトリ直下に作成した。
├─ project_root_dir
├─ node_modules
├─ src
├─ package.json
├─ staticwebapp.config.json ← これ
└─ ...
2.構成ファイルを修正
前の手順で作成した構成ファイルの中身を記述する。
非常に簡潔な記述で済む。
{
"navigationFallback": {
"rewrite": "/index.html"
}
}
実際にデプロイされている静的ファイルに到達できないリクエストに対して、デフォルトで返却するファイルを指定するもの（と、解釈している）。
3.デプロイ
あとは実際に環境に本構成を反映させるだけ。GitHub ActionsやAzure Pipelines等でCI/CDパイプラインを回しましょう。
反映された後に自分のSPAの/aboutページでリロードしたところ、404エラーにならず正常に画面を表示することができた。
その他
今回トピックに挙がったnavigationFallbackプロパティだが、さらに細かな制御も可能であるとのこと。
冒頭に記載したドキュメントでは
・/imageディレクトリ内の画像ファイル（pngファイル、jpgファイル、gifファイル）
・/cssディレクトリ内の任意のファイル
のいずれかである場合、定めたルールが適用されない。つまり除外ルールを設けている。
東日本リージョンではまだデプロイできないけど、Azure Static Web Appsは本当に便利だなあ。