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

canva

Abbreviation

Pre-processing

  1. Download Google Cloud SDK
  2. Set configuration : gcloud init
  3. Enter configuration name
  4. Login google account in browser

Procedure

NAME  IS_ACTIVE  ACCOUNT
account1 False ooo@gmail.com
account2 True xxx@gmail.com
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.
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)?
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

Related Command

  • Check current config : gcloud config list
[core]
account = xxxooo@gmail.com
disable_usage_reporting = True
project = xxx-ooo
Your 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.
Cloud Build API

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

--

--

--

尋找著在忙忙碌碌的世界中,最適合自己的生活,也或許不斷的移動城市是我的生活方式

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The 10 Most Popular Programming Articles (May 2021)

5 Things to Know About the this Parameter in JavaScript

Create a CMS with Angular + Firebase

Angular + Firebase = CMS

API Authentication with Phoenix and React — part 2

How to use React with Symfony 4

Build a Reusable Timer Component With React and Bit

HNGi8 x I4G The Beginning

Angular Routing

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Leisure Rife

Leisure Rife

尋找著在忙忙碌碌的世界中,最適合自己的生活,也或許不斷的移動城市是我的生活方式

More from Medium

Learning Cloud through GCP — Part 1: What is Cloud ?

Get started with Google Cloud Platform

Migrating Amazon Linux instances using Migrate for Compute Engine

Cloud Functions and Cloud Scheduler using Pub/Sub triggers