Nextjs Image Optimization doesn't Work on Firebase Hosting if Deployed Through GitHub Actions

[xuc323]

[REQUIRED] Environment info

firebase-tools: v12.5.2

Platform: Ubuntu, GitHub Actions

[REQUIRED] Test case

Sample Nextjs app with Image Optimization enabled.

[REQUIRED] Steps to reproduce

Below is the workflow for GitHub Actions

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
"on":
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.SERVICE_ACCOUNT }}"
          channelId: live
          projectId: PROJECT_ID
        env:
          FIREBASE_CLI_EXPERIMENTS: webframeworks

[REQUIRED] Expected behavior

Deployment is successful without any errors. The actual website will show the images.

[REQUIRED] Actual behavior

Deployment was successful as per the logs from the action, but the images failed to show on the site. Here is the error log from Cloud Functions:

upstream image response failed for `FILE_NAME` TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11457:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async invokeRequest (/workspace/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
at async /workspace/node_modules/next/dist/server/next-server.js:359:35
at async imageOptimizer (/workspace/node_modules/next/dist/server/image-optimizer.js:537:13)
at async cacheEntry.imageResponseCache.get.incrementalCache (/workspace/node_modules/next/dist/server/next-server.js:598:60)
at async /workspace/node_modules/next/dist/server/response-cache/index.js:99:36 {
cause: Error: connect ECONNREFUSED 0.0.0.0:443
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
errno: -111,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '0.0.0.0',
port: 443

Turns out that running firebase deploy locally works fine. Only GitHub Actions have issue with it.

[shawn1130]

+1

[iSuslov]

+1
Probably related: vercel/next.js#56935

[alanbo]

+1

[arieuqis]

+1

[leoortizz]

This issue was fixed in FirebaseExtended/firebase-framework-tools#125 and will be available in the next release of firebase-frameworks, that should be out soon. You'll just need to redeploy to use the new version.

[leoortizz]

firebase-frameworks 0.11.1 was released yesterday which should fix this issue

[Sergionx]

I am sorry if my question seems stupid but is my first time using Firebase on NextJs. If my deploy is automated on Github Actions how can I ensure to update it to the latest version? (I made a PR and I still have this error)