在阿里云国际上使用 OSS 和 CDN 部署静态网站

作为静态文件的集合 - 静态网站和前端应用程序在部署方面几乎没有区别。它们都带有静态文件，例如HTML，CSS，JS，JPEG和PNG。

在阿里云上托管静态网站的常用方法是使用对象存储服务（OSS）和内容分发网络（CDN）的“静态托管”功能：

1. 托管资产不需要服务器
2. OSS跨地域内多个可用区存储资产的冗余副本;因此，为资产的来源提供了区域级的高可用性，而无需执行任何其他操作
3. CDN用于改善交付，从而改善用户体验
4. CDN是一个由互连服务器组成的庞大全球网络，因此在全球范围内为面向用户的服务器提供高可用性
5. OSS非常便宜

本文章87cloud在介绍一种以简单可靠的方式将静态网站/前端应用程序部署到阿里云的方法。它为希望自动化部署的公司工程团队提供了很好的参考。需要注意的是，尽管这种做法可以与视频、音频和大型文件一起使用，但阿里云 CDN 提供了针对每个用例进行优化的 CDN 类型（因此，通过分离这些资产并为每个资产使用专用的 CDN 类型，可以提供更好的用户体验）。

先决条件

要遵循本指南，需要满足以下条件：

1. Aliyuncli 和 ossutil 已安装并配置。如果您安装了Docker，更快的选择是使用“python工具箱”，其中包括
2. 已安装 curl（或者，您可以在我们检查标题的部分使用具有检查功能的浏览器）
3. 对对象存储服务 （OSS） 和内容分发网络 （CDN） 的深刻理解
4. Linux 盒子上的基本 Linux 技能

建筑

下图显示了我们将要实现的内容的简化流程：

那么这里发生了什么呢？具有源资产（“源”）的计算机会将其推送到 OSS。OSS充当CDN的“源”，每当在其缓存中找不到资产的副本时，它将从中获取资产;CDN 接受静态文件的所有请求。

实现 OSS 存储桶

创建您的 OSS 存储桶或使用现有存储桶。我将使用 CLI 来实现此目的：

# ossutil mb oss://angry-medusa
1.244258(s) elapsed
# ossutil ls oss://angry-medusa
Object Number is: 0
0.350505(s) elapsed

上传到 OSS

将当前目录中的一些静态文件上传到新创建的存储桶;在此示例中，我们上传了 1 个文档 – 一个索引.html

# ossutil cp . oss://angry-medusa –rf

下面是它可能的外观：

现在，我们在 OSS 中拥有了该文件。现在，让我们确保它为这些静态资产提供服务。

OSS静态页面功能

转到控制台和存储桶，首先，将 ACL 设置为 public read：

现在，将默认主页设置为我们的索引.html页面：

让我们验证 OSS 是否能够为我们的索引提供服务.html：

很酷，我们在OSS上托管了一个页面。简单易用。

添加 CDN

虽然OSS对于流量较小的站点来说已经足够好了，但OSS本身无法应对大量的流量（即大量的并发读取），并且绑定到一个区域。为了提供更好的用户体验，应该使用CDN，它将从物理上更接近用户的节点提供缓存的静态资产，更不用说了。另一个来自CDN吸收所有传入的读取而不是OSS。

进入控制台，设置一个指向我们的OSS作为源站的CDN域名，并使用“海外”作为区域（中国和全球选项需要您获得ICP许可证）：

等待 CDN 启动：

现在，让我们通过CDN加载我们的微型网站。通过单击新创建的CDN，我们可以打开详细信息页面，您可以在其中配置缓存规则：

在撰写本文时，CDN 的默认行为是将资源缓存 10 秒。这远非最佳设置，因为它使CDN过于频繁地返回到Origin。让我们设置一个规则，将所有资源缓存整整一个月：

让我们记下我们为CDN获得的DNS CNAME：

由于我们实际上并不拥有该域，并且未将其绑定到CDN CNAME，因此我们将在curl中发送“Host”标头来解决此问题：

我们可以看到，我们的第一个请求错过了缓存。让我们尝试发布另一个：

因此，该请求实际上是从缓存中提供的。让我们看看如果我们更新源html文件，再次上传到OSS并查询OSS和CDN会发生什么：

您可以看到 CDN 正在提供文件的过时版本。因为我们实际上知道文件何时更改以及哪个文件更改，因此我们能够使CDN失效，然后测试更新的文件是否得到满足：

请注意，这次我们在 curl 和 invalidation 中使用完整路径。这背后的原因是CDN的行为，它适用于精确的文件/目录名称，即对“http://angry-medusa.me.w.kunlungr.com/”的请求仍将为我们提供过时的文件，因为我们没有使根目录无效。

除了使可称为“拉取”的缓存无效之外，另一种技术是将较新版本的资产“推送”到CDN中。下图说明了这两种技术之间的主要区别：

如果资源被大量请求击中并发生失效，则CDN在从OSS获取新版本所需的时间内可能会无效，因为对新资源的所有请求都将被转发到源站。虽然非常健壮的OSS有一定的并发读取限制，但也可能耗尽。在这种情况下，右侧的方法更有利，因为它保证CDN始终在“HIT”的基础上运行，资产被主动“推”入，而不是依赖于从原点检索它的逻辑。

锁定操作系统

到目前为止，我们实际上已经能够从OSS或CDN请求页面。在真实环境中，这是不可取的，因为恶意用户很容易耗尽OSS读取量。要解决此问题，请先转到控制台中的 OSS，并将存储桶从“公有读取”更改为“私有”：

现在转到 CDN 控制台并更改存储桶的设置：

如果您之前尚未授权 CDN 使用 OSS，请通过以下方式进行：

您将被定向到访问启用页面：

请注意，这是一般访问规则;您可能希望通过RAM控制台更精细地限制访问。重新加载表单后，它允许从CDN访问OSS：

让我们验证一下，我们不再可以直接访问OSS，但CDN从Origin获取资产没有问题：

就是这样;我们现在阻止对OSS的直接访问，并允许从CDN访问它。

结论

如您所见，部署前端应用程序并获得OSS和CDN的显着优势是相当简单明了的：

# copy your assets over:
# ossutil cp . oss://angry-medusa –rf 

# invalidate the cache through pull:
# aliyuncli cdn RefreshObjectCaches --ObjectType Directory --ObjectPath http://angry-medusa.me/

# invalidate through push
# aliyuncli cdn PushObjectCache --ObjectPath http://angry-medusa.me/ --ObjectTyp
e Directory

# party

本文档介绍了使用 OSS 的静态网站托管功能与 CDN 配对将前端应用程序部署到阿里云的简单方法。这种方法使团队能够快速开始部署其前端应用程序，而无需经历设置和维护Web服务器基础架构的痛苦。