きちんと考えて開発しないと、簡単なところでハマる。
はろー、yukiです。
Next.jsで開発したWebアプリをAzure Static Web Appsにデプロイします。
デプロイにはGithub Actionsを使い、CI/CDも行います。
そんな中、下記のエラーが発生しました。
Finished building function app with Oryx Zipping Api Artifacts Done Zipping Api Artifacts Zipping App Artifacts Done Zipping App Artifacts Uploading build artifacts. Finished Upload. Polling on deployment. Status: InProgress. Time: 0.2525249(s) Status: InProgress. Time: 15.8519271(s) Status: InProgress. Time: 31.1154934(s) 略 Status: InProgress. Time: 572.1004748(s) Status: InProgress. Time: 587.3711448(s) Upload Timed Out. Unsure if deployment was successful or not.
ビルドまでは完了していますが、タイムアウトでデプロイに成功していない様子。
これに関して調べてみると、同じ悩みを持った方々もいましたが、いまいち解決していないようでした。
上記と同じ原因かは分かりませんが、僕の場合は単純なミス。
Next.jsでは、動的なWebサイトを開発できます。
動的な処理は様々にありますが、例えば、sitemapを動的にしていないでしょうか？
ということで、sitemap.tsでサイトマップを動的に作成している方は、下記を追記します。
export const dynamic = 'force-static';
これでサイトマップの作成は、静的になります。
dynamicオプションについて、公式は下記です。
あと、 async と await を使っていないでしょうか？
これらも動的なWebサイトに使うものなので、Azure SWAではエラーが発生します。
それでも動的なWebサイトで進めたい方は、Azure Functionsを使用することになります。
フロントエンドとバックエンドで分けて開発するのは、管理コストの面から、僕は避けました。
以上
