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:
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:
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 nowdevDependencies
to dependencies
(maybe this step can be skipped)package-lock.json
and node_modules
, then restarted npm install
gcloud app deploy app.yaml
the Nuxt have finally started to work on AppEngineThe 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.