NextJS应用部署Firebase Hosting时出现卡顿停滞问题

环境信息 #

• Node版本：v16.8.0
• NPM版本：7.21.0
• Firebase初始化流程：先执行firebase experiments:enable webframeworks，再通过firebase init初始化项目

next.config.js配置 #

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: { appDir: true },
}

module.exports = nextConfig

部署卡顿前的日志输出 #

Detected a Next.js codebase. This is an experimental integration, proceed with caution.

warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

info  - Creating an optimized production build
info  - Compiled successfully
info  - Linting and checking validity of types
info  - Collecting page data
[    ] info  - Generating static pages (0/7)styles.container Header_container__mD0ij
info  - Generating static pages (7/7)
info  - Finalizing page optimization

Route (pages)                              Size     First Load JS
┌ ○ / (617 ms)                             3.71 kB         109 kB
├   └ css/fdb2f6acb69fe1ad.css             794 B
├   /_app                                  0 B            97.3 kB
├ ○ /404                                   179 B          97.5 kB
├ ○ /biography (461 ms)                    3.48 kB         111 kB
├   └ css/65eda0ce9bb2b5b9.css             1.45 kB
├ ○ /indexx (405 ms)                       4.56 kB         112 kB
├   └ css/2805e6d097bc0e08.css             2.95 kB
├ ○ /news (399 ms)                         2.69 kB         110 kB
├   └ css/e3f7d4147fa456f7.css             1.1 kB
└ ○ /shop (623 ms)                         1.62 kB         107 kB
    └ css/75bc53145ed6cfe5.css             506 B
+ First Load JS shared by all              127 kB
  ├ chunks/main-d2e0a2e45955cc22.js        78.7 kB
  ├ chunks/pages/_app-e1b5cdce79d3f8aa.js  17 kB
  ├ chunks/webpack-e5138252bb357a88.js     1.6 kB
  └ css/b57b70b80e694460.css               29.3 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

Building a Cloud Function to run this application. This is needed due to:
 • Image Optimization
 • app directory (unstable)
 • non-static route /biography
 • non-static route /news
 • non-static route /indexx
 • and 1 other reasons, use --debug to see more

Unable to bundle next.config.js for use in Cloud Functions, proceeding with deploy but problems may be enountered.
The command line is too long.


changed 1 package in 49s

119 packages are looking for funding
  run `npm fund` for details

=== Deploying to 'moudstest-proj'...

i  deploying functions, hosting
i  functions: preparing codebase firebase-frameworks-moudstest-proj for deployment
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
i  artifactregistry: ensuring required API artifactregistry.googleapis.com is enabled...
+  artifactregistry: required API artifactregistry.googleapis.com is enabled
+  functions: required API cloudbuild.googleapis.com is enabled
+  functions: required API cloudfunctions.googleapis.com is enabled
!  functions: package.json indicates an outdated version of firebase-functions. Please upgrade using npm install --save firebase-functions@latest in your functions directory.
!  functions: Please note that there will be breaking changes when you upgrade.
i  functions: Loaded environment variables from .env.
i  functions: preparing .firebase\moudstest-proj\functions directory for uploading...
i  functions: packaged D:\Projects\MENA\MZPersonalWebsite\.firebase\moudstest-proj\functions (127.64 MB) for uploading
i  functions: ensuring required API run.googleapis.com is enabled...
i  functions: ensuring required API eventarc.googleapis.com is enabled...
i  functions: ensuring required API pubsub.googleapis.com is enabled...
i  functions: ensuring required API storage.googleapis.com is enabled...
+  functions: required API eventarc.googleapis.com is enabled
+  functions: required API run.googleapis.com is enabled
+  functions: required API storage.googleapis.com is enabled
+  functions: required API pubsub.googleapis.com is enabled
i  functions: generating the service identity for pubsub.googleapis.com...
i  functions: generating the service identity for eventarc.googleapis.com...

关键问题点 #

• 部署卡在functions: generating the service identity for eventarc.googleapis.com步骤，网络稳定但无进展
• 部署过程中出现两个警告：
  1. Unable to bundle next.config.js for use in Cloud Functions, proceeding with deploy but problems may be enountered.
  2. The command line is too long.

1. 解决"命令行过长"问题 #

Windows系统下常见此问题，因路径或参数长度超出系统限制：

• 将项目移动到更短的路径下，比如从D:\Projects\MENA\MZPersonalWebsite改为D:\Projects\MySite
• 启用Windows长路径支持：以管理员权限修改注册表HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem下的LongPathsEnabled值为1

2. 修复next.config.js打包异常 #

虽然提示会继续部署，但该问题可能引发后续卡顿：

• 给next.config.js添加output: 'standalone'配置（NextJS 12+支持），减少打包体积与依赖：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: { appDir: true },
  output: 'standalone'
}

module.exports = nextConfig

• 删除.firebase目录和node_modules，重新执行npm install和firebase deploy清除缓存

3. 解决服务身份生成卡顿 #

此步骤卡住多与权限或CLI版本有关：

• 升级Firebase CLI到最新版本：执行npm install -g firebase-tools@latest
• 检查Firebase账号权限：确保账号拥有Service Account Admin或Editor权限
• 手动创建Eventarc服务身份：
  1. 打开Google Cloud控制台进入目标项目
  2. 进入"IAM与管理"→"服务账号"
  3. 创建新服务账号并授予Eventarc Service Agent角色
  4. 重新执行firebase deploy

4. 升级依赖版本 #

日志提示firebase-functions版本过时，执行以下命令升级：

cd functions
npm install --save firebase-functions@latest
cd ..

同时升级NextJS到稳定版本，降低experimental特性的兼容风险：

npm install next@latest

5. 启用debug模式排查 #

执行firebase deploy --debug查看详细日志，定位卡顿的具体原因（如网络超时、权限错误等）

内容的提问来源于stack exchange，提问作者MahmoudThePeltist