[GCP] Deploy Vue.js project to Google App Engine via Google Cloud CLI
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
- https://cloud.google.com/sdk/gcloud/reference/app/deploy
- https://qiita.com/toshi0607/items/90cbbacdfae6c4282c0a
This is the record about learning GCP. If you find something wrong, please contact me. Thank you. =)