How to deploy Vue.js app on Google App Engine?

Question

I created a simple Vue.js application. Then I created a build for production using npm run build command which creates dist folder in the project structure.

Then I use gcloud app deploy command to deploy it to Google App Engine, but then the deployment stops and gives error as:

ERROR: (gcloud.app.deploy) INVALID_ARGUMENT: This deployment has too many files. New versions are limited to 10000 files for this app.

Can someone please tell me what is the proper way to deploy Vue.js application to Google App Engine?

Answer 1

Have you tried deploying your Vue.js app to Google App Engine using Cloud Build? I have had no problem deploying any Vue.js apps in this way. Try following this tutorial for complete instructions.

Basically, you would have to include the following two files in your project root directory when deploying your Vue.js app to Google App Engine via Cloud Build:

1. App.yaml

   runtime: nodejs10
   handlers:
     # Serve all static files with urls ending with a file extension
   - url: /(.*\..+)$ 
     static_files: dist/\1
     upload: dist/(.*\..+)$
     # catch all handler to index.html
   - url: /.*
     static_files: dist/index.html
     upload: dist/index.html
   

and

2. cloudbuild.yaml

   steps:
   - name: node:10.15.1
     entrypoint: npm
     args: ["install"]
   - name: node:10.15.1
     entrypoint: npm
     args: ["run", "build"]
   - name: "gcr.io/cloud-builders/gcloud"
     args: ["app", "deploy"]
   timeout: "1600s"
   

In the case you're not using cloud build you may just use the app.yaml above and reference the steps implied in the cloudbuild.yaml, which means:

1. run npm install
2. run npm run build
3. run gcloud app deploy

Answer 2

You have too many files in the project. In your app.yaml file, add the skip_files tag to it so the deployment does not include unnecessary files or folder in the upload. You can also mix with regex so for example:

skip_files:
- node_modules/
- .gitignore
- src/
- public/
- babel.config.js
- ^(.*/)?\..*$