google-app-enginenuxt.jsnuxt3.jsapp-engine-flexible

Deploy Nuxt3 to AppEngine Standard or Felxible Environment


I'm having trouble deploying my app, which uses Server-Side Rendering (SSR) in Nuxt3, to Google App Engine. While I managed to deploy it successfully to GCP Cloud Run using a Docker container, it doesn't fulfill my specific requirements. I need it to be a service in my AppEngine project, allowing me to set dispatch rules for user navigation.

Unfortunately, there are deployment instructions available for Nuxt 2, but none for Nuxt 3, which makes the process more complex.

My package.json looks like this:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxi build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "start": "node .output/server/index.mjs",
    "gcp-build": ""
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxtjs/i18n": "^8.0.0-rc.5",
    "@nuxtjs/tailwindcss": "^6.8.0",
    "nuxt": "^3.7.4",
    "nuxt-icon": "^0.5.0",
    "nuxt-viewport": "^2.0.6",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@nuxtjs/color-mode": "^3.3.0",
    "flowbite": "^1.8.1",
    "prettier": "^3.0.3"
  }
}

And here is how I'm trying to upload it to Flexible environment. Here is the app.yaml:

runtime: nodejs
env: flex
entrypoint: npm start
service: "nuxt-frontend"
runtime_config:
  operating_system: ubuntu22

automatic_scaling:
  max_num_instances: 1

When I deploy it with above files, the deployment is successful, but when opening web I'm getting 500 error: enter image description here

And the logs shows this error: enter image description here


Solution

  • After a lot of tries I have got to work it in AppEngine flexible and standard environment including SSR. For this I have did these steps:

    The final package.json looks like this:

    {
      "name": "nuxt-app",
      "private": true,
      "type": "module",
      "scripts": {
        "build": "nuxi build",
        "dev": "nuxt dev",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
        "start": "node .output/server/index.mjs",
        "gcp-build": ""
      },
      "dependencies": {
        "@nuxt/devtools": "latest",
        "@nuxtjs/color-mode": "^3.3.0",
        "@nuxtjs/i18n": "^8.0.0-rc.5",
        "@nuxtjs/tailwindcss": "^6.8.0",
        "flowbite": "^1.8.1",
        "nuxt": "^3.8.0",
        "nuxt-icon": "^0.5.0",
        "nuxt-viewport": "^2.0.6",
        "prettier": "^3.0.3",
        "vue": "^3.3.4",
        "vue-bundle-renderer": "^2.0.0",
        "vue-router": "^4.2.5"
      }
    }
    

    app.yaml for standard environment:

    runtime: nodejs18
    
    instance_class: F1
    
    service: "nuxt-frontend"
    
    automatic_scaling:
      min_instances: 0
      max_instances: 1
    
    handlers:
      - url: /.*
        script: auto
        secure: always
    

    And if you need to run it in flexible environment, this is working app.yaml version:

    runtime: nodejs
    env: flex
    entrypoint: npm start
    service: "nuxt-frontend"
    runtime_config:
      operating_system: ubuntu22
      runtime_version: "18"
    
    automatic_scaling:
      min_instances: 0
      max_num_instances: 1
    
    handlers:
      - url: /.*
        script: auto
        secure: always
    

    Hope this helps someone else. Would be happy for official documentation and support of Nuxt3 on GAE.