Deploying VueJS on google cloud

Question

I am using Vue CLI 3 to create a web application with the following presets: babel, PWA, Vue Router, and css proprocessors. I am trying to deploy the application on Google Cloud's App Engine. How do I serve this? The tutorial on Google says I just have to do:

gcloud app deploy

in the root directory, but I don't know how to configure app.yaml to deploy the dist/ folder.

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 reference the app.yaml above and the configuration should be sufficient for your case.