部署到GCP App Engine,但不投放服务器端渲染页面

时间:2019-06-19 09:34:41

标签: node.js angular google-cloud-platform angular-universal serverside-rendering

我正在尝试将Angular 7 Universal应用程序部署到Google Cloud Platform App Engine。部署成功,但是似乎没有发生服务器端渲染,只有客户端。

构建和运行服务器可以在本地正常运行。当我在浏览器中请求页面时,我可以在服务器上看到Express / Angular呈现页面,标签和所有其他内容直接提供。

当我部署到服务器并请求页面时,我只看到返回的最小html(<app-root></app-root>),这表明我没有发生SSR。否则应用程序可以很好地工作。

我的文件夹结构如下:

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/

如果有帮助,这是上载到GCP的当前文件的调试视图的屏幕截图。

Screenshot from GCP

运行服务器之间的差异在哪里?

1 个答案:

答案 0 :(得分:0)

您未将其用于SSR的方法。查看app.yaml文件,您描述了如何为每个请求URL提供内容。例如,基于您的app.yaml,如果浏览器请求somefile.js,则应用引擎将只从somefile.js中提取dist/browser/somefile.js并将其发送给客户端。因此,使用这些处理程序规则,您只需告诉app-engine将存储桶中的所有静态内容发送到浏览器,然后浏览器就可以正常运行所有js文件并在浏览器端显示内容。 如果要使用SSR,则必须部署诸如Express应用程序,Spring Jsp应用程序之类的东西,其中您构建的应用程序将处理在路由规则中指定的每个端点的内容,而不是由应用程序引擎提供这样的静态内容。