Next.js で作成した静的サイトを Azure App Service の Web Apps でホストする場合カスタム Web.config が要るかもしれない件

Next.js で作成した静的サイトを Azure App Service の Web Apps でホストしている。Static Web Apps でないのは、ZipDeploy できなかったから。本業では GitHub や Azure DevOps が使えないので…。

Web Apps で素直にホストした場合、トップページからリンクをたどるぶんには問題ないけど、ブラウザのアドレスバーに URL 入力して直接移動したら、次のエラーが表示される。

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

リクエストをトップページ(index.html)に流すために、カスタム Web.config を一緒にデプロイすることで対策できた。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <webSocket enabled="false" />
    <httpErrors errorMode="Custom" defaultResponseMode="ExecuteURL">
      <remove statusCode="404" subStatusCode="-1" />
      <error statusCode="404" path="/index.html" responseMode="ExecuteURL" />
    </httpErrors>
    <rewrite>
      <rules>
        <rule name="Next Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>