[GCP] Auto deploy Vue.js project to Google App Engine by Github Action

Leisure Rife

4 min readOct 17, 2021

The procedure help you to deploy your Vue.js project to GAE by Github Action.

Abbreviation

GCP：Google Cloud Plateform
GAE：Google App Engine

Auto deploy Vue.js project to Google App Engine by Github Action

1.Add project in GCP

2.Initialize an App Engine application

3.Go to IAM & Admin -> Service Accounts and click 「CREATE SERVICE ACCOUNT」

4.Fill the service account name

5. Grant the service account with Editor role.

6.Skip to grant and click「DONE」

7.Check service account is created successfully

8.Click 「Manages keys」 in Actions

9.Click 「ADD KEY」

10.Create JSON type key

11.Automatically download the key file in local

12.Switch to 「APIs & Services」

13.Enable App Engine Admin API

14.Check App Engine Admin API is enabled successfully

15.Enable Cloud Build API

16.Check Cloud Build API is enabled successfully

17.Switch to Github Repository Settings -> 「Secrets」

18.Add a repository secret for deploying to GCP. Paste the Json key which we created at step11 to the 「Value」 field

19.Add app.yaml and .github/workflows/ci.yaml in the repository. (You can refer the sample code in the last)

20.Get the URL for the website by Github Action or App Engine

21.Check the website

Error Handling

If you do not Initialize App Engine application, then you will meet the error message as below.

Error: ERROR: (gcloud.app.deploy) The current Google Cloud project [***] does not contain an App Engine application. Use `gcloud app create` to initialize an App Engine application within the project.

If you do not enable App Engine Admin API, then you will meet the error message as below.

Error: ERROR: (gcloud.app.deploy) User [github-action-account@***.iam.gserviceaccount.com] does not have permission to access apps instance [***] (or it may not exist): App Engine Admin API has not been used in project 12345678 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/appengine.googleapis.com/overview?project=12345678 then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.
- '@type': type.googleapis.com/google.rpc.Help
  links:
  - description: Google developers console API activation
    url: https://console.developers.google.com/apis/api/appengine.googleapis.com/overview?project=12345678
- '@type': type.googleapis.com/google.rpc.ErrorInfo
  domain: googleapis.com
  metadata:
    consumer: projects/12345678
    service: appengine.googleapis.com
  reason: SERVICE_DISABLED

If you do not enable Cloud Build API, then you will meet the error message as below.

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

If you meet the static file’s cache problem, then you can solve it by the link.

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

ci.yaml Sample Code

name: CI/CDon:
  push:
    branches:
      - 'feature/*'
      - 'development'
      - 'main'jobs:
  unit_test_and_build:
    runs-on: ubuntu-20.04
    timeout-minutes: 10
    steps:
      - uses: actions/checkout@v2
      - name: npm ci
        run: npm ci
      - name: npm run test
        run: npm run test
      - name: npm build
        run: npm run build
      - id: deploy
        uses: google-github-actions/deploy-appengine@main
        with:
          credentials: ${{ secrets.GCP_SA_KEY }}
      - name: show url
        run: gcloud app describe

Reference

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