1. Azure Static Web Appsで404エラー

Azure Static Web Appsの上にReactを用いてSPAを作成してみたいと考え、Microsoft Learnチュートリアルのコードを参考に、react-router-domを用いて複数ページを作成してみました。

Azure Static Web Apps を使用して Angular、React、Svelte、または Vue の JavaScript アプリを発行する

ローカル環境ではRouteタグのpathに記載する先にjs/htmlファイルがあれば簡単にWebページ遷移を行う事ができたのですが、Azure Static Web Apps上に公開したとたん、404 Not Foundに見舞われました。

2. Azure Static Web AppsのルーティングにはJSONが必要

Azure Static Web Appsのドキュメントを確認していくと、追加でReactの場合は、JSONファイルをpublicフォルダに格納し、htmlファイル等と一緒にアップロードしておかないと正しくルーティングされない事が公式ドキュメントに記載されていました。

Azure Static Web Apps プレビューでのルート

コードは以下の様な感じで準備すると動作します。

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Home from './pages/Home'
import Product from './pages/Product'

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/product" component={Product} />
      </Switch>
    </Router>
  );
}

export default App;

{
    "routes": [
      {
        "route": "/product",
        "serve": "/index.html",
        "statusCode": 200
      }
    ],
    "defaultHeaders": {
      "content-security-policy": "default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'"
    },
    "mimeTypes": {
        "custom": "text/html"
    }
}

基本的にはrouteにルーティング先となるURLを指定するだけで問題はないのですが、Reactの場合は、基本的に実態となるhtmlファイルがindex.htmlであり、その中のdiv要素の一つをdocument.getElementByIdで取得し内容を置き換えています。
ですので、serveの指定にindex.htmlを指定する必要があります。

上記のJSONを作成し、Azure上にアップロードすれば、ページ遷移が問題なく実施できるようになります。