Zenn
🌲

The limit for this Static Web App is 104857600 bytes

2023/07/24に公開
Azure
Next.js
GitHub Actions
CI/CD
tech

はじめに

この記事は，Azure Static Web AppにNext.jsアプリをデプロイしようとして，アプリのサイズ上限に引っかかってしまった時のエラーの解決策を個人的な備忘録としてまとめたものです．
Next.jsやAzure，GitHubその他のアップデートおよび仕様変更によって将来的にこの手順が使用できなくなる可能性があります．(解決.2023/1/21, 記.2023/7/24)

前提条件

  • Next.jsでアプリ開発をしている
  • GitHub Actionsを用いてAzure Static Web Appへのデプロイを行っている

事の始まり

ハッカソンでNext.jsを用いて開発していた時のこと，GitHub Actionsを用いたAzure Static Web AppへのCI/CDでこのようなエラーが発生しました．

The size of the function content was too large. The limit for this Static Web App is 104857600 bytes

どうやらAzure Static Web Appへデプロイできるサイズの上限に引っかかっているらしい．この100MBというのが中々絶妙なラインで，標準のNext.jsにそこそこ大きいパッケージを複数追加すると引っかかってしまうことがあります．

解決策

このエラーに遭遇したのが2023年の1月のことだったのですが，GitHubにissueは立っているものの全く情報がありませんでした．色々調べた結果，日本語の個人ブログでこれについて書いてある記事を見つけました．
どうやらNext.jsのキャッシュがかなりのサイズになっており，ビルドの際にキャッシュを削除し，ビルド後のスクリプトたちだけをpushすればとりあえずサイズ上限は回避できそうな気がします．
ということで，.github/workflowsのymlファイルを少し変更してみます．
変更前:

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_GREEN_BEACH_0A9C51000 }}
          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
          ###### End of Repository/Build Configurations ######

変更後:

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_GREEN_BEACH_0A9C51000 }}
          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: 'npm run build'
          api_build_command: 'rm -rf ./node_modules/@next/swc-* && rm -rf ./.next/cache'
          ###### End of Repository/Build Configurations ######

という感じで，workflow内でnext.jsアプリのビルドを行い，キャッシュを削除してからpushするようにしました．これでアプリのサイズを大幅に削減することができ，無事CI/CDが通るようになりました．

Discussion