Cloudbuild can't find my package.json from my Vue app

Question

I am attempting to deploy a Vue JS app to GCP App Engine via GCP Cloud Build. I've followed the instructions and have created a cloudbuild.yaml file in a separate directory from the app.yaml file. The build errors with

error Couldn't find a package.json file in "/workspace"

It looks like the first two steps of the cloudbuild.yaml file execute successfully, but it fails when it tries to run the build.

The directory is like so:

root/
├─ config/
│  ├─ cloudbuild.yaml
app.yaml
package.json

Here is my app.yaml file

runtime: nodejs10
service: icx-ui

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

My cloudbuild.yaml is as follows:

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

As you can see, I add a file path to my app.yaml file

Answer 1

The defined source directory of your gcloud builds submit command is dist/ which is the built, production version of your app. This directory does not contain both package.json and app.yaml by default.

Running yarn run build on Cloud Build requires files such as src/ and package.json to build the files (dist) that you will serve via App Engine. The solution is to specify the root project as the source directory of the build:

gcloud builds submit --config ./config/cloudbuild.yaml .

If at some case this brought you concerns where some unnecessary files are included on deployment such as node_modules, you can ignore such files by specifying them on .gcloudignore.