如何利用对象存储构建静态网站

静态网站是指所有的网页都由静态内容构成,包括客户端执行的脚本(例如JavaScript)。我们可以通过IBM Cloud对象存储服务的静态网站托管功能将您的静态网站托管到IBM COS的存储桶(Bucket),并使用Bucket的访问域名访问这个网站。

要使用IBM Cloud对象存储上的静态网站托管功能,要满足以下几个条件:

  1. 您需要在IBM Cloud对象存储上有一个存储桶(Bucket),开启了静态网站托管功能,并且该Bucket允许公开访问
  2. 需要指定网站的默认首页,默认首页是您通过浏览器访问静态网站时,IBM COS返回的网站首页。如果您还开通了子目录首页,则子目录下也应存在此文件。
  3. 需要指定网站的默认404页面,默认404页是您通过浏览器访问Bucket内文件出现404错误时,IBM COS返回的错误页面

为Bucket开启静态网站托管后,您需要将与默认首页名称相同的文件(例如index.html)上传至目标Bucket,如果Bucket中包含了目录结构subdir/,则目录层级下也必须包含index.html文件。此外,您还需要将与默认404页名称相同的文件(例如error.html)上传至目标Bucket。Bucket的文件结构如下所示:
Bucket
├── index.html
├── error.html
├── example.txt
└── subdir/
└── index.html

假设该Bucket的访问域名为cos-website.com,且配置的静态网站默认首页为index.html,默认404页为error.html。则通过自定义域名访问静态网站时,根据是否开通了子目录首页,访问规则如下:
• 未开通子目录首页
o 当您访问https://cos-website.com/和https://cos-website.com/subdir/时,IBM COS会返回https://cos-website.com/index.html。
o 当您访问https://cos-website.com/example.txt时,正常获取example.txt文件。
o 当您访问https://cos-website.com/object时,因object不存在,IBM COS会返回https://cos-website.com/error.html。
• 已开通子目录首页
o 当您访问https://cos-website.com/时,IBM COS会返回https://cos-website.com/index.html。
o 当您访问https://cos-website.com/subdir/时,IBM COS会返回https://cos-website.com/subdir/index.html。
o 当您访问https://cos-website.com/example.txt时,正常获取example.txt文件。
o 当您访问https://cos-website.com/object时,因object不存在,IBM COS会返回https://cos-website.com/error.html。

接下来我们实际创建一个托管在IBM COS上的静态网站
步骤1: 创建存储桶(Bucket)
您需要创建一个公共读的Bucket,用以设置静态网站托管及存放网站数据。
登录IBM Cloud,访问对象存储管理页面
在这里插入图片描述
在这里插入图片描述
设置静态网站托管规则
在这里插入图片描述
在这里我们仅将公共访问权启用,设置默认首页和默认错误页面,路由规则可以在创建完以后再次添加
在这里插入图片描述
创建完Bucket以后,接下来我们创建以下网站文件并上传到bucket下

  1. 默认首页 index.html
<html>
   <head>
       <title>Hello IBM COS static website!</title>
       <meta charset="utf-8">
   </head>
   <body>
       <p>IBM COS static website</p>
       <p>welcome page</p>
       <img src="background.jpg" />
   </body>
 </html>
  1. 默认404错误页面
<html>
<head>
   <title>Hello IBM COS static website!</title>
   <meta charset="utf-8">
</head>
<body>
<p>IBM COS static website</p>
   <p>this is the default 404 page</p>
</body>
</html>

在这里插入图片描述
查看COS静态网站的访问Url
在这里插入图片描述
在浏览器中访问websitedemo.s3-web.us-south.cloud-object-storage.appdomain.cloud
在这里插入图片描述

上传的文件已可以顺利访问,接下来我们看一下COS静态网站托管功能的其它配置,在创建完静态网站托管的存储桶(Bucket)后,可以访问Bucket的配置页面再次设置静态网站托管功能的其它高级配置
在这里插入图片描述

重定向路由规则配置可以使您能够控制来自访问者的请求。例如,您可以全局地将所有流量从使用一个协议重定向到另一个协议,比如用安全的https协议替换http协议。或者,您可以创建单独的规则来处理特定文件的传入请求,并根据您定义的规则向访问者提供响应。
在这里插入图片描述在这里插入图片描述
我们测试访问
https://websitedemo.s3-web.us-south.cloud-object-storage.appdomain.cloud/test.html
因为test.html页面在COS bucket下并不存在,默认应该返回404错误页面,但是由于我们设置了重定向路由规则,把返回404 http code重定向到index.html页面,最后应该显示如下
在这里插入图片描述

我们也可以对所有的请求设置全局的重定向路由规则,例如都替换成https协议
在这里插入图片描述

你也可以通过JSON文件格式的方式批量导入重定向路由规则
在这里插入图片描述
IBM COS静态网站的访问域名默认为bucket-name+ Static website hosting endpoints, 例如:websitedemo.s3-web.us-south.cloud-object-storage.appdomain.cloud,如果你有使用IBM Cloud上的CIS服务,或者其它第三方的DNS服务,可以通过设置CNAME的方式添加自定义的访问域名。 CIS服务详见:
https://cloud.ibm.com/docs/cis?topic=cis-set-up-your-dns-for-cis

文章参考文档:
https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-static-website-tutorial#static-website-configure-options

https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-static-website-options

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值