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

Posted

技术标签:

【中文标题】部署到 GCP App Engine,但不提供服务器端渲染页面【英文标题】:Deployment to GCP App Engine, but not serving Server Side Rendered pages 【发布时间】:2019-11-02 00:11:41 【问题描述】:

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

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

当我部署到服务器并请求页面时,我只看到返回的最小 html (<app-root></app-root>),这表明我没有发生 s-s-r。否则应用程序运行良好。

我的文件夹结构如下:

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 的当前文件的调试视图的屏幕截图。

运行服务器之间的这种差异发生在哪里?

【问题讨论】:

【参考方案1】:

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

【讨论】:

以上是关于部署到 GCP App Engine,但不提供服务器端渲染页面的主要内容,如果未能解决你的问题,请参考以下文章

Spring Boot GCP:将 PubSub 应用程序部署到 App Engine 标准环境时出现“Google 凭据”异常

[GCP][App Engine] Streamlit Web 应用部署 - 容器崩溃

如何在 App Engine (GCP) 上部署 Streamlit 应用程序?

在 GCP App Engine 上部署 Django、Django REST Framework 后端和 VueJS + webpack 前端(标准)

使用GCP API密钥限制对特定GCP App Engine服务的访问?

部署在 Google App Engine 上的应用的 /healthz 路由返回 404