使用 CloudBuild 在 App Engine 上部署 VueJs + Node 应用程序

Question

My project is a VueJS frontend + Node Backend. The project is organized like this:

  /api (all the backend logic, like uploading to GCS)
    package.json
  /ui (all front end logic)
    package.json
  /config
    cloudbuild.yaml
  app.yaml

My specific issue is that when the project is built, only the vue-cli portion of the project is built and deployed. The Node logic is not. What steps do I need to add to my cloudbuild or app.yaml files to ensure that the Node logic is being built and deployed along with the frontend code?

Here is my cloudbuild.yaml file for reference

//cloudbuild.yaml 
steps:
- name: gcr.io/cloud-builders/gcloud:latest
  entrypoint: "ls"
  args: ["-lah","/workspace"]
  dir: "api"
- name: node
  entrypoint: yarn
  args: ["install"]
  dir: "api"
- name: node
  entrypoint: yarn
  args: ['run', 'build']
  dir: "api"
- name: node
  entrypoint: yarn
  args: ["install"]
  dir: "ui"
- name: node
  entrypoint: yarn
  args: ['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"

Here is my app.yaml file for reference

//app.yaml
runtime: nodejs14
service: icx-ui
handlers:
  # Serve all static files with urls ending with a file extension
- url: /(.*\..+)$ 
  static_files: ui/dist/\1
  upload: ui/dist/(.*\..+)$
  # catch all handler to index.html
- url: /.*
  static_files: ui/dist/index.html
  upload: ui/dist/index.html

Answer 1

Try to change the directory of your backend logic from ui to api :

from:

- name: node
  entrypoint: yarn
  args: ['run', 'build']
  dir: "ui"

to:

- name: node
  entrypoint: yarn
  args: ['run', 'build']
  dir: "api"