How to deploy Vue.js app to Google App Engine with Cloud Build

2 min readApr 18, 2019

This is a tutorial on how to publish a vue-cli-3 project to Google App Engine using Cloud build.

**Before you begin, please first create a project on Google Cloud and an App Engine for node.js applications

Step 1. Add app.yaml file

Add app.yaml file with the following code to our Vue.js project root directory

runtime: nodejs10handlers:
  # 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

Step 2. Add cloudbuild.yaml

Add cloudbuild.yaml file with the following code to our Vue.js project root directory

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"

Step 3. Push project to remote repository

Push your Vue.js project to a remote git repository (Github or Bitbucket).

Optionally, you may set up a remote git repository on Google Cloud Repository.

See how to push an existing repository to a Google Cloud Repository.

Step 4. Create a cloud build trigger for our remote repository

Google cloud build provides the option to link a build trigger with remote git repositories such as Github or Bitbucket.

See how to create a build trigger.

In this particular case, we would set our ‘Build Configuration’ to be ‘Cloud Build configuration file (yaml or json)’ when creating our build trigger.

After creating our build trigger, there will be two additional steps to take in order to make the cloud build work!

Enable the ‘App Engine Admin API’

In your project go to Home, and in the top search bar look for ‘App Engine Admin API’. Enter in and click on the Enable button.

Add ‘App Engine Admin’ & ‘Cloud Build Service Account’ roles to the cloudbuild service account

In your project go to IAM & admin. Edit the “cloud build service account” (something that looks like 848901276420@cloudbuild.gserviceaccount.com) and click + ADD ANOTHER ROLE. Choose App Engine => App Engine Admin and Cloud Build => Cloud Build Service Account

In the end it should look something like this:

Success!!!

This will allow automatic deployment of our Vue.js project (based on instructions provided by cloudbuild.yaml) every time we push our project to our remote git repository.

Step 5. Done!

Now you may trigger the cloud build by pushing a new commit to your remote repository or go to your build trigger and hit Run Trigger.

When your cloud build is triggered, you may view the status of the deployment at Cloud Build => History.