Young Leaves

Azure Static Web Apps でNext.js ビルド時に、GitHub Actionsで「The size of the function content was too large. The limit for this Static Web App is XXXXXXXXX bytes.」となりビルドが失敗する

Azure Static Web Apps でNext.js アプリケーションをデプロイしようとしたらエラーになったことはありませんか?今回はAzure Static Web Apps でNext.js アプリケーションのビルド時のサイズに関するエラーについて書いていきます。

実施環境

デプロイソース

GitHub

ビルドのプリセット

Next.js

発生した事象

Azure Static Web Apps でNext.js のアプリケーションを作成しようとしたら、GitHub Actions のジョブで以下エラーメッセージが表示され失敗となりました。

The content server has rejected the request with: BadRequest
Reason: The size of the function content was too large. The limit for this Static Web App is 104857600 bytes.

エラーの原因

エラーの原因について調べていたところ、以下GitHub のIssue ページを見つけました。

The content server has rejected the request with: BadRequest 147 Reason: The size of the function content was too large. The limit for this static site is 31457280 bytes.

Issue ページにあるMicrosoft のドキュメントを確認したところ、以下記述からAzure Static Web Apps でハイブリッドNext.js アプリケーションのサイズは100 MB との記述を確認しました。

The maximum app size for the hybrid Next.js application is 100 MB. Consider using Static HTML exported Next.js apps if your requirement is more than 100 MB.

そのため、ビルド後のNext.js アプリケーションのサイズが100MB を超えていることが原因でGitHub Actions のジョブが失敗したと考えられます。

ただ、今回ビルドするアプリケーションの合計サイズはnode_module を除いても4MB 程度のサイズであることから、ハイブリッドNext.js の100MB を超えてはいませんでした。ビルドやデプロイ時に何かファイルでも作成しているのかと考え、Issue ページを読んでいくとNext.js のビルド時のキャッシュを削除すると動作するとの記述を確認しました。

Removing the cache is the only thing that works.

ビルド時のキャッシュも含まれるのかと考え、アプリケーション作成時の.next とビルド対象のアプリケーションの.next のcache のサイズを比較して見たところ、以下の結果となりました。

Next.js アプリ作成直後の状態

# 作成直後のアプリケーション容量を確認
du -sh .next/cache
6.9M	.next/cache

ビルド対象アプリケーションの状態

# ビルド対象のアプリケーション容量を確認
du -sh .next/cache
320M	.next/cache

Next.js のアプリケーション作成直後はキャッシュが6.9 MBだが、ビルド対象のアプリケーションではキャッシュだけで320 MB あることを確認しました。そのため、ハイブリッドNext.js アプリケーションの最大サイズである100 MB を超えていることを確認しました。上記の結果から、ビルド時のキャッシュが含まれることにより、ハイブリッドNext.js アプリケーションの最大サイズを超えていることがエラーの原因と特定しました。

解決しなかった方法

GitHub のIssue ページにあるpackage.json のbuild コマンドで「.next」のcache ディレクトリを削除する方法を試してみましたが、同じエラーが発生し解決しませんでした。

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build && rm -rf ./.next/cache",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    <省略>
  }
}

解決した方法

Issue 内にあるAzure Static Web Apps のGitHub Actions のyml ファイルにapp_build_command でyarn のビルド実施後、Next.js のcache ディレクトリを削除することで、Azure Static Web Apps のBuild And Deploy ジョブでエラーが発生しなくなりました。

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GRAY_OCEAN_0F8467A00 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
          app_build_command: 'yarn run build'
          api_build_command: 'rm -rf ./node_modules/@next/swc-* && rm -rf ./.next/cache'
          ###### End of Repository/Build Configurations ######

まとめ

  • Azure Static Web Apps のハイブリッドNext.js アプリケーションの最大サイズ・100MB を超えるとGitHub Actions でエラーとなる。
  • Azure Static Web Apps でNext.js アプリケーションをビルドする際、ビルド後のキャッシュも含まる。
  • 暫定対処としてビルド後のキャッシュを削除することで容量を削減できる。

参考資料