How to structure my app.yaml file to succesfully deploy my Vue app to Google App Engine?

Question

Please do not flag this as a repost as I have extensively searched SO for my specific issue and reference those posts below. I am new to working with App Engine and have been troubleshooting this issue for the last day or so. After thorough research, I'm aware the issue is sourced to my app.yaml, but all configuration changes I've tried have resulted in errors. I'll start from the beginning, I started with the official documentations way of setting it up

This method resulted in many files being uploaded, but results in the following, albeit expected, errors displayed below

Afterwards I set about looking for setups specific to SPA setups, referencing this post

, this post here, and even this one.

I also checked out this article as well as I thought i pertinent to the task at hand but ultimately ended up being the same setup as above.

I have had zero success getting my site to be served and am running into errors such as

Top it all off when I do run gcloud app deploy it only uploads one file.

This is especially confusing considering that when i run the gcloud meta list-files-for-upload command I have many files including the ones I need in my src directory that has my components. Can someone explain to me why this isnt working and what the solution could be? For reference, I included my project directory setup so you all can see my app and cloudbuild.yanl files are where they're supposed to be as well.

I also inlcuded said cloudbuild.yaml setup in case there's an discrepancies there I'm not aware of

I've also been getting this error in my logs

this post and this official documentation the npm start explanation I get, but it says the script needs to listen on host 0.0.0.0 is this necessary for SPA's? I just want to be clear on all I need to do.

Answer 1

The solution for me ended up being deleting the Google Cloud SDK then reinstalling it. After that I modified my cloudbuild.yaml and it worked just fine.

Here's the cloudbuild.yaml configuration

steps:
- name: node:20
  entrypoint: npm
  args: ["install"]
- name: node:20
  entrypoint: npm
  args: ["run", "build"]
- name: "gcr.io/cloud-builders/gcloud"
  args: ["app", "deploy"]
timeout: "1600s"

here's the app.yaml configuration for those who would like a reference

runtime: nodejs20
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