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

Reputation: 466

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

Upvotes: 1

Views: 1006

Answers (2)

RuSsCiTy
RuSsCiTy

Reputation: 466

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:

  • set Node version to 18
  • installed in my case one missing library npm install vue-bundle-renderer. This should be installed by GAE automatically because of other dependiencies, but it looks like you have to do it manually right now
  • moved all stuff from devDependencies to dependencies (maybe this step can be skipped)
  • removed package-lock.json and node_modules, then restarted npm install
  • after gcloud app deploy app.yaml the Nuxt have finally started to work on AppEngine

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.

Upvotes: 3

Robert G
Robert G

Reputation: 2055

As of the moment, the latest supported version is Nuxt 2 based on this documentation on deploying Nuxt on Google App Engine.

I tried doing a manual search on Nuxt 3 documentation however no support for Google App Engine yet.

I would suggest to file a feature request so that it would be available in the following iterations/updates. Please be advised that we don't have a specific ETA on this one but you can track its progress once the ticket has been created. You may use the following links below to file this as a feature request:

Upvotes: 0

Related Questions