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

はじめに

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

OpenStack｜Create static websiteを参考にしています。

Object Storageの資格情報を確認する

IBM CloudにObject Storageのインスタンスは作成済みという前提で話を進めます。

Bluemix｜Dashboardを開き、サービスの一覧の中から、Object Storageのインスタンスを探し、クリックで開きます。

左サイドバーのサービス資格情報をクリックすると、サービス資格情報という表が表示されます。
アクションという列の資格情報の表示 ▼をクリックすると、以下のような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をインストール可能です。

pip install python-swiftclient

Swift CLIでObject Storageに接続できるか確認する

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

Windowsの場合

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の場合

# 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の場合

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の場合

# 静的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サイトが公開されます。上記のコマンドで以下のような情報が表示されるので、メモに控えます。

              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>
    <body>
        <h1>Hello Wolrd!</h1>
    </body>
</html>

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

Windowsの場合

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

Macの場合

# ローカルの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の場合

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

Macの場合

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

おわりに

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

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

• OpenStack｜Create static website
• OpenStack｜Access Control Lists (ACLs)