[GCP] Manual deploy Vue.js project to Google App Engine via GCP user interface

The procedure help you to deploy your project to GAE via GCP user interface easily if you do not need to build auto CI/CD.

canva

Abbreviation

GCP：Google Cloud Plateform
GAE：Google App Engine

Procedure

1. Add Project and Create

2. Switch to New Project

3. Go to “App Engine” Dashboard

h

4. Create Application

5. Select “Area”

6. Select “Language” and “Environment”

7. Open Cloud Shell

8. Waiting for loading Cloud Shell

9. Upload “app.yaml” and “dist” folder

10. Type command “gcloud app deploy”

11. Authorize cloud shell to make a GCP API call.

12. Check information and type “Y”

11. Type command “gcloud app browse” to see page

You may want to know

• What is the difference between standard and flexible environment ?
• What is Ephemeral Cloud Shell ?

• How to set app.yaml ?

Error Situation

• 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) [/home/rayflynu/deploy-application-trial] 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.

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

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