开发者社区> 问答> 正文

OSS如何实现静态网站托管?

用户可以基于OSS搭建一个静态网站。本文介绍了如何从申请域名开始,基于OSS搭建一个简单的静态网站。主要的步骤是:

  1. 申请一个域名。
  2. 开通OSS并创建Bucket。
  3. 开通OSS的静态网站托管功能。
  4. 使用自定义域名访问OSS。

最后本文会介绍一些常见的问题。

静态网站托管功能介绍


简单说就是用户可以基于OSS搭建一个简单的静态网页。用户开启此功能后,OSS提供了一个默认的首页和默认的404页面功能。具体参见开发人员指南中 静态网站托管的介绍。

具体实现步骤



步骤一:申请域名


本文的域名是从万网购买的,申请了一个leo23.xyz的域名。如果需要更多域名方面的帮助,请参见 http://wanwang.aliyun.com/

步骤二:开通OSS并创建Bucket


  1. 登录OSS控制台,创建一个Bucket为imgleo23,创建在上海,Endpoint为oss-cn-shanghai.aliyuncs.com。操作步骤请参见 创建存储空间

  2. 将Bucket的权限设置为公共读。操作步骤请参见 设置存储空间读写权限

  3. 上传index.html、error.html、aliyun-logo.png 文件。操作步骤请参见 上传文件

    • index.html 的内容为:[backcolor=transparent]<html>
    • [backcolor=transparent]  [backcolor=transparent]<head>
    • [backcolor=transparent]      [backcolor=transparent]<title>[backcolor=transparent]Hello OSS![backcolor=transparent]</title>
    • [backcolor=transparent]      [backcolor=transparent]<meta[backcolor=transparent] [backcolor=transparent]charset[backcolor=transparent]=[backcolor=transparent]"utf-8"[backcolor=transparent]>
    • [backcolor=transparent]  [backcolor=transparent]</head>
    • [backcolor=transparent]  [backcolor=transparent]<body>
    • [backcolor=transparent]      [backcolor=transparent]<p>[backcolor=transparent]欢迎使用OSS静态网站的功能[backcolor=transparent]</p>
    • [backcolor=transparent]      [backcolor=transparent]<p>[backcolor=transparent]这是首页[backcolor=transparent]</p>
    • [backcolor=transparent]  [backcolor=transparent]</body>
    • [backcolor=transparent]</html>

  • error.html 的内容为:
    1. [backcolor=transparent] <html>
    2. [backcolor=transparent]  [backcolor=transparent]<head>
    3. [backcolor=transparent]      [backcolor=transparent]<title>[backcolor=transparent]Hello OSS![backcolor=transparent]</title>
    4. [backcolor=transparent]      [backcolor=transparent]<meta[backcolor=transparent] [backcolor=transparent]charset[backcolor=transparent]=[backcolor=transparent]"utf-8"[backcolor=transparent]>
    5. [backcolor=transparent]  [backcolor=transparent]</head>
    6. [backcolor=transparent]  [backcolor=transparent]<body>
    7. [backcolor=transparent]      [backcolor=transparent]<p>[backcolor=transparent]这是OSS静态网站托管的错误首页[backcolor=transparent]</p>
    8. [backcolor=transparent]  [backcolor=transparent]</body>
    9. [backcolor=transparent]</html>

  • aliyun-logo.png 是一张图片。


  • 步骤三:开通OSS的静态网站托管功能


    如下图所示,登录控制台后,将 [backcolor=transparent]默认首页 设置为上文中的 [backcolor=transparent]index.html,将 [backcolor=transparent]默认404页 设置为上文中的 [backcolor=transparent]error.html。具体操作请参见 设置静态网站托管

    检验静态网站托管功能,输入如图所示的URL地址:

    • 显示默认的首页 可以看到输入类似URL的时候,会显示开通时指定的index.html中的内容。

    • 显示默认的404页 可以看到输入的URL没有对应的文件时,会显示开通时指定的error.html中的内容。

    • 显示正常的文件 可以看到输入的URL有对应的文件时,会读取成功。

    这里可能会出现一个问题,就是用户发现实际使用中,浏览器的行为是下载,而不是直接在浏览器上展示。这是OSS的行为。与用户无关。如果需要在浏览器中直接显示,需要用户用自定义域名的方式来使用静态网站功能。

    步骤四:使用自定义域名访问 OSS


    开发人员指南中的 自定义域名访问 OSS有介绍如何实现自定义域名访问 OSS,这里不多说。直接来看最后的效果。

    • 显示默认的首页

    • 显示默认的404页

    • 显示正常的文件

    这样一个简单的静态网站就实现了。

    常见问题及解决方案


    • 为什么我设置的静态网站托管网页是直接下载的?静态html网页通过url访问为下载不是浏览?怎么解决?

      由于国内互联网访问的备案制度,OSS默认的行为会变成下载。这个时候需要用户改用 自定义域名访问 OSS

    • OSS静态网站托管对客户来说有什么好处?

      在用户需求比较简单的时候,且访问量比较小的时候,可以省掉一台ECS。如果访问量大一点,可以考虑结合CDN来使用。

    • 价格怎么样?如何和CDN结合?

      价格可以参考官方网站OSS的价格,CDN的价格也可以参考官方网站CND的价格,官网地址 www.aliyun.com。和CDN结合的例子可以参考 CDN加速OSS实践

    • 默认的首页和默认的404页面都需要设置吗?

      默认首页需要设置,但默认404页面可以不用设置。

    • 为什么输入的URL在浏览器上返回403?

      有可能Bucket的权限不是公开读。也有可能是因为欠费被停止使用。

    展开
    收起
    青衫无名 2017-10-18 10:16:22 17773 0
    5 条回答
    写回答
    取消 提交回答
    • 这个方案是不是已经无效了?

      2021-06-07 09:58:38
      赞同 展开评论 打赏
    • 如果静态网站托管到OSS,流量被刷了怎么办?那不是费用一下子就上去了?

      2020-08-06 17:01:51
      赞同 展开评论 打赏
    • 不能批量上传文件/覆盖,更新极其不友好。

      2020-03-21 15:31:39
      赞同 展开评论 打赏
    • ReOSS如何实现静态网站托管
      托管了你就知道死了  随便来个刷流量的  分分钟大几千流量费 跟着你!
      2017-12-16 13:02:28
      赞同 展开评论 打赏
    • 函数计算开发工程师
      ReOSS如何实现静态网站托管
      Hi,请问存在oss上的html可以解析同存在oss里的js文件作为样式吗
      2017-12-15 17:18:46
      赞同 展开评论 打赏
    问答排行榜
    最热
    最新

    相关电子书

    更多
    OSS运维进阶实战手册 立即下载
    《OSS运维基础实战手册》 立即下载
    OSS运维基础实战手册 立即下载