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

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

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

您需要在IBM Cloud对象存储上有一个存储桶(Bucket)，开启了静态网站托管功能，并且该Bucket允许公开访问
需要指定网站的默认首页，默认首页是您通过浏览器访问静态网站时，IBM COS返回的网站首页。如果您还开通了子目录首页，则子目录下也应存在此文件。
需要指定网站的默认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下

默认首页 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>

默认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文章来源地址https://uudwc.com/A/ePdwN