🚀
Azure Static Web Apps に Next.js アプリをデプロイしてみた
はじめに
Next.js アプリを Azure Static Web Apps にデプロイする際に、いくつかのトラブルに遭遇したので、解決方法と合わせて手順をまとめました。これから Next.js を Azure Static Web Apps にデプロイしようと考えている方や、デプロイ時にエラーで詰まっている方の参考になれば幸いです。
技術構成
- Node.js: 20.19.3
- Next.js(AppRouter): 15.5.3
- Azure Static Web Apps
デプロイ手順
Microsoft の公式ドキュメント「Azure Static Web Apps に Next.js (ハイブリッド) アプリをデプロイする」を参考にデプロイを進めました。
基本的な手順は公式ドキュメント通りですが、実際にデプロイを進める際にいくつかの問題に遭遇したので、その解決方法を紹介します。
遭遇した問題と解決方法
1. Upload time がタイムアウトする
問題：
デプロイ時に以下のようなエラーが発生し、アップロードがタイムアウトしてしまう。
解決方法：
以下の対処法を試してください：
-
スタンドアロン機能の有効化(next.config.js)
module.exports ={ output:"standalone", } -
静的ファイルをスタンドアロン出力にコピー(package.json)
{ ... "scripts": { ... "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/" ... } ... }
2. 500 エラーと環境変数の設定漏れ
問題：
デプロイは成功するものの、アプリケーションにアクセスすると 500 エラーが発生する。
解決方法：
この問題は Azure Static Web Apps 側での環境変数設定が不足していることが原因でした。
以下のように環境変数を設定しましょう。
-
GitHub Secrets: ビルド時に使用（
AZURE_STATIC_WEB_APPS_API_TOKENなど） - Azure アプリケーション設定: 実行時に使用（API キー、データベース接続文字列など）
まとめ
Azure Static Web Apps への Next.js デプロイは、基本的には公式ドキュメント通りに進めれば問題ありませんが、以下の点に注意が必要です：
- アップロードタイムアウト対策: スタンドアロン機能の有効化と静的ファイルをスタンドアロン出力にコピー
- 環境変数の二重管理: GitHub Secrets（ビルド時）と Azure アプリケーション設定（実行時）の使い分け
これらのポイントを押さえておけば、スムーズにデプロイできるはずです。同じような問題で困っている方の参考になれば幸いです。
Discussion