Why am I getting a 404 Error when Deploying Google Cloud NodeJS Application?-CodePudding

I'm building a NodeJS/React app in the Google Cloud Console. The app runs correctly with npm run preview when in the vite-project directory. However, when I try to deploy by cd'ing into Top_Level_Directory and running gcloud app deploy, I get an error 404 in the deployment URL. I am guessing the issue is in my app.yaml or folder structure. Can anyone find the error?

Folder structure:

```
Top_Level_Directory:
```

—package.json
—package-lock.json
—app.yaml
—vite-project
  —node_modules
  —style.css
  —router.jsx
  —package.json
  —package-lock.json
  —main.jsx
  —index.html
  —home_page.jsx
  —favicon.svg
  —App.jsx
  —node_modules
  —dist
     —index.html
     -assets
       -index.bab0b7c5.css
       -index.6689790b.js
       -favicon.17e50649.svg

App.yaml:

# [START cloud_tasks_app_yaml]
runtime: nodejs14

# [START cloud_tasks_app_env_vars]
env: standard
# [END cloud_tasks_app_env_vars]

# Handlers for serving the index page.
handlers:
  - url: /vite-project
    static_dir: /vite-project
  - url: /
    static_files: index.html
    upload: index.html
# [END cloud_tasks_app_yaml]

CodePudding user response：

npm run preview relies on npm run build being run first to populate the dist folder with generated static assets. Your static_dir in App.yaml should point to this dist directory so that the files therein may be served.

I recommend overhauling your project structure to separate static, generated, and dynamic assets.

Example Structure

—vite-project
  —dist
     —index.html
     -assets
  —node_modules
  -public
    -favicon.ico
    -index.html
    -manifest.json
    -robots.txt
  -src
    —style.css
    —router.jsx
    —main.jsx
    —home_page.jsx
    —favicon.svg
    —App.jsx
  —package.json
  —package-lock.json
  —app.yaml

CodePudding user response：

Resolved:

Edited app.yaml in the vite-project folder as follows:

# [START cloud_tasks_app_yaml]
runtime: nodejs14

# [START cloud_tasks_app_env_vars]
env: standard
# [END cloud_tasks_app_env_vars]

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

Then ran cloud app deploy (as well as any npm commands) from within the vite-project folder.