ICOS(IBM Cloud Object Storage)に静的Webサイトを構成する機能(Static website hosting)が提供されたので試してみた

#1 はじめに

ICOS(IBM Cloud Object Storage)に静的Webサイトを公開する機能が提供されたので試してみました。

#2 従来の方法では何が不味かったのか？
ICOSでは従来でも、
`https://xxx.xxx.xxx/index.html`
のようにアクセスをすれば、そのファイルにアクセスすることはできました。でも、
`https://xxx.xxx.xxx/`
のようにindex.htmlを省略してアクセスすると、以下のようにBucket内部のリストが表示されてしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/fa03390a-a9ca-367f-0e54-82ea283a6337.png)
また、例えば存在しないファイルにアクセス(404 Not Found)するとやはり、このような無愛想（？）なページが返ってきます。ちょっとこれではWebサイトとしては使いづらいですよね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/b72f5f86-ab08-411e-d98b-17f53aa51024.png)

ICOSでは、静的Webサイトを公開するStatic Web Hosting機能はこのような問題を解決してくれます。これで、3つのAZに自動的に展開される堅牢なWebサーバーがお手軽かつ安価かつ（ほとんど）運用要らずで利用可能になります。

#3. 設定方法
Documentは[こちら](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-static-website-options)。

##3.1 Public Accessを有効にする（オプションだけどほぼ必須）
認証なしにアクセスさせるために必要です。たとえば、[こちらの手順](https://qiita.com/testnin2/items/6379e5bc5ea165212e15)を参照してください。

##3.2 ICOS Firewallを設定する（オプション）
無制限に世界中にアクセスするのであれば不要ですが、アクセス元を制限するのであれば必要です。たとえば、[こちらの手順](https://qiita.com/testnin2/items/0d23bb5b46f32e45eeb3)を参照してください。

##3.3 公開したいWebコンテンツをアップロード
Buckets -> Configurationから、あらかじめ作成済みの公開したいWebコンテンツをアップロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/945cc5f8-7f66-c681-1923-b81b1ef7da9f.png)

必須なのはトップ画面にあたる`index.html`だけですが、エラー画面（`error.html`)やファビコンやその他それらのページが利用するjavascriptやスタイルシートや画像などが用意されていると望ましいでしょう。


##3.4 Static website hostingの構成

- Buckets -> Configuration -> Static website hostingから構成します。<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/4b4ab996-1a4b-7791-43dd-a40df96ef9f6.png)
- Index document(この例ではindex.html）は必須だが、Error document(この例ではerror.html）はオプション。<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/b6c85a25-e988-00eb-bd12-e4a1b91803df.png)
- `Set routing rules`を構成することで、例えばエラーコードごとに細かな挙動を変えることができるが、今回は利用しない。

#4. テスト
ICOSの静的Webサイトへのエンドポイント情報は、設定画面の直下にあります。（ICOS Objectに直接アクセスする際のFQDNとは違うことに注意！）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/6c03033d-c74a-8634-f342-c797cfc9913a.png)

##4.1 `https://xxxxxx.s3-web.jp-tok.cloud-object-storage.appdomain.cloud/index.html`にアクセス 
トップページが表示されて期待通り。ただ、これだと従来のICOS Objectへのアクセス方式でもできたことです。。。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/20f61ddc-1290-d568-6511-92291d486a01.png" width=50%>

##4.2  `https://xxxxxx.s3-web.jp-tok.cloud-object-storage.appdomain.cloud/`にアクセス
トップページが表示されて期待通り。`index.html`なしでもアクセスできるこの結果が期待していた内容でした！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/20f61ddc-1290-d568-6511-92291d486a01.png" width=50%>


##4.3 `https://xxxxxx.s3-web.jp-tok.cloud-object-storage.appdomain.cloud/index2.html`にアクセス
存在しないページなので、あらかじめ設定していたエラーページ(error.html)が表示されて期待通り。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/976bb08b-c88c-f078-6fd6-efc9d88b7c3a.png" width=50%>

##4.4 ICOS Firewall設定時のエラー画面
error.htmlを構成していてもこのように表示される。そもそもコンテンツへのアクセス権がないからエラーになるので、こういうもの？
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/715023da-53b8-0c27-36c6-15bf59a05f29.png" width=50%>

#5. 補足

本格的な利用には、（こんなURLでエンドユーザーには直接公開できないので）CNAMEの設定などが必要でしょう。CIS(Cloud Internet Service)だとDNSやCDNやWAF機能も提供しているので、一緒に組み合わせると有効です。