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

Question

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

Answer 1

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

这只会上传/更新已从现有存储桶文件更改的文件.

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

Answer 2

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

像 AWS S3 这样的静态文件托管无法实现动态 SSR（服务器端渲染）。在将页面交给客户端浏览器之前，它需要一个服务器端 Javascript 引擎 (nodejs) 来预渲染页面；除了提供一些静态文件之外，Amazon S3 没有任何功能。

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

例如，

aws s3 sync ./dist/<your_awesome_ng_project> s3://<your_awesome_bucket_name>/ --delete.

您可以参考这个 circle CI 配置，我正在构建一个角度项目并部署到 S3 存储桶https://github.com/jaisonpjohn/dbeaver-password-retriever-ng/blob/master/.circleci/config.yml

有关动态 SSR（服务器端渲染）和静态预渲染的更多信息

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

动态 SSR（服务器端渲染）和静态预渲染

动态 SSR的概念是，将有一个实时节点服务器启动，每当一个路由被命中时，它就会动态生成和序列化应用程序——将该字符串返回给浏​​览器。

静态预渲染是当我们想要预渲染路由列表并创建静态文件（即：index.html、about-us.html 等）然后使用我们选择的服务器来提供这些文件时稍后的。

那么我们如何知道选择哪一个以及何时选择呢？

预渲染通常会为您提供更好的性能，因为我们不会等待服务器访问您的应用程序中所有必需的 API，并且不需要“序列化”任何东西，它已经为每个应用程序输出了所有序列化的 HTML路由文件之一。

在决定需要走哪条路线之前，您需要考虑以下几点。

何时使用静态预渲染：

• 您的应用程序本身是静态的。（或至少是您尝试预渲染的路线）例如：主页 | 关于我们 | 联系我们

• 站点中非常动态的部分（以及位于登录/身份验证屏障后面的部分）可以指向应用程序的正常客户端呈现 (CSR) 版本，并且 Angular 可以正常引导自身。

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

何时使用动态 SSR：

• 您的应用程序（以及您需要到 SSR 的路由）是非常动态的
• 您有一份“趋势产品”列表 | “实时数据” | 等等，您需要为每个服务器端渲染正确填充。
• 您的应用程序结构是基于 JSON 文件或 CMS 呈现的，其中任何内容都可能在任何给定时刻发生变化。

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

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

顺便说一句，Angular Universal 现在是主要 ng 项目的一部分

这个答案有点晚了，不知道你有没有得到你的答案。但无论如何我都会在这里添加它以帮助其他 SO 用户。

在这里开赏金。

Answer 3

我已经在我当前的组织中实施了它。我的情况的不同之处在于，由于库存，我们的内容是动态的。因此，我们过去只将预渲染的页面发送给所有爬虫，而不发送给真实用户。这样做的原因如下：

1. 不要将爬虫发送到真实服务器，否则会影响我们的分析。
2. 为什么要为只需要静态数据的爬虫麻烦我们的服务器。
3. 最重要的是，大多数引擎无法呈现 Angular 标签。基本上，它们在显示搜索结果之前不会在页面上执行 javascript。如果我们不这样做；我们网站的搜索结果看起来很糟糕。

我们是如何做到的：在我们的 nginx 上；如果用户代理是任何搜索引擎，我们配置了将请求传输到安装了https://github.com/prerender/prerender的预渲染服务器（独立服务器）的规则。

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

所以，要解决你的问题：在你的 nginx 中；只需将所有请求传输到预渲染服务器即可。

如果您遇到任何问题，请告诉我。我已经实现了它，并且我知道这肯定会起作用。一切顺利。