How to deploy frontend app to Cloud App Engine using cloudbuild

Question

I am trying to deploy a React app to Google Cloud App Engine. Whenever code is pushed to GitHub, Cloud Build creates a production build folder and pushes it into a GCS bucket. I also have an app.yaml file in the same GCS bucket that I use for deployment.

I have created a Cloud Build file that performs all the necessary steps, but it fails when trying to copy the build and app.yaml files to a directory in my project that should be deployed to App Engine.

As a workaround, I run the remaining commands manually in the Cloud Shell after copying the build to GCS.

mkdir react_app

gsutil rsync -r gs://react_bucket ./react_app

gcloud app deploy ./react_app/app.yaml

Here is my current Cloud Build file:

steps:
  - name: 'gcr.io/cloud-builders/npm'
    args: ['install']
    dir: "./frontend"
    id: "install_npm"

  - name: 'gcr.io/cloud-builders/npm'
    args: ['run', 'build']
    dir: "./frontend"
    id: "run_build"

  - name: 'gcr.io/cloud-builders/gsutil'
    args: ['cp', '-r', 'frontend/build', 'gs://react_bucket']
    id: "copy_build_to_bucket"

  - name: 'gcr.io/cloud-builders/gsutil'
    args: ['cp', '-r', 'ops/app.yaml', 'gs://react_bucket']
    id: "copy_app_yaml_to_bucket"

  - name: 'gcr.io/cloud-builders/gsutil'
    args: [ 'rsync', '-r', 'gs://react_bucket, './react_app' ]
    id: "copy_bucket_to_directory"

  - name: 'gcr.io/cloud-builders/gcloud'
    args: [ 'app', 'deploy', './react_app/app.yaml' ]
    id: "deploy_to_app_engine"

Failure happens at copy_bucket_to_directory

How do i solve this so that i can run all steps within cloud build?

score 1 · Answer 1 · answered Mar 23 '23 at 20:26

I did that this afternoon. Does it helps?

steps:
  - name: 'gcr.io/cloud-builders/npm'
    entrypoint: bash
    args:
      - -c
      - |
        npm install -g n
        n stable
        npm install
        npm run ng build --prod
    timeout: 1800s
  # Deploy to google cloud app egnine
  - name: 'gcr.io/cloud-builders/gcloud'
    entrypoint: bash
    args:
      - -c
      - |
        mkdir deploy
        cp -r ./dist/* ./deploy/
        cp app.yaml ./deploy/
        cd deploy
        gcloud app deploy
    timeout: 1800s
timeout: 3600s

How to deploy frontend app to Cloud App Engine using cloudbuild

1 Answers1