手把手教你在云上托管静态网站

部署一个典型的Web静态网站的全过程

前言

本教程展示了部署一个典型的Web静态网站的全过程,包括使用Amazon S3对象存储服务来存储静态网站的资源(如HTML、图片、视频等);使用Amazon CloudFront来实现访问网站内容的加速及流量成本的降低;使用域名服务Amazon Route53实现自定义域名的托管及解析。通过本教程,您可以快速实现静态网站的部署,而无需维护任何计算资源,从而降低您的运维成本。此方案适用于海外区和中国区的账户。但在中国区创建的CloudFront分配需要使用您已经通过ICP备案的域名进行访问;海外区搭建的账户则可使用CloudFront分配的域名或自定义域名进行访问。

本教程所用的架构如下:

手把手教你在云上托管静态网站

其中,我们使用Amazon S3对象存储服务来存储静态网站的资源(如HTML、图片、视频等);使用Amazon CloudFront来实现访问网站内容的加速及流量成本的降低;使用域名服务Amazon Route53实现自定义域名的托管及解析。

本教程包含如下步骤:创建Amazon S3桶、创建Amazon CloudFront分配、配置Route53域名解析、更新页面内容的方法。

关于本教程 
预计部署时间  10分钟
费用  低于 1 USD
主题 静态网站托管
受众  全栈开发人员,前端开发人员,业务开发人员,开发运维工程师
级别  初级
相关产品  amazon s3, amazon cloudfront, amazon route53, 
相关行业  通用
上次更新时间  2021年10月

教程说明

进入开发环境 

点击右侧按钮“登陆控制台”进入开发环境,如果您还没有账户,请先注册账户。

海外区域业务或个人使用,请注册“海外区域账户”;

中国区域业务(需企业营业执照认证),请注册“中国区域账户”。

操作指南

  • 第一步 - 使用 Amazon S3 控制台创建存储桶并上传网站文件

    1.1 进入S3控制台,并创建S3桶

    将域名解析迁移至 Amazon Route53
    将域名解析迁移至 Amazon Route53

    输入桶的名字并选择存储区域。

    将域名解析迁移至 Amazon Route53

    1.2 进入刚刚创建的桶里上传网站配置文件

    手把手教你在云上托管静态网站 (4)

    1.3 这里我们上传一个静态网站所需的所有文件

    您可以下载本教程内的源码,放到自己的电脑上,然后解压。解压后您将看到一个template-company-profile-apecsaos文件夹,将文件夹里的内容上传到S3。

    将域名解析迁移至 Amazon Route53

    上传完成之后,S3桶内文件如下:

    手把手教你在云上托管静态网站 (6)
  • 第二步 - 创建Amazon CloudFront 分配

    2.1 源设置

    进入 CloudFront 控制台,依次点击分配 / 创建分配 / 入门

    • 在源域名部分,选择刚刚创建的S3存储桶。
    • 对于限制存储桶访问,请选择"是"。
    • 对于源访问身份(OAI),请选择"创建新身份"。
    • 注释可以保留默认值。我们还可以为 OAI 输入自定义标签。
    • 对于授予存储桶读取权限,请选择"是,更新存储桶策略"。
    将域名解析迁移至 Amazon Route53

    2.2 默认缓存行为设置

    其中,对象缓存使用自定义的方式,手动指定 最小TTL ,最大TTL和默认TTL。TTL(Time to Live)表示对象在 CloudFront 缓存中保留的时间。最小TTL 的值太小容易导致cache频繁失效,建议使用 86400。

    将域名解析迁移至 Amazon Route53

    2.3 分配设置

    您可以配置CNAMEs来访问你在S3桶中存放的网站,注意,中国区的CloudFront需要使用已经完成ICP备案的域名。
    默认根对象指的是您使用根目录访问CloudFront的时候,默认返回的文件(这里是index.html)。其名称要和S3桶中上传的文件名称一致,且不能有“/”等表示路径的符号在名称前面。

    手把手教你在云上托管静态网站 (9)

    2.4 选择创建分配,然后等待1-3分钟状态就会变成已部署

    您可以下载本教程内的源码,放到自己的电脑上,然后解压。解压后您将看到一个template-company-profile-apecsaos文件夹,将文件夹里的内容上传到S3。

    将域名解析迁移至 Amazon Route53
  • 第三步 - 前往Route 53,添加DNS解析记录

    这一部分将我们网站的备用域名(CNAMEs)记录指向 CloudFront 分配的域名xxxx.cloudfront.cn(中国区),xxx.cloudfront.net (海外区)。

    请注意:如果您是在海外区使用,且无需使用自定义域名,您可以直接通过cloudfront分配域名访问网站,而无需进行该步的配置;如果您是中国区使用,则需确保完成以下步骤,并确保域名经过备案。

    3.1 在Route 53里面选择“托管区域”,然后点击为该网站准备的域名

    手把手教你在云上托管静态网站 (11)

    3.2 点击“创建记录”

    手把手教你在云上托管静态网站 (12)

    填入内容如下(需根据您的实际情况调整内容)

    手把手教你在云上托管静态网站 (13)

    创建完成后,显示如下:

    手把手教你在云上托管静态网站 (14)

    3.3 等新增的DNS记录生效后,就可以通过在浏览器输入CNAME域名访问到我们所托管的网站了。

    手把手教你在云上托管静态网站 (15)
  • 第四步 - 更新页面内容

    在实际使用过程中,若您需要更新页面内容,则可参考以下步骤。
    首先,向S3存储桶上传新的网站文件。

    手把手教你在云上托管静态网站 (16)

    在CloudFront上点击该网站所属分配的ID, 进入它的分配设置, 使用失效(invalidation)功能,刷新缓存。

    您可以指定特定的文件路径,也可以使用通配符,如(/index.html, /assets/css/*, *),具体可以参考官方文档。操作步骤为: 失效 → 创建失效 → 指定要失效的路径 → 点击 失效。

    手把手教你在云上托管静态网站 (17)

    失效状态就会变成正在进行,几分钟后,当状态变成Completed,网站就更新好了。

    手把手教你在云上托管静态网站 (18)
  • 第五步 - 申请免费SSL/TLS证书并使用

    申请方式,请参考教程:SSL/TLS证书申请及使用方法 。

  • 第六步 - 终止资源

    您可以在教程结束后手动删除Amazon S3存储桶、Amazon Route53 托管域及Amazon CloudFront分配,避免产生额外的费用。

  • 小结

    本教程详细介绍了部署静态网站的方法,包括使用CloudFront实现S3存储桶中内容的分发及流量成本的降低,并通过Route 53实现了使用自定义域名访问网站的。

    参考文档

    • 在 Amazon S3 上托管静态网站:https://docs.aws.amazon.com/zh_cn/AmazonS3/latest/dev/hosting-websites-on-s3-examples.html
    • 通过添加备用域名 (CNAME) 将自定义 URL 用于网站:https://docs.amazonaws.cn/AmazonCloudFront/latest/DeveloperGuide/CNAMEs.html

现在就开始在亚马逊云上构建

无论您是在寻找计算能力、数据库、存储、内容分发、人工智能与机器学习,大数据分析还是其他功能,亚马逊云科技都有相应的服务来帮助您建立具有更高灵活性、可扩展性和可靠性的复杂应用。

企业出海或个人体验

超过200项服务
包含80余种产品免费试用

发展中国业务

近百项服务
包含宁夏区域20余种产品免费试用