部署Nuxt.js至Google App Engine出现502错误求助

Hey there! I’ve deployed several Nuxt apps to Google App Engine (GAE) before, so let’s walk through the most common fixes for those 502 errors you’re seeing—especially since you’re using unmodified create-nuxt-app templates, the issue is almost certainly in your GAE or Nuxt environment configuration.

First, Let’s Check the Core Configuration Files #

1. app.yaml: The GAE Runtime & Routing Setup #

GAE has strict requirements for how Node.js apps are configured. Here’s what your app.yaml should look like (adjust the runtime to match your Node.js version—GAE supports 18+, 20+ is recommended):

runtime: nodejs20
env: standard

# Let GAE automatically route all requests to your Node.js app
handlers:
  - url: /.*
    script: auto

# Set production environment variables
env_variables:
  NODE_ENV: production

Common mistakes here:

• Using an outdated runtime (e.g., nodejs14 which is deprecated)
• Forgetting script: auto (GAE needs this to recognize your Node.js entry point)
• Hardcoding a port in env_variables (GAE dynamically assigns ports, so never set PORT here—your app should read it from process.env.PORT)

2. package.json: Ensure Correct Start/Build Scripts #

GAE runs npm start by default, so your scripts need to point to the right production commands:

For Nuxt Default Template (Non-Express):

"scripts": {
  "dev": "nuxt dev",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

For Nuxt Express Template:

"scripts": {
  "dev": "nodemon index.js",
  "build": "nuxt build",
  "start": "node index.js"
}

Critical note: Always run npm run build before deploying—GAE won’t build your Nuxt app automatically unless you add a custom entrypoint, but it’s safer to pre-build locally or in a CI pipeline.

3. Express Template’s index.js: Fix Port & Host Binding #

If you’re using the Express template, your server must listen on 0.0.0.0 (not localhost) and use the port assigned by GAE. Here’s the corrected index.js:

const express = require('express')
const { loadNuxt, build } = require('nuxt')

const app = express()
const isDev = process.env.NODE_ENV !== 'production'

async function start() {
  // Load Nuxt with the correct mode
  const nuxt = await loadNuxt(isDev ? 'dev' : 'start')
  // Listen on all interfaces and use GAE's assigned port
  const host = process.env.HOST || '0.0.0.0'
  const port = process.env.PORT || 3000

  app.use(nuxt.render)

  if (isDev) {
    build(nuxt)
  }

  app.listen(port, host, () => {
    console.log(`Server running on http://${host}:${port}`)
  })
}

start()

The most common mistake here is hardcoding localhost or port 3000—GAE can’t reach servers that only listen on localhost, which triggers the 502 error.

4. nuxt.config.js: Ensure Server Host is Public #

For both templates, add or update the server configuration in nuxt.config.js to listen on all interfaces:

export default defineNuxtConfig({
  server: {
    host: '0.0.0.0'
  }
})

This ensures Nuxt’s internal server is accessible to GAE’s proxy.

Deployment Steps to Follow #

1. Install dependencies: npm install
2. Build the production bundle: npm run build
3. Deploy to GAE: gcloud app deploy (make sure you’re logged into gcloud CLI first)

Debugging Further with GAE Logs #

If you still get 502s, check the GAE logs to see exactly what’s failing:

gcloud app logs tail -s default

Look for errors like:

• "Server not listening on 0.0.0.0"
• "Port already in use"
• "Nuxt build failed"
  These will point you directly to the root cause.

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