App Engine 上部署的 React Webapp 显示空白页面

Question

Here's the the app.yaml for the deploying build pages to gcloud:

runtime: nodejs16
handlers:
# Serve all static files with url ending with a file extension
- url: /(.*\..+)$
  static_files: build/\1
  upload: build/(.*\..+)$
# Serve all static images with url ending with a image extension  
- url: /(.+\.(gif|png|jpg))$
  static_files: build/images/\1
  upload: build/images/.+\.(gif|png|jpg)$  
# Catch all handler to index.html
- url: /.*
  static_files: index.html
  upload: index.html

Here's the build structure for the build:

Here are the build scripts for the project:

 "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }

When I deploy app on the gcloud here's the blank page I can find the logo png url but it's not being loaded with other components:

https://mintdapp.uc.r.appspot.com/build/images/logo.png 

is the image address of the logo

Answer 1

Each service in your app has its own app.yaml file, which acts as a descriptor for its deployment. You must first create the app.yaml file for the default service before you can create and deploy app.yaml files for additional services within your app. For Node.js, the app.yaml is required to contain at least a runtime entry. For a brief overview, see Defining Runtime Settings . To handle deep links, you need a catch-all rule at the end to always serve index.html. However, before that, you need a rule which maps all your static content.

runtime: nodejs16 # or another supported version
instance_class: F2
env_variables:
  BUCKET_NAME: "example-gcs-bucket"
handlers:
- url: /example1
  static_dir: example1
- url: /.*
  secure: always
  redirect_http_response_code: 301
  script: auto

You may also try rearranging your static assets in a folder rather than under the root. Create a directory named "staticfiles" and move all html files to it(except the homepage.html) example as below; and then try redeploying

    url: /(.*\.html) 
    mime_type: text/html 
    static_files: staticfiles/\1 
    upload: staticfiles/(.*\.html)