admin管理员组

文章数量:1333478

I have a NextJS (version 15.0.1) application which I am trying to deploy up to Cloudflare which works perfectly fine when running npm run deploy on my local machine. The scripts in my package.json look like the following:

"scripts": {
   "dev": "next dev --turbopack",
   "build": "next build",
   "start": "next start",
   "lint": "next lint",
   "pages:build": "npx @cloudflare/next-on-pages",
   "preview": "npm run pages:build && wrangler pages dev",
   "deploy": "npm run pages:build && wrangler pages deploy"
},

However, when running this through a Github action such as the following:

name: Build & deploy to Cloudflare

on:
  push:
    branches:
      - production
      - staging

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v3

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 20

    - name: Install dependencies
      run: npm ci

    - name: Build project
      run: npm run pages:build

    - name: Deploy to Cloudflare Pages
      env:
        CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
        CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        CLOUDFLARE_PROJECT_NAME: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
        NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
        NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
        SUPABASE_SERVICE_ROLE_SECRET: ${{ secrets.SUPABASE_SERVICE_ROLE_SECRET }}
      run: |
        npx wrangler pages deploy --project-name $CLOUDFLARE_PROJECT_NAME \
          --branch $GITHUB_REF_NAME \
          --path .cloudflare/pages

It gets through to the 'Build project' stage, where it then fails at the following point:

***@3.0.0 pages:build
> npx @cloudflare/next-on-pages
⚡️ @cloudflare/next-on-pages CLI v.1.13.5
⚡️ Detected Package Manager: npm (10.8.2)
⚡️ Preparing project...
⚡️ Project is ready
⚡️ Building project...
▲  Vercel CLI 37.12.1
▲  Installing dependencies...
▲  up to date in 715ms
▲  36 packages are looking for funding
▲  run `npm fund` for details
▲  Detected Next.js version: 15.0.1
▲  Running "npm run build"
▲  > ***@3.0.0 build
▲  > next build
▲  Attention: Next.js now collects completely anonymous telemetry regarding usage.
▲  This information is used to shape Next.js' roadmap and prioritize features.
▲  You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
▲  
▲  ▲ Next.js 15.0.1
▲  
▲  Creating an optimized production build ...
▲  ✓ Compiled successfully
▲  Linting and checking validity of types ...
▲  Collecting page data ...
▲  ⚠ Using edge runtime on a page currently disables static generation for that page
▲  /home/runner/work/***/***/.next/server/edge-chunks/752.js:10
▲  });`;class ${constructor(e,t){var n;this.accessToken=null,this.apiKey=null,this.channels=[],this.endPoint="",this.httpEndpoint="",this.headers=p,this.params={},this.timeout=1e4,this.heartbeatIntervalMs=3e4,this.heartbeatTimer=void 0,this.pendingHeartbeatRef=null,this.ref=0,this.logger=R,this.conn=null,this.sendBuffer=[],this.serializer=new g,this.stateChangeCallbacks={open:[],close:[],error:[],message:[]},this._resolveFetch=e=>{let t;return e?t=e:"undefined"==typeof fetch?t=(...e)=>Promise.resolve().then(r.bind(r,575)).then(({default:t})=>t(...e)):t=fetch,(...e)=>t(...e)},this.endPoint=`${e}/${V.websocket}`,this.httpEndpoint=T(e),(null==t?void 0:t.transport)?this.transport=t.transport:this.transport=null,(null==t?void 0:t.params)&&(this.params=t.params),(null==t?void 0:t.headers)&&(this.headers=Object.assign(Object.assign({},this.headers),t.headers)),(null==t?void 0:t.timeout)&&(this.timeout=t.timeout),(null==t?void 0:t.logger)&&(this.logger=t.logger),(null==t?void 0:t.heartbeatIntervalMs)&&(this.heartbeat
⚡️ The Vercel build (`npx vercel build`) command failed. For more details see the Vercel logs above.
⚡️ If you need help solving the issue, refer to the Vercel or Next.js documentation or their repositories.
▲  "totp"===e.factorType&&(null===(n=null==o?void 0:o.totp)||void 0===n?void 0:n.qr_code)&&(o.totp.qr_code=`data:image/svg+xml;utf-8,${o.totp.qr_code}`),{data:o,error:null})})}catch(e){if(eW(e))return{data:null,error:e};throw e}}async _verify(e){return this._acquireLock(-1,async()=>{try{return await this._useSession(async t=>{var r;let{data:n,error:i}=t;if(i)return{data:null,error:i};let{data:s,error:a}=await te(this.fetch,"POST",`${this.url}/factors/${e.factorId}/verify`,{body:{code:e.code,challenge_id:e.challengeId},headers:this.headers,jwt:null===(r=null==n?void 0:n.session)||void 0===r?void 0:r.access_token});return a?{data:null,error:a}:(await this._saveSession(Object.assign({expires_at:Math.round(Date.now()/1e3)+s.expires_in},s)),await this._notifyAllSubscribers("MFA_CHALLENGE_VERIFIED",s),{data:s,error:a})})}catch(e){if(eW(e))return{data:null,error:e};throw e}})}async _challenge(e){return this._acquireLock(-1,async()=>{try{return await this._useSession(async t=>{var r;let{data:n,error:i}=t;return i?{da

... continues printing random code dumps

▲  Error: Command "npm run build" exited with 1
Error: Process completed with exit code 1.

Im running this using the same node version (20) as my local machine, and all the correct credentials are setup in the GitHub actions secrets for the given repository.

I'm at a bit of a loss with this having tried to debug for a few hours, trying the following:

  • Different node versions
  • Clean installs of the npm modules
  • Adding export type 'standalone' in the nextjs config
  • Swapping the build script to directly use @npx cloudflare/next-on-pages

Version numbers to node:

  • NodeJS 20
  • NextJS 15.0.1
  • ReactJS 19.0.0-rc-69d4b800-20241021
  • Wrangler 3.86.1

Again, it works absolutely fine on my local machine, so hoping this might just be a small config tweak but any help/guidence would be greatly appreciated!

I have a NextJS (version 15.0.1) application which I am trying to deploy up to Cloudflare which works perfectly fine when running npm run deploy on my local machine. The scripts in my package.json look like the following:

"scripts": {
   "dev": "next dev --turbopack",
   "build": "next build",
   "start": "next start",
   "lint": "next lint",
   "pages:build": "npx @cloudflare/next-on-pages",
   "preview": "npm run pages:build && wrangler pages dev",
   "deploy": "npm run pages:build && wrangler pages deploy"
},

However, when running this through a Github action such as the following:

name: Build & deploy to Cloudflare

on:
  push:
    branches:
      - production
      - staging

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v3

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 20

    - name: Install dependencies
      run: npm ci

    - name: Build project
      run: npm run pages:build

    - name: Deploy to Cloudflare Pages
      env:
        CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
        CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        CLOUDFLARE_PROJECT_NAME: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
        NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
        NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
        SUPABASE_SERVICE_ROLE_SECRET: ${{ secrets.SUPABASE_SERVICE_ROLE_SECRET }}
      run: |
        npx wrangler pages deploy --project-name $CLOUDFLARE_PROJECT_NAME \
          --branch $GITHUB_REF_NAME \
          --path .cloudflare/pages

It gets through to the 'Build project' stage, where it then fails at the following point:

***@3.0.0 pages:build
> npx @cloudflare/next-on-pages
⚡️ @cloudflare/next-on-pages CLI v.1.13.5
⚡️ Detected Package Manager: npm (10.8.2)
⚡️ Preparing project...
⚡️ Project is ready
⚡️ Building project...
▲  Vercel CLI 37.12.1
▲  Installing dependencies...
▲  up to date in 715ms
▲  36 packages are looking for funding
▲  run `npm fund` for details
▲  Detected Next.js version: 15.0.1
▲  Running "npm run build"
▲  > ***@3.0.0 build
▲  > next build
▲  Attention: Next.js now collects completely anonymous telemetry regarding usage.
▲  This information is used to shape Next.js' roadmap and prioritize features.
▲  You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
▲  https://nextjs./telemetry
▲  ▲ Next.js 15.0.1
▲  
▲  Creating an optimized production build ...
▲  ✓ Compiled successfully
▲  Linting and checking validity of types ...
▲  Collecting page data ...
▲  ⚠ Using edge runtime on a page currently disables static generation for that page
▲  /home/runner/work/***/***/.next/server/edge-chunks/752.js:10
▲  });`;class ${constructor(e,t){var n;this.accessToken=null,this.apiKey=null,this.channels=[],this.endPoint="",this.httpEndpoint="",this.headers=p,this.params={},this.timeout=1e4,this.heartbeatIntervalMs=3e4,this.heartbeatTimer=void 0,this.pendingHeartbeatRef=null,this.ref=0,this.logger=R,this.conn=null,this.sendBuffer=[],this.serializer=new g,this.stateChangeCallbacks={open:[],close:[],error:[],message:[]},this._resolveFetch=e=>{let t;return e?t=e:"undefined"==typeof fetch?t=(...e)=>Promise.resolve().then(r.bind(r,575)).then(({default:t})=>t(...e)):t=fetch,(...e)=>t(...e)},this.endPoint=`${e}/${V.websocket}`,this.httpEndpoint=T(e),(null==t?void 0:t.transport)?this.transport=t.transport:this.transport=null,(null==t?void 0:t.params)&&(this.params=t.params),(null==t?void 0:t.headers)&&(this.headers=Object.assign(Object.assign({},this.headers),t.headers)),(null==t?void 0:t.timeout)&&(this.timeout=t.timeout),(null==t?void 0:t.logger)&&(this.logger=t.logger),(null==t?void 0:t.heartbeatIntervalMs)&&(this.heartbeat
⚡️ The Vercel build (`npx vercel build`) command failed. For more details see the Vercel logs above.
⚡️ If you need help solving the issue, refer to the Vercel or Next.js documentation or their repositories.
▲  "totp"===e.factorType&&(null===(n=null==o?void 0:o.totp)||void 0===n?void 0:n.qr_code)&&(o.totp.qr_code=`data:image/svg+xml;utf-8,${o.totp.qr_code}`),{data:o,error:null})})}catch(e){if(eW(e))return{data:null,error:e};throw e}}async _verify(e){return this._acquireLock(-1,async()=>{try{return await this._useSession(async t=>{var r;let{data:n,error:i}=t;if(i)return{data:null,error:i};let{data:s,error:a}=await te(this.fetch,"POST",`${this.url}/factors/${e.factorId}/verify`,{body:{code:e.code,challenge_id:e.challengeId},headers:this.headers,jwt:null===(r=null==n?void 0:n.session)||void 0===r?void 0:r.access_token});return a?{data:null,error:a}:(await this._saveSession(Object.assign({expires_at:Math.round(Date.now()/1e3)+s.expires_in},s)),await this._notifyAllSubscribers("MFA_CHALLENGE_VERIFIED",s),{data:s,error:a})})}catch(e){if(eW(e))return{data:null,error:e};throw e}})}async _challenge(e){return this._acquireLock(-1,async()=>{try{return await this._useSession(async t=>{var r;let{data:n,error:i}=t;return i?{da

... continues printing random code dumps

▲  Error: Command "npm run build" exited with 1
Error: Process completed with exit code 1.

Im running this using the same node version (20) as my local machine, and all the correct credentials are setup in the GitHub actions secrets for the given repository.

I'm at a bit of a loss with this having tried to debug for a few hours, trying the following:

  • Different node versions
  • Clean installs of the npm modules
  • Adding export type 'standalone' in the nextjs config
  • Swapping the build script to directly use @npx cloudflare/next-on-pages

Version numbers to node:

  • NodeJS 20
  • NextJS 15.0.1
  • ReactJS 19.0.0-rc-69d4b800-20241021
  • Wrangler 3.86.1

Again, it works absolutely fine on my local machine, so hoping this might just be a small config tweak but any help/guidence would be greatly appreciated!

Share Improve this question edited Nov 21, 2024 at 8:04 lewisnewson asked Nov 20, 2024 at 17:27 lewisnewsonlewisnewson 4607 silver badges23 bronze badges 2
  • when you tried cloudflare/next-on-pages did you do developers.cloudflare/pages/framework-guides/nextjs/ssr/… for all your server rendered routes and conversely did you make sure it wasn't there for static routes? Also, does pages:build run fine locally? – Phil Miller Commented Nov 20, 2024 at 17:58
  • I did yes, followed those guides very closeley. I can run pages:build on my local machine and use wrangler to deploy into Cloudflare where it works perfectly fine. It's only through Github actions that its getting caught on something – lewisnewson Commented Nov 21, 2024 at 7:59
Add a comment  | 

1 Answer 1

Reset to default 3

Turns out, I was putting my env variables at the wrong part of the yml file, some were needed during the build process which caused some internal packages to fail:

name: Build & deploy to Cloudflare

on:
  push:
    branches:
      - production
      - staging

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v4

    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '20.17.0'

    - name: Install dependencies
      run: npm ci

    - name: Build project
      run: npm run pages:build
      env:
        NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
        NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
        SUPABASE_SERVICE_ROLE_SECRET: ${{ secrets.SUPABASE_SERVICE_ROLE_SECRET }}

    - name: Deploy to Cloudflare Pages
      env:
        CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
        CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        CLOUDFLARE_PROJECT_NAME: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
      run: |
        npx wrangler pages deploy .vercel/output/static --project-name $CLOUDFLARE_PROJECT_NAME --branch $GITHUB_REF_NAME

Note; I also changed the final deploy string for Cloudflare, as --path wasn't a variable, and by running the build script I needed to dive into the .vercel/output/static directory to deploy instead of the cloudflare/pages default.

As precaution too, both actions packages were updated to version 4.

本文标签: nodejsNextJS Build Failing On GitHub ActionsStack Overflow