[GCP] Deploy Vue.js project to Google App Engine via Google Cloud CLI

3 min readOct 9, 2021

The procedure help you to deploy your project to GAE via Google Cloud CLI easily if you do not need to build auto CI/CD.

Abbreviation

GCP：Google Cloud Plateform
GAE：Google App Engine

Pre-processing

Download Google Cloud SDK
Set configuration : gcloud init
Enter configuration name
Login google account in browser

Procedure

1.Check current configuration : gcloud config configurations list

NAME  IS_ACTIVE  ACCOUNT
account1  False ooo@gmail.com
account2  True xxx@gmail.com

2.If configuration is wrong, please change : gcloud config configurations activate account1

3.Create Project : gcloud projects create PROJECT_ID

Create in progress for [https://cloudresourcemanager.googleapis.com/v1/projects/PROJECT_ID].
Waiting for [operations/cp.oooxxx] to finish...done.                                                      
Enabling service [cloudapis.googleapis.com] on project [PROJECT_ID]...
Operation "operations/acf.p2-oooxxx" finished successfully.

4.Check app.yaml exist in project if not then add

5.Build Vue.js project : npm run build

6.Deploy project to GAE : gcloud app deploy --project=PROJECT_ID

7.Choose App Engine application located area

Creating App Engine application in project [PROJECT_ID] and region [asia-northeast1]....done.                       
Services to deploy:descriptor:                  [/Users/xxx/ooo/app.yaml]
source:                      [/Users/xxx/ooo]
target project:              [PROJECT_ID]
target service:              [default]
target version:              [20211009t215518]
target url:                  [https://xxxooo.an.r.appspot.com]
target service account:      [App Engine default service account]Do you want to continue (Y/n)?

8.Input Y to continue

Beginning deployment of service [default]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 40 files to Google Cloud Storage               ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
WARNING: Node.js 10 is no longer supported by the Node.js Foundation as of April 2021. We recommend you to upgrade to the latest version of Node.js runtime as soon as possible. For details on upgrading, see https://cloud.google.com/appengine/docs/standard/nodejs/runtime.
Updating service [default]...⠼
Setting traffic split for service [default]...done.                            
Deployed service [default] to [https://xxxooo.an.r.appspot.com]
You can stream logs from the command line by running:
  $ gcloud app logs tail -s default
To view your application in the web browser run:
  $ gcloud app browse --project=localdeploy

9.Browser deployed website : gcloud app browse

Related Command

Check current config : gcloud config list

[core]
account = xxxooo@gmail.com
disable_usage_reporting = True
project = xxx-oooYour active configuration is: [default]

Error Handling

If you do not upload app.yaml, then you will meet the error message as below. You just need to upload app.yaml and then you can solve the error.

ERROR: An app.yaml (or appengine-web.xml) file is required to deploy this directory as an App Engine application. Create an app.yaml file using the directions at https://cloud.google.com/appengine/docs/flexible/python/configuring-your-app-with-app-yaml (App Engine flexible environment) or https://cloud.google.com/appengine/docs/standard/python/config/appref (App Engine standard environment) under the tab for your language.ERROR: (gcloud.app.deploy) [/Users/xxx/ooo] could not be identified as a valid source directory or file.

You may meet the error message as below when you type command `gcloud app deploy`. I just tried again and solved the error. If you still meet this error, you can refer other solutions by here.

ERROR: (gcloud.app.deploy) NOT_FOUND: Unable to retrieve P4SA: [xxx-ooo@gcp-gae-service.iam.gserviceaccount.com] from GAIA. Could be GAIA propagation delay or request from deleted apps.

You may meet this error if you still not enable Cloud Build API. You just need to enable Cloud Build API and you can solve it.

ERROR: (gcloud.app.deploy) Error Response: [7] Access Not Configured. Cloud Build has not been used in project visa-app-beta before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/cloudbuild.googleapis.com/overview?project=visa-app-beta then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.

app.yaml Sample Code

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

Reference

This is the record about learning GCP. If you find something wrong, please contact me. Thank you. =)