Deploying Nuxt JS SSR app to Google Cloud App Engine Standard

Question

I am unable to deploy my Nuxt JS SSR app to Google Cloud App Engine. The app is able to run locally both in dev and production mode.

The Nuxt JS documentation suggests using the app.yaml as follows:

runtime: nodejs10

instance_class: F2

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    secure: always

  - url: /(.*\.(gif|png|jpg|ico|txt))$
    static_files: static/\1
    upload: static/.*\.(gif|png|jpg|ico|txt)$
    secure: always

  - url: /.*
    script: auto
    secure: always

env_variables:
  HOST: '0.0.0.0'

However, the Google Cloud documentation suggests using nodejs14 as well as the env_variables for the bucket name which I assume is the same name as the staging bucket automatically created by Google App Engine.

runtime: nodejs14 # or another supported version

instance_class: F2

env_variables:
  BUCKET_NAME: "staging.myapp.appspot.com"

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    secure: always

  - url: /(.*\.(gif|png|jpg|ico|txt))$
    static_files: static/\1
    upload: static/.*\.(gif|png|jpg|ico|txt)$
    secure: always

  - url: /.*
    script: auto
    secure: always

When deploying with both of these app.yaml configurations it deploys successfully to Google App Engine however upon visiting the URL for the instance ( myapp.uk.r.appspot.com ) I am met with the error as follows:

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

And when visiting staging.myapp.appspot.com I am met with a range of errors from a generic Google 404 error to a certificate error. Does anyone have any idea about the correct app.yaml configuration for deploying a Nuxt JS SSR app to Google Cloud App Engine?

Answer 1

Please check the application logs to make sure whats happen on GAE

gcloud app logs tail

Then try my yaml file for nuxt SSR too:

runtime: nodejs14
service: nuxt

instance_class: F1

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    secure: always

  - url: /(.*\.(gif|png|jpg|ico|txt))$
    static_files: static/\1
    upload: static/.*\.(gif|png|jpg|ico|txt)$
    secure: always

  - url: /.*
    script: auto
    secure: always

Answer 2

Does anyone have any idea about the correct app.yaml configuration for deploying a Nuxt JS SSR app to Google Cloud App Engine?

I replicated your case and deployed the basic tutorial deploying of Nuxt JS app in App Engine using your provided app.yaml configuration. Both configuration are working even I reduced the the instance_class from F2 to F1 , its still working well.

As of now, the recommended version of nodejs is nodejs14 but the app is still working in App Engine Standard even the version is nodejs10 . The env_variables is optional, you can define environment variables in your app.yaml file to make them available or use it inside your app.

Error:

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

The 500 error or server error is hard to find the cause. Look for the logs in Cloud Logging or click this link to direct go to console. Make sure that you are in GAE application > your service name > App Engine Version . Start looking for error appearing when accessing your application and look for error cause description. If you haven't find any try to switch to all logs.

Please note, it also requires the following API is already enabled:

1. App Engine API
2. Compute Engine API
3. Cloud Build API

Additional troubleshooting, double check the listening port on your application.

Answer 3

Solved the issue it seems to have been an oversight regarding specifying a different server port in nuxt.config.js of 8000 rather than the default.

By looking at the logs using:

gcloud app logs tail

This error became apparent:

 ✖ Nuxt Fatal Error
Error: listen EADDRNOTAVAIL: address not available *.*.*.*:8000

Answer 4

Try this configuration:

runtime: nodejs12

instance_class: F2

handlers:
  - url: /_nuxt
static_dir: .nuxt/dist/client
    secure: always

  - url: /(.*\.(gif|png|jpg|ico|txt))$
    static_files: static/\1
    upload: static/.*\.(gif|png|jpg|ico|txt)$
    secure: always

  - url: /.*
    script: auto
    secure: always

env_variables:
  HOST: '0.0.0.0'

I have an nuxt app running in App Engine, and this is my Yaml config.

I suggest you to check if your application is Enabled in GCP/App Engine/Configurations=> Deactivate App field.