部署到 GCP App Engine，但不提供服务器端呈现的页面

Question

I am trying to deploy an Angular 7 Universal application to Google Cloud Platform, App Engine. Deployment is successful, but it seems there is no Server Side Rendering happening, only client side.

Building, and running a server work fine locally. When I request the page in the browser, I can see Express / Angular rendering page on the local server, tag and all other content is served directly.

When I deploy to the server and request the page, I only see a minimal html returned ( <app-root></app-root> ) which shows me there is no SSR happening. Application otherwise works well.

My folder structure looks like this:

dist/

  - browser/
    - index.html
    - other js / css / assets

  - server/
    - main.js

  - server.js

package.json

"scripts": {
    ...
    "start": "node dist/server.js",

app.yaml

runtime: nodejs10

handlers:
# Routing for bundles to serve directly
- url: /((?:runtime|main|polyfills|styles|vendor)\.[a-z0-9]+\.js)
  #secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/\1
  upload: dist/browser/.*

# Routing for bundle maps to serve directly
- url: /((?:runtime|main|polyfills|styles|vendor)\.[a-z0-9]+\.js\.map)
  #secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/\1
  upload: dist/browser/.*

# Routing for a prod styles.bundle.css to serve directly
- url: /(styles\.[a-z0-9]+\.css)
  #secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/\1
  upload: dist/browser/.*

# Routing for typedoc, assets, and favicon.ico to serve directly
- url: /((?:assets|docs)/.*|favicon\.ico)
  #secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/\1
  upload: dist/browser/.*

# Any other requests are routed to index.html for angular to handle so we don't need hash URLs
- url: /.*
  #secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/index.html
  upload: dist/browser/index\.html
  http_headers:
    Strict-Transport-Security: max-age=31536000; includeSubDomains
    X-Frame-Options: DENY

- url: /
  static_dir: dist/

If it helps, here is a screenshot of Debug View of current files uploaded to GCP.

Where is this discrepancy between running the server happening?

Answer 1

The approach you use it not for SSR. Look at the app.yaml file, you describe how to serve the contents for each request URL. For example, based on your app.yaml, if a browser request somefile.js then app engine will just take that somefile.js from dist/browser/somefile.js and send to client. Therefore with these handlers rule, you simply tell app-engine to send all static content from the bucket to browser, then browser run all js files as normal and display the content on browser side. If you want SSR you must deploy something like an express app, Spring jsp app, etc. where the the app you build handle the content for each endpoint you specify in routing rules, not app-engine serve static content like this.