Nuxt.js: Google Cloud Deployment

Created on 4 Mar 2017 · 9Comments · Source: nuxt/nuxt.js

Hey, I'm having issues to deploy my nuxt based application in the google cloud.
The logs are fine, but the website doesn't work at all.

Has anyone attempted to deploy nuxt to gcloud?

_{This question is available on Nuxt.js community (#c295)}

Source

John0x

Most helpful comment

@tomasleiva9 The app engine has an integrated health check feature, which asks your service periodically whether its alive or not.

Using the nuxt cli for starting won't be enough, you have to use the express middleware to be able to add a new endpoint for the health check.

This is my code for the express server:
````javascript
const Nuxt = require('nuxt')
const app = require('express')()
const host = process.env.HOST || '0.0.0.0'
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')

// GCloud Health Check
app.get('/_ah/health', (req, res) => {
res.status(200)
res.send()
})

// Init Nuxt.js
const nuxt = new Nuxt(config)
app.use(nuxt.render)

// Build only in dev mode
if (config.dev) {
nuxt.build()
.catch((error) => {
console.error(error) // eslint-disable-line no-console
process.exit(1)
})
}

// Development error handler
if (app.get('env') === 'development') {
app.use((err, req, res) => {
res.status(err.status || 500)
res.render('error', {
message: err.message,
error: err
})
})
}

// Production error handler
app.use((err, req, res) => {
console.log(err)
res.status(err.status || 500)
res.render('error', {
message: err.message,
error: {}
})
})

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

John0x on 15 Mar 2017

👍3

All 9 comments

I'm having the same issue. I'm deploying with gcloud and after update completes the page shows the error 502

Error: Server Error
The server encountered a temporary error and could not complete your request.
Please try again in 30 seconds.

That's happining with the "starter" template, with no modifications.
What I'm doing wrong?

tomasleiva9 on 14 Mar 2017

@tomasleiva9 The app engine has an integrated health check feature, which asks your service periodically whether its alive or not.

Using the nuxt cli for starting won't be enough, you have to use the express middleware to be able to add a new endpoint for the health check.

This is my code for the express server:
````javascript
const Nuxt = require('nuxt')
const app = require('express')()
const host = process.env.HOST || '0.0.0.0'
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')

// GCloud Health Check
app.get('/_ah/health', (req, res) => {
res.status(200)
res.send()
})

// Init Nuxt.js
const nuxt = new Nuxt(config)
app.use(nuxt.render)

// Build only in dev mode
if (config.dev) {
nuxt.build()
.catch((error) => {
console.error(error) // eslint-disable-line no-console
process.exit(1)
})
}

// Development error handler
if (app.get('env') === 'development') {
app.use((err, req, res) => {
res.status(err.status || 500)
res.render('error', {
message: err.message,
error: err
})
})
}

// Production error handler
app.use((err, req, res) => {
console.log(err)
res.status(err.status || 500)
res.render('error', {
message: err.message,
error: {}
})
})

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

John0x on 15 Mar 2017

👍3

Perfect @John0x . It worked very well.
Thanks.

I found more information about this in documentation from Vuejs, if someone else need more help...
https://nuxtjs.org/api/configuration-dev

tomasleiva9 on 16 Mar 2017

Adding on to here that, even after disabling health check, i still get

502 Bad Gateway
nginx

not sure what the cause is

sqram on 20 Jan 2018

@sqram Did you set the port 8080 (app engines uses that port)

ghost on 12 Feb 2018

hello @John0x
i copy your script and found error

/app/server.js:19
const nuxt = new Nuxt(config)
             ^

TypeError: Nuxt is not a constructor
    at Object.<anonymous> (/app/server.js:19:14)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1

dudenk on 8 Mar 2018

👍1

@reworking i did. i tried many other things as well. Eventually gave up and went fully restful :(

sqram on 9 Mar 2018

Would someone here be so kind and post a github link to a full working project (i.e. where you can clone, yarn, and run gcloud app deploy and it works) ? I tried applying numerous solutions from here and stack overflow on top of the simplest project from template https://github.com/nuxt-community/express-template and still cannot get it to work :(