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

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

2022-06-10 14:41:45

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

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

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

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

先决条件

要遵循本指南,需要满足以下条件:

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

建筑

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

1

那么这里发生了什么呢?具有源资产(“”)的计算机会将其推送到 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

下面是它可能的外观:

2

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

OSS静态页面功能

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

3

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

4

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

5

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

添加 CDN

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

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

6

等待 CDN 启动:

7

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

8

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

9

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

10

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

11

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

12

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

13

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

14

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

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

15

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

锁定操作系统

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

16

17

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

18

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

19

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

20

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

21

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

22

就是这样;我们现在阻止对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服务器基础架构的痛苦。

上一篇
腾讯云国际Linux 系统如何配置防火墙软件 iptables?
下一篇
腾讯云国际云服务器登录之后没有网络,如何排查?
立即咨询 享受更轻松快捷的上云服务
联系我们
联系我们
Skype:87Cloud Alibaba
E-mail:the87cloud@outlook.com
最新活动
合作流程
解决方案
代理合作
关于我们
87Cloud Alibaba
the87cloud@outlook.com
电报交谈
Skype
企业邮箱
返回首页
回到顶部