Deploy Nuxt.js to Google App Engine Return 502 Bad Gateway

Question

Hi is there anyone who has tried to deploy nuxt app to Google App Engine. I have tried from nuxt regular and express template, it shows 502 Bad Gateway. I don't modify anything from create-nuxt-app command. My app.yaml file contains

runtime: nodejs
env: flex

Is there anything wrong with my setup or maybe there are some additional setup I have to do?

Here is my package.json

{
  "name": "nuxt-pwa-vuetify-starter",
  "version": "1.0.0",
  "description": "Nuxt.js + PWA + Vuetify.js starter project",
  "author": "Jefry Dewangga <jefrydco@gmail.com>",
  "private": true,
  "homepage": "https://github.com/jefrydco/nuxt-pwa-vuetify-starter#readme",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jefrydco/nuxt-pwa-vuetify-starter"
  },
  "keywords": [
    "nuxt",
    "nuxt.js",
    "nuxtjs",
    "nuxt pwa",
    "vue",
    "vue.js",
    "vuejs",
    "vue universal",
    "vue ssr",
    "vue pwa",
    "vuetify",
    "vuetify.js",
    "vuetifyjs"
  ],
  "engines": {
    "node": ">=8.0.0",
    "npm": ">=5.0.0"
  },
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "prestart": "npm run build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.0.1",
    "@nuxtjs/browserconfig": "0.0.7",
    "@nuxtjs/component-cache": "^1.1.1",
    "@nuxtjs/dotenv": "^1.1.0",
    "@nuxtjs/google-analytics": "^2.0.2",
    "@nuxtjs/pwa": "^2.0.5",
    "@nuxtjs/sentry": "^1.0.1",
    "@nuxtjs/sitemap": "0.0.3",
    "babel-plugin-transform-imports": "^1.4.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "cross-env": "^5.1.3",
    "express": "^4.16.2",
    "morgan": "^1.9.0",
    "node-sass": "^4.7.2",
    "nodemon": "^1.17.1",
    "nuxt": "^1.3.0",
    "pug": "^2.0.0-rc.4",
    "sass-loader": "^6.0.7",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vuetify": "^1.0.3"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.2",
    "eslint": "^4.18.1",
    "eslint-config-standard": "^10.2.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^4.0.2",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-standard": "^3.0.1"
  }
}

and here is my app server index.js,

const express = require('express')
const { Nuxt, Builder } = require('nuxt')
const app = express()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 8080

app.set('port', port)

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

async function start () {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  console.log('Server listening on http://' + host + ':' + port) // eslint-disable-line no-console
}
start()

Answer 1

Below worked for me.

package.json

"start": "npm install --save cross-env && nuxt build && cross-env NODE_ENV=production node server/index.js",

This install cross-env before serving and nuxt build is a required command in production.

Plus I've changes in server.js

Add health route to express:

  app.get('/_ah/health', (req, res) => {
    res.status(200)
    res.send({hello:'world'})
  })

Listen to only port

// app.listen(host,port) 
app.listen(port)