如何在S3上上传预渲染文件,并在我们网页的初始加载时访问该文件



我的web应用程序是使用Angular Universal Starter工具包实现的。我想把预渲染的文件上传到S3存储桶,这样我的初始页面加载得更快。但我找不到关于将预渲染文件上传到S3的正确配置,以及如何在初始加载时访问该文件?

Angular Universal可用于动态SSR(服务器端渲染)和静态预渲染

动态SSR(服务器端渲染)无法使用像AWS S3这样的静态文件托管来实现。它需要一个服务器端Javascript引擎(nodejs)来预渲染页面,然后再将其移交给客户端bowser;AmazonS3除了提供一些静态文件之外,根本没有任何功能。

另一方面,对于具有angular universal的静态预渲染,可以利用AWS S3,因为它都是静态的html/js/css文件。不过,有一个问题是,每次静态文件内容更改时,都必须启动构建/CI-CD过程,以便将生成的静态文件部署到S3存储桶中。如果这对您来说是可以的,那么这与将任何其他静态站点部署到S3没有什么不同。

例如,

CCD_ 1。

你可以参考这个circle配置,我正在构建一个有角度的项目并部署到S3 buckethttps://github.com/jaisonpjohn/dbeaver-password-retriever-ng/blob/master/.circleci/config.yml

更多关于动态SSR(服务器端渲染)&静态预渲染

请参考这篇文章来了解更多信息。我在这里引用的相关部分

动态SSR(服务器端渲染)&静态预渲染

动态SSR的概念是,将有一个实时节点服务器启动,每当路由被命中时,它将动态生成并序列化应用程序——将HTML返回到浏览器。

静态预渲染是指我们想要预渲染路由列表,并创建静态文件(例如:index.html、about-us.html等),然后使用我们选择的服务器稍后提供这些文件。

那么,我们如何知道何时该选择哪一个呢

预渲染通常会为您提供更好的性能,因为我们不需要等待服务器在您的应用程序中调用所有必要的API,也不需要"序列化"任何东西,它已经为每个Routes文件输出了应用程序的所有序列化HTML。

在决定走哪条路之前,你需要考虑以下几点。

何时使用静态预渲染:

  • 您的应用程序本身相当静态。(或者至少是您尝试预渲染的路线)例如:主页|关于我们|联系我们

  • 您的站点的非常动态的部分(以及登录/验证屏障后面的部分)可以指向应用程序的正常客户端渲染(CSR)版本,Angular可以正常引导自己。

  • 您的应用程序不经常更新。每当需要对静态路由进行一些更改时,您只需再次运行构建脚本,然后重新发布包含所有预渲染文件的/dist文件夹。

何时使用动态SSR:

  • 您的应用程序(以及您需要的SSR路由)非常动态
  • 您有一个"趋势产品"|"实时数据"|等的列表,每次服务器端渲染都需要正确填充这些列表
  • 您的应用程序结构是基于JSON文件或CMS呈现的,其中任何内容都可能在任何给定时刻发生更改

通常,大多数应用程序都需要静态预渲染(因为身份验证墙后面的任何路径都不会从使用SSR中获得太多/任何好处,因为主要目的之一是SEO收益和提高感知性能。请记住,您的应用程序的某些方面总是可以在SSR期间不呈现,并在CSR期间填充这些动态部分!

类似的问题(这个问题是关于另一个静态文件服务器nginx,而不是S3):https://github.com/angular/universal/issues/554

BTW,Angular Universal是目前主要ng项目的一部分

这个答案有点晚了,我不知道你是否已经得到了答案。但我在这里添加它是为了帮助其他SO用户。

使用预先呈现的HTML与上传静态网站相同。假设您已经安装并配置了aws-cli(使用aws configure),则可以在该目录上运行以下命令,将文件上载到s3存储桶中。

这只会上传/更新那些从现有bucket文件。

aws s3 sync my_local_dir s3://my_s3_bucket_name

此外,如果你想设置缓存,那么你可以添加以下选项

aws s3 sync my_local_dir s3://my_s3_bucket_name --cache-control max-age=604800

我已经在我当前的组织中实现了它。我的情况不同由于库存,我们的内容是动态的。因此,我们过去只向所有爬网程序发送预渲染页面,而不向真实用户发送。这样做的原因如下:

  1. 不要将爬网程序发送到真实的服务器,否则会影响我们的分析
  2. 为什么要为只需要静态数据的爬网程序麻烦我们的服务器
  3. 最重要的是,Most引擎无法渲染Angular标记。。基本上,在显示搜索结果之前,他们不会在页面上执行javascript。如果我们不这样做;我们网站的搜索结果会很糟糕

我们是如何做到的:在我们的nginx上;如果用户代理是搜索引擎中的任何一个,则我们配置了将请求传输到预呈现服务器(独立服务器)的规则https://github.com/prerender/prerender已安装。

最重要的是,在此预渲染服务器上配置了s3HtmlCache插件。。这个插件首先检查S3中的页面是否可用;如果没有,它将在运行时创建页面-->保存在s3-->发送到客户端中。

所以,为了解决你的问题:在你的nginx中;只需将所有请求传输到预渲染服务器。

如果你遇到任何问题,请告诉我。我已经实施了它,我知道这肯定会奏效。一切顺利。

最新更新