假设您要在阿里云 OSS 上托管静态网站。您注册了域名(例如,examplewebsite.com)并且想要从 OSS 内容响应对 http://examplewebsite.comhttp://www.examplewebsite.com 的请求。不论您是已经有了要在 OSS 上托管的静态网站,还是要从头开始创建,都可以通过以下示例了解如何在阿里云 OSS 上托管网站。

准备工作

本教程涉及到以下服务:

  • 域名注册

    如果您没有注册域名(如examplewebsite.com),请选择一个注册商进行注册。阿里云也提供域名注册服务。详情请参考阿里云域名服务

  • 阿里云 OSS

    您可以使用阿里云 OSS 创建 bucket,上传示例网页,配置权限允许所有人查看内容,然后配置 bucket 的网站托管功能。在本示例中,因为要允许对 http://examplewebsite.comhttp://www.examplewebsite.com 的请求,所以需要创建两个 bucket。您可以仅在一个 bucket 中托管内容,再配置另一个 bucket 将请求重定向到托管内容的 bucket。

  • 云解析

    您可以将阿里云解析配置为域名解析服务 (DNS) 提供商。在本示例中,您可以将域名添加到云解析并定义 CNAME 记录,这样能够使用您的域名而不是 OSS 分配的访问域名来访问 OSS bucket。

    • 假设您已基本了解域、DNS 和 CNAME 记录。有关这些概念的更多信息,请参考记录类型或域名注册商的网站。

    • 在本示例中,我们使用阿里云解析。但您可以通过大多数注册商定义指向 OSS bucket 的 CNAME 记录。

说明

本教程使用 examplewebsite.com 作为域名。请使用您注册的域名替换此域名。

步骤 1:注册域名

如果您已有注册域名,可以跳过该步骤。如果您从未托管过网站,请先注册一个域名,例如 examplewebsite.com。您可以使用阿里云域名服务注册一个域名。

详情请参考购买域名

步骤 2:创建和配置 bucket 并上传数据

您可以创建两个 bucket,以同时支持来自根域名(如 examplewebsite.com)和子域名(如 http://www.examplewebsite.com)的请求。一个 bucket 用于存储内容,另一个 bucket 用于将请求重定向到存储内容的 bucket。

步骤 2.1:创建两个 bucket

在该步骤中,使用阿里云帐户登录 OSS 控制台,并创建以下两个 bucket:

  • originbucket:用于存储内容
  • redirectbucket:用于将请求重定向到originbucket
  1. 登录OSS 控制台
  2. 创建两个 bucket(例如originbucketredirectbucket)。将两个 bucket 的读写权限设置为公共读取,以便所有人都可以查看 bucket 的内容。

    详细流程,请参考创建 bucket

  3. 记下originbucketredirectbucket的访问域名。在后续步骤中将会用到它们。您可以在 bucket 的概览页面上找到 bucket 的访问域名,如下图所示。

  4. 将网站数据上传到 originbucket

    您将在根域 bucket originbucket 外托管内容,并且将针对子域 bucket redirectbucket 的请求重定向到根域 bucket originbucket。您可以在任一 bucket 中存储内容。

    本示例将内容托管在originbucket bucket 中。内容可以是任何类型的文件,例如文本文件、照片和视频。如果您尚未创建网站,您在本示例中仅需要两个文件。一个文件用作网站首页,另一个文件用作网站的错误页面。

    例如,使用以下 HTML 创建一个名为 index.html 的文件,并将其上传到 bucket。在后续步骤中,将使用此文件名作为网站的默认首页。

    <html>
       <head>
           <title>Hello OSS!</title>
           <meta charset="utf-8">
       </head>
       <body>
           <p>开始阿里云 OSS 托管</p>
           <p>这是索引页面</p>
       </body>
     </html>

    您可以使用以下 HTML 创建另一个名为error.html 的文件,并将其上传到bucket。此文件用作网站的 404 错误页面。在后续步骤中,将使用此文件名作为网站的默认404 页面。

    <html>
    <head>
       <title>Hello OSS!</title>
       <meta charset="utf-8">
    </head>
    <body>
       <p>这是 404 错误页面</p>
    </body>
    </html>
步骤 2.2:配置 bucket 的网站托管功能

在配置 bucket 的网站托管功能后,可以通过 OSS 分配的访问域名访问该网站。

在此步骤中,将 originbucket 配置为网站。

  1. 登录OSS 控制台
  2. 从 bucket 名称列表中,选择 originbucket
  3. 单击基础设置页签,找到静态页面区域。
  4. 单击设置,然后输入以下信息:
    • 默认首页:索引页面(相当于网站的 index.html)。只能使用已存储在 bucket 中的 HTML 文件。在本示例中,输入index.html

    • 默认 404 页:当访问错误路径时,返回默认的 404 页面。只能使用已存储在 bucket 中的 HTML 和图像文件。在本示例中,输入 error.html

  5. 单击保存
步骤 2.3:配置索引页面的重定向功能

配置 originbucket的默认首页和错误页面之后,您还需要配置redirectbucket 的默认首页。

参考以下步骤配置索引页面的重定向功能:

  1. 登录OSS 控制台
  2. 从 bucket 名称列表中,选择 redirectbucket
  3. 单击基础设置页签,找到静态页面区域。
  4. 单击设置,然后在默认首页文本框中输入 index.html
  5. 单击保存

步骤 3:将域名绑定到 OSS bucket

现在,您已有了根域名examplewebsite.com和OSS bucketoriginbucket,接下来您需要将域名绑定到 OSS bucket,以便能够使用您的域名而不是 OSS 分配的域名来访问 OSS bucket。

在本示例中,在将域名examplewebsite.com绑定到OSS bucketoriginbucket之前,必须使用 OSS 分配的域名 originbucket.oss-cn-beijing.aliyuncs.com 访问 bucket originbucket。在绑定域名 examplewebsite.com 后,可以使用此 examplewebsite.com 来访问 OSS bucket。

同样,还需要将子域名www.examplewebsite.com绑定到OSS bucketredirectbucket,以便能够使用www.examplewebsite.com而不是 OSS 分配的域名 originbucket.oss-cn-beijing.aliyuncs.com 来访问 OSS bucket。

参考以下步骤将根域名 examplewebsite.com绑定到OSS bucketoriginbucket

  1. 登录OSS 控制台
  2. 从 bucket 名称列表中,选择 originbucket
  3. 单击域名管理页签。
  4. 单击绑定用户域名
  5. 用户域名文本框中,输入根域名examplewebsite.com
  6. 将 CNAME 记录定义为 originbucket。
    • 如果已在阿里云帐户下解析域名,则可以打开自动添加 CNAME 记录开关。然后单击提交

    • 如果未在阿里云主帐户下解析域名,自动添加 CNAME 记录开关处于禁用状态。执行以下步骤,手动添加 CNAME 记录,然后单击提交

      1. 在云解析中添加域名。
        • 如果域名是在阿里云中注册的,它会自动添加到云解析列表中。您可以跳过该步骤。
        • 如果域名是通过第三方平台注册的,请参考添加域名将域名添加到云解析列表。
      2. 在云解析控制台中,找到域名。
      3. 单击域名。
      4. 单击添加解析
      5. 添加解析对话框中,从记录类型下拉框中选择CNAME,然后在记录值文本框中输入 bucket 的 OSS 域名。在本示例中,输入originbucket.oss-cn-beijing.aliyuncs.com
      6. 单击确认
  7. 参考上述步骤,将子域名www.examplewebsite.com绑定到 OSS bucketredirectbucket

步骤 4:配置网站重定向功能

您已配置 bucket 的网站托管功能并将自定义域名绑定到 OSS bucket,接下来需要配置redirectbucket,将http://www.examplewebsite.com的所有请求重定向到 http://examplewebsite.com

参考以下步骤配置网站的重定向功能:

  1. 登录OSS 控制台
  2. 从 bucket 列表中,选择redirectbucket
  3. 单击基础设置页签,找到镜像回源区域。
  4. 单击设置,然后单击创建规则
  5. 创建 404 重定向规则,具体步骤如下:
    1. 在回源类型区域,选择重定向
    2. 回源条件区域,设置HTTP 状态码404
    3. 回源地址区域,选择添加前后缀,输入originbucket的域名。在本示例中,输入examplewebsite.com
    4. 单击确定

步骤 5:(可选)使用阿里云 CDN 加快网站速度

您可以使用阿里云 CDN 改善网站性能。CDN 让您的网站文件(如 HTML、图像和视频)可供全球各地的数据中心(即,边缘节点)使用。当访问者从您的网站请求文件时,CDN 自动将请求重定向到最近边缘节点上的文件副本。因此下载速度要快于访问者从较远的数据中心请求内容。

CDN 在边缘节点缓存内容的时间长度由您指定。如果访问者请求的内容的缓存时间超过了到期日期,CDN 会检查源服务器,看看是否有新版本的内容可用。如果有新版本,CDN 将新版本复制到边缘节点。您对原始内容所做的更改会在访问者请求内容时复制到边缘节点。但在到期日期前,内容仍为之前的版本。我们建议打开CDN 缓存自动刷新开关,以便您对原始内容所做的更改可以在 CDN 缓存中自动实时刷新。

参考以下步骤使用 CDN 加快originbucket速度:

  1. 在 CDN 控制台中添加 CDN 加速域名,并复制该域名的 CNAME 地址。详情请参考CDN 快速入门中的步骤 2:添加加速域名。
  2. 在云解析控制台中定义 CNAME 记录。详情请参考配置CNAME流程
  3. 打开CDN 缓存自动刷新开关。
    1. 登录OSS 控制台
    2. 从 bucket 列表中,选择 originbucket
    3. 单击域名管理页签。
    4. 打开CDN 缓存自动刷新开关。
  4. 参考上述步骤,使用 CDN 为redirectbucket加速。

步骤 6:测试网站

要验证网站是否正常运行,请在浏览器中尝试以下 URL:

URL 结果
http://examplewebsite.com 显示originbucket中的索引文档。
originbucket中不存在的文件的 URL,例如 http://examplewebsite.com/abc 显示originbucket中的错误页面。
http://www.examplewebsite.com 将您的请求重定向到http://examplewebsite.com
http://www.examplewebsite.com/abc 将您的请求重定向到http://examplewebsite.com/abc
说明
某些情况下,可能需要清除 Web 浏览器的缓存才能看到预期行为。

清理

如果您创建静态网站只是为了练习,别忘了删除分配的阿里云资源以免产生不必要的费用。删除阿里云资源后,网站不再可用。

参考以下步骤进行清理:

  1. 禁用阿里云 CDN 控制台中的域名,然后将其删除。
  2. 删除云解析控制台中的 CNAME 记录。
  3. 删除阿里云 OSS 控制台中的 OSS 文件和 bucket。