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

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

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
- ^(.*/)?\..*$

I found some Google Cloud Platform documentation that may be helpful to your issue, in this link under the deployment section it's indicated that for every deployment you only can upload 10,000 files per version and each file is limited to a maximum size of 32 megabytes. You're running into one of this two problems, I suggest to check this out on your app and try to deploy it again.

if you don't want to waste $10 on namecheap for an SSL cert and hours of your time (like me) you probably want to add the secure: always option to each handler.

- url: /.*
  static_files: dist/index.html
  upload: dist/index.html
  secure: always

like so! That's if you're using a custom domain though.