托管静态网站

最近更新时间:2017-06-26 11:02:17

查看pdf

在此实践中,您可以在腾讯云对象存储(以下简称 COS)上托管静态网站,访客可以通过您的自定义域名(例如 www.example.com )访问托管的静态网站。无论您是想在 COS 上托管已有静态网站还是从零开始建站,此实例都可以帮助您完成 COS 上的静态网站托管工作。以下是具体步骤:

步骤预览
流程图

事前准备

以下是您在实践过程中,将会用到的相关服务:

域名注册:如果您还没有已注册的域名,则需要先注册一个域名,例如 www.example.com 。您可通过腾讯云 域名注册 申请域名。通常,只需少量费用,即可拥有一个域名。

对象存储 COS:您将使用对象存储 COS 创建 Bucket ,配置权限以允许每个人查看内容,然后上传网页内容。

内容分发网络 CDN:内容分发网络 CDN 和云解析服务将共同作用,使您的域名和网站内容绑定,同时为您的静态网站加速,降低访问延迟,提高可用性。

云解析:您可以通过云解析将您的域名和网站内容绑定在一起,实现使用自定义域名访问您的静态网站的目的。

本指南中的所有步骤都使用 www.example.com 作为域名。您需要使用您已注册的一个域名替换此域名。

步骤 1:注册域名与备案

域名注册是在互联网上建立任何服务的基础。注册域名之后,您还需要进行域名备案,网站才能正常访问。请根据您的具体情况进行操作:

步骤 2:创建 Bucket 并上传内容

在完成域名注册及备案后,您需要在 COS 控制台中执行以下任务,以创建和配置网站内容:
2.1 为您的网站内容创建 Bucket。
2.2 配置 Bucket 并上传内容。

2.1 创建 Bucket

请使用腾讯云账号登陆 COS 控制台,为您的网站创建相应的 Bucket。Bucket 是 COS 中用于存储数据的容器,您的网站内容都将存储在一个存储桶中。您可以通过 COS 概览页或 Bucket 列表创建 Bucket:

  • 概览页
    登录 COS 控制台后,当您首次创建 Bucket 时,请直接点击概览页上的创建 Bucket
    创建Bucket2
  • Bucket 列表
    登录 COS 控制台后,请点击左侧 Bucket 列表,进入列表后点击 创建 Bucket
    创建Bucket1

弹出创建 Bucket 对话框后,您可以为您的网站创建一个对应的存储桶并保存。
创建Bucket3

2.2 配置 Bucket 并上传内容

您可通过以下两个小步骤,配置 Bucket 访问权限和上传您的网站内容。

  1. 将 Bucket 的访问权限设置为公有读私有写,使您的内容可被公开访问。
    在 COS 控制台,点击已创建好的 Bucket。
    进入到 Bucket 后,点击 基础配置,点击基本信息的编辑按钮。
    修改 Bucket 的访问权限为公有读私有写,保存即可。
    权限修改
  2. 将您的网站内容上传到已创建好的 Bucket。
    在完成第 1 步后,点击文件列表。在该项目下进行文件上传。
    有关具体分步说明,请参阅 上传对象
    upload

公有读私有写:任何人(包括匿名访问者)都对该 Bucket 中的文件有读权限,但只有 Bucket 创建者及有相应权限的账号才对该 Bucket 中的文件有写权限。
私有读写:只有该 Bucket 的创建者及有相应权限的账号才对该 Bucket 中的文件有读写权限,其他任何人对该 Bucket 中的文件都没有读写权限。

在此步骤中,您在已创建好的 Bucket 中托管内容。该内容可以是文本文件、照片、视频——任何您想要托管的内容。如果您还未构建网站,则只需为此实践创建一个文件。
例如,您可使用以下 HTML 创建文件,并将其上传到 Bucket。网站主页的文件名通常为 index.html。在后续步骤中,您将提供此文件名作为网站的索引文档名。

当用户访问任何不带文件指向的一级目录时,COS 默认优先匹配对应 Bucket 目录下 index.html,其次为 index.htm,若无此文件,则返回 404。

<!DOCTYPE html>
<html>
    <head>
        <title>Hello COS!</title>
        <meta charset="utf-8">
    </head>
    <body>
        <p>欢迎使用&nbspCOS&nbsp的静态网站功能。</p>
        <p>这是首页!</p>
    </body>
</html>

步骤 3:绑定自定义域名

静态网站托管功能仅在用户为 Bucket 设置了自定义域名时有意义,使用默认提供的域名(CDN 加速域名和 COS 直接访问域名)访问资源时将始终弹出下载框,只有绑定自定义域名并开启静态网站功能后,才可以直接在浏览器中打开文件资源。

您可设置自定义域名直接指向 Bucket,并开通静态网站功能,达到通过浏览器直接访问您的网站的目的( Bucket 中的内容)。
此步骤中,您首先需要创建 CNAME 记录(具体介绍请参考 CNAME 记录),将您的域名(如 www.example.com )映射到 COS 提供的默认域名(如 example-1251000011.cosgz.myqcloud.com)。然后通过云解析将此 CNAME 记录添加到您的域名下,实现自定义域名绑定。具体的操作步骤如下:
3.1 域名添加
3.2 域名解析

3.1 域名添加

在进行自定义域名添加时,有两种途径供您选择:

  • 通过 CDN 控制台添加
  • 通过 COS 控制台添加

如果您想在添加自定义域名的同时,进行 CDN 高级管理和配置,可优先选择 CDN 控制台添加域名。本指南中不涉及 CDN 高级管理和配置,如需帮助,请参考 CDN 配置管理
如果您只需要先添加自定义域名,不进行其他配置,COS 控制台添加将节省您的时间。

通过 CDN 控制台添加

  1. 请登录 CDN 控制台,从左侧导航进入域名管理页面。
  2. 点击添加域名,进入域名配置界面。
    CDN 添加1
  3. 请输入您的域名,选择源站类型为对象存储(COS ),并为源站选择您托管网站内容的对应 Bucket 默认域名。业务类型选择静态加速,其他保持默认配置,提交即可。
    CDN添加2
  4. 域名添加完成。请关闭弹窗,耐心等待域名配置下发至全网节点(约15分钟)。
    CDN添加3
    获取系统分配的 CNAME 记录,再进行下一步骤。
    CDN添加4

通过 COS 控制台添加

  1. 请登录 COS 控制台,从左侧导航进入 Bucket 列表页面。
  2. 选择您的网站对应的 Bucket,进入域名管理页面。
    COS添加域名1
  3. 自定义域名条目下,点击添加域名,添加您的域名,保存即可。
    COS添加域名2
  4. 请稍等几分钟,等待域名上线。获取对应的 CNAME 记录,再进行下一步骤。
    COS添加域名3

3.2 域名解析

在您完成域名添加之后,系统会为您分配一条对应的 CNAME 记录。请按以下步骤完成域名解析任务:
云解析1

  1. 请登录云解析控制台,点击添加域名。
    云解析添加域名1
    在弹出的对话框中,填入您的域名,并且选择对应的项目,保存即可。
    云解析添加域名2
  2. 域名添加成功后,点击该域名,进入解析记录管理页面。
    云解析3
  3. 点击添加记录,将在步骤 3.1 获取的 CNAME 记录填入对话框,确认保存。
    云解析4

    注:记录值是步骤 3.1 获取的 CNAME 记录。添加后大约需 15 分钟左右生效,请耐心等待。

步骤 4:开通 COS 的静态网站功能

绑定自定义域名之后,您还需要开通 COS 的静态网站托管功能,才能通过浏览器直接访问您的网站。具体步骤如下:

  1. 登陆 COS 控制台后,从左侧导航进入您网站对应的 Bucket。
  2. 进入基础配置页面,找到静态网站功能。点击编辑按钮开通 COS 的静态网站功能并保存,如下图所示。
    开通静态网站托管

    静态网站功能的相关具体配置及参数说明,请参考 静态网站功能

步骤 5:测试验证

在完成上述步骤后,您可通过在浏览器地址栏输入您的网站域名进行访问,来验证实践结果,以 www.example.com 为例:

在某些情况下,您可能需要清除缓存才能看到预期结果。

以上信息是否解决您的问题?