メインコンテンツまでスキップ

Azure Static Web AppsでAngularのルーティングが404になる

こんにちは。b0cchiです。
体重と日々のやる気は反比例するということを実感している今日この頃です。
さて、本日はAzure Static Web AppsでAngularのルーティングが404になる問題が発生しました。
おそらくAngularに限らず、ReactやVueなどのSPA全般で同様の問題が発生するかと思いますので、解決方法を共有します。

現象​

何も考えずに、Angularの成果物をAzure Static Web Appsにデプロイしたところ、/にアクセスすると表示されるのですが、/hogeにアクセスすると404が返ってきました（下図）。
img alt

もちろんローカルの開発環境では、ばっちりルーティングされるのにも関わらずです（下図）。
img alt

この原因はルーティング（っぽい動き）をクライアント側で行っているためなんですが、じゃぁAzure Static Web Appではどうやるのかってことですね。

解決方法​

結論としては、package.jsonと同階層にstaticwebapp.config.jsonというファイルを生成して、以下の記述をしたら解決します。

staticwebapp.config.json
{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

上記のファイルを追加して、再度デプロイ後に、ブラウザでアクセスすると下図のように開発環境と同じようにルーティングがされて表示されていることがわかります。
img alt

まとめ​

SPAをAzure Static Web Appsにデプロイする際は、staticwebapp.config.jsonを生成して、navigationFallbackを設定しましょう。
最初はstatic web apps用にルーティングファイル作らないかんのか？と思いましたが、全然そんなことはなくて、ちゃ〜んと用意してありました。

蛇足​

何かに似てるな〜と思ったら、nginxの設定にそっくりですね。
つまり、nginxと同様のことをAzure Static Web Appsがやってくれるって感じでしょうか。