Cloudbuild encountered problems deploying to App Engine

Question

I have built a project using Node Vue JS, and the project's structure has different directories for front-end and back-end code. /api is the back-end code and has its own package.json, while ui is the front-end code and has its own package.json. The project is structured as follows:

/app
  /api
    package.json
  /ui
    package.json
  /config
    cloudbuild.yaml

I'm trying to use Cloudbuild to deploy a project to App Engine. cloudbuild.yaml The structure of the file is as follows:

steps:
- name: gcr.io/cloud-builders/gcloud:latest
  entrypoint: "ls"
  args: ["-lah","/workspace"]
- name: node
  entrypoint: yarn
  args: ["install"]
  dir: "api"
- name: node
  entrypoint: yarn
  args: ['global', 'add', '@vue/cli']
  dir: "ui"
- name: node
  entrypoint: yarn
  args: ['run', 'build']
  dir: "ui"
- name: "gcr.io/cloud-builders/gcloud"
  args: ["app", "deploy", "./app.yaml"]
timeout: "1600s"

Steps 0-2 complete successfully, but when building the Vue application for production, the build fails, specifically the yarn run build command. This command is listed as vue-cli-service build in package.json in the /ui directory.

The error message is/bin/sh: 1: vue-cli-service: not found

It looks like Cloudbuild can't find vue-cli, like it's not installed or doesn't know what to build.

My question is how to deploy projects with different directories to App Engine using Cloudbuild?

Answer 1

One of the core principles of Cloud Build is to start with the next execution context at each step. Only the /workspace directory is retained between each step.

In the third step, you install vue cli globally, so not in the current directory (a subdirectory of the workspace), but in the container runtime directory (/etc or elsewhere; in In any case, not under the workspace).

If you remove the global parameter, you will install the library locally in the application directory (under /workspace), so the installation will persist in subsequent steps.