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

     2023-03-07     176

关键词:

【中文标题】部署到 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 应用程序等的东西。您构建的应用程序处理您在路由规则中指定的每个端点的内容,而不是应用程序引擎提供这样的静态内容。

【讨论】:

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

】SpringBootGCP:将PubSub应用程序部署到AppEngine标准环境时出现“Google凭据”异常【英文标题】:SpringBootGCP:"GoogleCredentials"ExceptionWhenDeployingPubSubApplicationtoAppEngineStandardEnvironment【发布时间】:2021-06-1511:01:39【问题描述】:我... 查看详情

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

】如何在AppEngine(GCP)上部署Streamlit应用程序?【英文标题】:HowdoyoudeployaStreamlitapponAppEngine(GCP)?【发布时间】:2020-03-2122:35:38【问题描述】:我的目标是部署一个用Sreamlit编写的简单网络应用,例如app.pyimportstreamlitasstst.title(\'HelloW... 查看详情

连接到 GCP App Engine 上的 SocketIO 服务器时如何使用域而不是公共 IP?

...间】:2021-03-1720:43:25【问题描述】:我已将JavaSpring后端部署到GAE柔性环境。我使用netty-socketio来托管socketIO服务器。我可以 查看详情

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

】在GCPAppEngine上部署Django、DjangoRESTFramework后端和VueJS+webpack前端(标准)【英文标题】:DeployingDjango,DjangoRESTFrameworkbackend&VueJS+webpackfrontendonGCPAppEngine(standard)【发布时间】:2021-04-1111:06:17【问题描述】:我有以下设置:Django==3.1... 查看详情

将 PHP 代码从 github 部署/重新部署到 GCP Compute Engine LAMP Stack 的最佳方式 [Google 点击部署]

】将PHP代码从github部署/重新部署到GCPComputeEngineLAMPStack的最佳方式[Google点击部署]【英文标题】:Thebestwaytodeploy/redeployPHPcodefromgithubtoGCPComputeEngineLAMPStack[GoogleClicktoDeploy]【发布时间】:2021-11-2119:47:53【问题描述】:百花齐放!有人... 查看详情

将 Parse 服务器部署到 Google App Engine

】将Parse服务器部署到GoogleAppEngine【英文标题】:DeployingParseservertoGoogleAppEngine【发布时间】:2016-01-3006:33:21【问题描述】:我正在为GoogleAppEngine设置解析服务器,但我在app.yaml文件中的环境变量所需的值方面遇到了问题。例子:e... 查看详情

如何将新服务部署到 Google App Engine 中的现有应用程序?

】如何将新服务部署到GoogleAppEngine中的现有应用程序?【英文标题】:HowcanIdeploynewservicetotheexistingappinGoogleAppEngine?【发布时间】:2020-01-2223:10:01【问题描述】:我想在GoogleCloudPlatform的App-engine中创建新服务并将其部署到现有应用... 查看详情

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

】部署在GoogleAppEngine上的应用的/healthz路由返回404【英文标题】:/healthzrouteofanappdeployedonGoogleAppEnginereturns404【发布时间】:2021-01-2201:04:03【问题描述】:对部署在GoogleAppEngine上的应用上的/healthz路由的HTTP请求似乎没有到达应用内... 查看详情

GCP App Engine / Angular - 无法加载模块脚本:服务器以“text/html”的非 JavaScript MIME 类型响应

】GCPAppEngine/Angular-无法加载模块脚本:服务器以“text/html”的非JavaScriptMIME类型响应【英文标题】:GCPAppEngine/Angular-Failedtoloadmodulescript:Theserverrespondedwithanon-JavaScriptMIMEtypeof"text/html"【发布时间】:2020-09-1004:19:51【问题描述... 查看详情

将 GCP App Engine 限制为仅使用 1 个单元的 app engine flex core

】将GCPAppEngine限制为仅使用1个单元的appengineflexcore【英文标题】:LimitGCPAppEnginetouseonly1unitofappengineflexcore【发布时间】:2021-01-2217:54:06【问题描述】:我是GCP应用引擎的新手——我有一个node.js应用在应用引擎flex上运行。目前,Go... 查看详情

如何从 Cloud Storage 存储桶提供 App Engine 网站的 /static/ 目录内容?

】如何从CloudStorage存储桶提供AppEngine网站的/static/目录内容?【英文标题】:HowtoserveanAppEnginewebsite\'s/static/directorycontentfromCloudStoragebucket?【发布时间】:2019-01-2521:28:36【问题描述】:我想在GCP上运行Node.js应用,同时只将脚本上传... 查看详情

如何将我的 java 应用程序日志记录事件映射到 GCP Felexible 非兼容 App Engine 中相应的云日志记录事件级别?

...我的java应用程序日志记录事件映射到GCPFelexible非兼容AppEngine中相应的云日志记录事件级别?【英文标题】:HowdoImapmyjavaapploggingeventstocorrespondingcloudloggingeventlevelsinGCPFelexiblenon-compatAppEngine?【发布时间】:2016-09-2201:40:48【问题描述... 查看详情

将 Meteor 部署到 Google App Engine 2017

】将Meteor部署到GoogleAppEngine2017【英文标题】:DeployMeteortoGoogleAppEngine2017【发布时间】:2017-09-2920:26:49【问题描述】:所以我正在尝试将一个简单的流星应用程序部署到GoogleAppEngine。我试过按照本教程https://cloud.google.com/community/tut... 查看详情

将使用 Yarn 的 Next.JS 网络应用程序部署到 Google App Engine

】将使用Yarn的Next.JS网络应用程序部署到GoogleAppEngine【英文标题】:DeployNext.JSweb-appthatusedYarntoGoogleAppEngine【发布时间】:2020-12-1422:30:56【问题描述】:我正在尝试部署一个使用朋友提供的模板构建的网络应用程序。我对React/NextJS... 查看详情

将 PHP 应用程序部署到 App Engine 时出错

】将PHP应用程序部署到AppEngine时出错【英文标题】:ErrordeployingPHPapplicationtoAppEngine【发布时间】:2022-01-1607:35:27【问题描述】:我的应用只有两个文件:index.php和app.yaml在同一个目录下。每次尝试将应用程序部署到AppEngine时,我... 查看详情

尝试在 GCP App Engine 任务队列中安排任务时出现 InvalidTaskNameError

】尝试在GCPAppEngine任务队列中安排任务时出现InvalidTaskNameError【英文标题】:InvalidTaskNameErrorwhiletryingtoscheduleataskinaGCPAppEnginetaskqueue【发布时间】:2021-09-0203:25:02【问题描述】:我正在尝试使用谷歌任务队列包"google.golang.org/app... 查看详情

将节点应用程序部署到 Google App Engine 标准环境

】将节点应用程序部署到GoogleAppEngine标准环境【英文标题】:DeploynodeapplicationtoGoogleAppEnginestandardenvironment【发布时间】:2017-05-2714:25:30【问题描述】:直到2016年12月,我能够,app.yaml如下所示:runtime:nodejsvm:trueapi_version:1manual_scali... 查看详情

App Engine 上的 Laravel 8:“请提供有效的缓存路径”

...将一个Laravel项目从版本7升级到了8。当我尝试在AppEngine上部署它时,它无法显示“请提供有效的缓存路径”:Updatingservice[***]...fail 查看详情