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>