IBM Cloud Object Storageで静的Webサイトを公開する

# はじめに
IBM Cloud（Bluemix）のObject Storageで静的Webサイトを構築しました。色々と手間取ったので、手順をまとめます。

[OpenStack｜Create static website](https://docs.openstack.org/newton/user-guide/cli-swift-static-website.html)を参考にしています。

# Object Storageの資格情報を確認する
IBM CloudにObject Storageのインスタンスは作成済みという前提で話を進めます。

[Bluemix｜Dashboard](https://console.ng.bluemix.net/dashboard/services/)を開き、**サービス**の一覧の中から、Object Storageのインスタンスを探し、クリックで開きます。

![BluemixObjectStorage.png](https://qiita-image-store.s3.amazonaws.com/0/221845/7577f883-cfc6-114a-8584-ed002c2a61f5.png)

左サイドバーの**サービス資格情報**をクリックすると、**サービス資格情報**という表が表示されます。
**アクション**という列の**資格情報の表示 ▼**をクリックすると、以下のようなJSONが表示されるので、メモに控えてください。

```json
{
  "auth_url": "https://identity.open.softlayer.com",
  "project": ●●●●●,
  "projectId": ●●●●●,
  "region": ●●●●●,
  "userId": ●●●●●,
  "username": ●●●●●,
  "password": ●●●●●,
  "domainId": ●●●●●,
  "domainName": ●●●●●,
  "role": ●●●●●
}
```



# Swift CLIを導入する
IBMのObject Storageは**OpenStack Swift**がベースになっており、**Swift CLI**（Swiftクライアント）での操作が可能です。今回はこのSwift CLIを使いますので、未導入であれば、導入してください。

pipがインストール済みであれば、以下のコマンドでSwift CLIをインストール可能です。

```bash
pip install python-swiftclient
```

# Swift CLIでObject Storageに接続できるか確認する
Swift CLIでローカルPCからObject Storageにアクセスできるか確認してみます。
まず、Objext Storageへの接続に必要な情報をoption-authという変数に埋め込みます。以下のコマンドを試してみてください。

### Windowsの場合

```bash
rem Object Storageへの接続用の変数を定義します。
set auth-url="https://identity.open.softlayer.com/v3"
set auth-version=3
set domain-name="（資格情報のdomainName）"
set project-name="（資格情報のproject）"
set username="（資格情報のusername）"
set password="（資格情報のpassword）"
set option-auth=--os-auth-url %auth-url% --auth-version %auth-version% --os-project-name %project-name% --os-project-domain-name %domain-name% --os-username %username% --os-user-domain-name %domain-name% --os-password %password% 

rem Object Storageへの接続を試します。
swift %option-auth% stat
```

### Macの場合

```bash
# Object Storageへの接続用の変数を定義します。
auth_url="https://identity.open.softlayer.com/v3"
auth_version=3
domain_name="（資格情報のdomainName）"
project_name="（資格情報のproject）"
username="（資格情報のusername）"
password="（資格情報のpassword）"
option_auth="--os-auth-url ${auth_url} --auth-version ${auth_version} --os-project-name ${project_name} --os-project-domain-name ${domain_name} --os-username ${username} --os-user-domain-name ${domain_name} --os-password ${password}"

# Object Storageへの接続を試します。
swift ${option_auth} stat
```

上記のコマンドでObject Storageの情報が表示されれば成功です。正常に表示されなければ、IDやパスワードに誤りがあるかもしれません。パスワード等に特殊文字が含まれている場合、エスケープが必要になるかもしれません。コマンドを再確認してください。

以後、swiftコマンドを使う際には、このoption-authを毎回添えます。環境変数を使えばもう少しスマートになるのですが、WindowsやMacで微妙な違いがあり、本筋からそれるので、今回はこの方法にします。

# 静的Webサイトを作成して公開する
Object Storage内にコンテナ（S3でいうバケット）を作成します。静的Webサイトの内容は、このコンテナに格納していきます。今回、コンテナ名は**website**とします。

### Windowsの場合

```bash
rem 静的Webサイトを格納するコンテナの名前を代入します。
set container=website

rem Web公開モードでコンテナを作成します。
swift %option-auth% post -m "web-listings: true" %container%

rem 認証なしでアクセスできるように公開します。
swift %option-auth% post -r ".r:*,.rlistings" %container%

rem ファイル一覧表示向けの CSS を有効化します。
swift %option-auth% post -m "web-listings-css:listings.css" %container%

rem サイトのインデックスファイルを設定します。
swift %option-auth% post -m "web-index:index.html" %container%

rem サイトのエラーファイルを設定します。
swift %option-auth% post -m "web-error:error.html" %container%

rem 作成したコンテナの情報を確認します。
swift %option-auth% stat %container%
```

### Macの場合

```bash
# 静的Webサイトを格納するコンテナの名前を代入します。
container="website"

# Web公開モードでコンテナを作成します。
swift ${option_auth} post -m "web-listings: true" ${container}

# 認証なしでアクセスできるように公開します。
swift ${option_auth} post -r ".r:*,.rlistings" ${container}

# ファイル一覧表示向けの CSS を有効化します。
swift ${option_auth} post -m "web-listings-css:listings.css" ${container}

# サイトのインデックスファイルを設定します。
swift ${option_auth} post -m "web-index:index.html" ${container}

# サイトのエラーファイルを設定します。
swift ${option_auth} post -m "web-error:error.html" ${container}

# 作成したコンテナの情報を確認します。
swift ${option_auth} stat ${container}
```


これで静的Webサイトが公開されます。上記のコマンドで以下のような情報が表示されるので、メモに控えます。

```bash
              Account: AUTH_●●●●●
            Container: website
              Objects: 2
                Bytes: 19
             Read ACL: .r:*,.rlistings
            Write ACL:
              Sync To:
             Sync Key:
    Meta Web-Listings: true
Meta Web-Listings-Css: listings.css
        Accept-Ranges: bytes
     X-Storage-Policy: standard
          X-Timestamp: ●●●●●
         Content-Type: text/plain; charset=utf-8
           X-Trans-Id: ●●●●●
```

# HTMLを設置してみる
とりあえず、以下のような内容のindex.htmlをローカルPCのカレントディレクトリに作成しておきます。

```html
<html>
    <body>
        <h1>Hello Wolrd!</h1>
    </body>
</html>
```

これを、Object Storageのコンテナ直下に設置してみます。

### Windowsの場合

```bash
rem ローカルのindex.htmlをコンテナ直下にコピー
swift %option-auth% upload %container% index.html
```

### Macの場合

```bash
# ローカルのindex.htmlをコンテナ直下にコピー
swift ${option_auth} upload ${container} index.html
```

これで配置できました。

# 静的Webサイトを閲覧してみる
配置したHTMLをブラウザで閲覧してみます。アクセスするURLは以下のようになります。
AccountというのはAUTH_●●●●●という文字列です。

```
http://dal.objectstorage.open.softlayer.com/v1/（メモのAccount）/（コンテナ名）
```

これで、静的Webサイトを閲覧することができました。
今回は単なるHello Wolrd!ですが、コンテナ配下に必要なファイルを配置していけば、よりリッチなサイトにしていくことが可能です。

静的Webサイトなので、PHPやRubyのようなスクリプトを置いても動作しませんが、JavaScriptやCSSは問題なく動作するはずです。

# 静的Webサイトを非公開にする
今度は、公開済みの静的Webサイトを非公開にしてみます。

静的Webサイトが格納されているコンテナのヘッダ情報を確認すると、**X-Container-Read**が**.r:*,.rlistings**になっていますが、これはアクセス権限を全公開にするという意味です。これを削除することで、非公開にできます。

具体的には以下のコマンドを実行します。

### Windowsの場合

```bash
rem 誰でも読み込み可能である状態を削除します。
swift %option-auth% post -r "" %container%
```

### Macの場合

```bash
# 誰でも読み込み可能である状態を削除します。
swift ${option_auth} post -r "" ${container}
```

# おわりに
比較的簡単に静的Webサイトを作ることができました。静的Webサイトはコンテナ（バケット）単位で作れるので、Object Storageのアカウントを増やさなくていいのも良いと思います。

また今回、以下のサイトを参考にさせていただきました。貴重な情報ありがとうございます。

- [OpenStack｜Create static website](https://docs.openstack.org/newton/user-guide/cli-swift-static-website.html)
- [OpenStack｜Access Control Lists (ACLs)](https://docs.openstack.org/swift/latest/overview_acl.html)