2015年7月5日日曜日

新ConoHaのオブジェクトストレージにAjaxを使ってアップロードする


前回(新ConoHaのオブジェクトストレージ上のデータをAjaxで取得してみる)の続き。

次はAjaxによるアップロードを試します。

参考サイト

コンテナの準備

アップロード先となるコンテナの準備をする。といっても前回の記事から何も変更なかった。
アップロード先のコンテナ
必要なのはX-Container-Meta-Access-Control-Allow-Originメタデータだけみたい。

サイトの準備

参考サイト4つ目のGitHubのソースを真似てWebページを作った。(http://localhost:3000/ のホストとしてアクセス)
https://github.com/naichilab/cors-swift-example/blob/master/app.js
アップロード処理が書かれてるjsファイル。
URL組み立ててtokenつけてPUTするだけっぽい。

トークンの発行

参考サイト3つ目のConoHaドキュメントを見てみると、トークン発行方法が書かれてる。
ターミナルで下記コマンドを実行してトークンを取得する。
curl -i -X POST \
-H "Accept: application/json" \
-d '{"auth":{"passwordCredentials":{"username":"APIユーザー名","password":"APIユーザーパスワード"},"tenantId":"テナントID"}}' \
https://identity.tyo1.conoha.io/v2.0/tokens
長々としたJSONが返ってくるのでaccess->token->idをメモる。
どうもトークンは一度発行すると24時間有効みたいですね。

アップロード実行

さきほど立ち上げたサイトのフォームに入力していく。

  • StorageURL:ConoHaコントロールパネル->API->Object Storage Serviceエンドポイント
  • StorageToken:さきほどメモしたトークン
  • Container:コンテナ名
こんな感じ

File Selectionのボタンからファイルを選ぶとアップロードが始まる。
アップロード完了


すんなりとアップロードできた。
CyberDuckで確認した。

まとめ

  • ConoHaのAPIユーザーを使ってトークンを発行する。
  • コンテナにX-Auth-Tokenメタデータの設定は不要
あってんのかなこれ・・・


だいぶやりたいことに近づいてきたような気がする。
自分のサーバーでトークンを発行してブラウザに渡す→ブラウザが直接オブジェクトストレージにアップロードって感じでいいのかな。
トークンが24時間有効だしこのままじゃ好きなファイルアップロードできちゃうからもーちょい厳しい認証が必要だよなぁ。
どうしたらいいんかな。

関連記事

ConoHa関連の記事をまとめました。
ConoHa関連まとめ

2015年7月4日土曜日

新ConoHaのオブジェクトストレージ上のデータをAjaxで取得してみる


新ConoHaのオブジェクトストレージネタ、まだまだ続きます。
前回の記事(新ConoHaのオブジェクトストレージにWeb公開可能なコンテナを作成する。)ではオブジェクトストレージにアップロードしたファイルにブラウザから直接アクセスできるようになりました。

今回は同じファイルをAjax(XmlHttpRequest)を使って取得してみます。

クロスドメインリクエストの制限

Ajaxで別ドメインのデータを取得しようとすると制限にひっかかります。
参考:Ajax クロスドメインリクエスト 制約
CORSってのを使うと上記制限を回避できるそうなので試してみます。

CORS(Cross-Origin Resource Sharing)

まだよくわかってませんがXHR(XmlHttpRequest)のクロスドメイン制約を回避する方法らしいです。
新ConoHaのオブジェクトストレージはOpenStackSwiftで実現してるらしくCORSの設定が可能みたい。

参考:CORS

この制限を超えてファイルアップロードするのが目標ですがまずはGetだけできることを確認します。

サイトの用意

参考サイトに書かれた通りのHTMLを出力するページを用意しました。(Rails)
XHRサンプルフォーム
このサイト(http://localhost:3000)からオブジェクトストレージ(https://object-storage.tyo1.conoha.io/)のファイルをAjaxで取得するにはクロスドメイン制約を抜ける必要があります。

取得してみる

前回の記事で用意したコンテナ(X-Container-Read = .r:* を設定したもの)はこんな感じ。
コンテナのメタデータ
通信内容を確認したいのでChromeのDeveloperToolを開き、Networkタブを表示しておく。
※"DisableCache"にチェックを入れておいたほうがいいと思う。これで結構悩んだ。
ChromeのDeveloperTool
CyberDuckでhello.txtのURLをコピーし、フォームに入力してSubmit。
取得(失敗)
DeveloperTool上はステータスコード200が帰ってきてるみたいだけど画面上にはstatus:0が出たまま。
参考サイトによると何かがおかしいらしい。
参考サイトより:Assuming the request succeeds you should see the response header and body. If something went wrong the response status will be 0.
というかオブジェクトストレージ側に何も設定してないんだから取れたら逆に怖い。

コンテナにCORS用のメタタグを設定

コンテナに下記メタタグを設定する。
X-Container-Meta-Access-Control-Allow-Origin: http://localhost:3000
ちなみにCyberDuckでメタタグを編集できた。Swiftクライアントいらなかったんじゃ?
CyberDuckでメタタグ編集
再度取得してみる。
再取得(成功)
とれた。
Responseに”Access-Control-Allow-Origin:http://localhost:3000”が含まれるようになり、ファイルの内容も取得できてるのがわかる。

まとめ

オブジェクトストレージのファイルをAjax(XmlHttpRequest)を使って取得するには下記設定が必要だった。
  • コンテナにX-Container-Readメタデータを設定する。
  • コンテナにX-Container-Meta-Access-Control-Allow-Originメタデータを設定する。

X-Auth-Token is 何?

参考サイトを忠実にやってたんだけど結局X-Auth-Tokenは設定しなくても動いた。
X-Auth-Tokenとはなんなんだろうか・・・
今回はX-Container-Readで誰でも閲覧可能になってるからいらなかったんだろうか。
最終的にはAjaxを使ったファイルアップロードまで実装したいのでそこらへん知る必要があるのかもしれない。

だれか詳しい人教えてください。

さて次に試すのはAjaxによるアップロードかな。

関連記事

ConoHa関連の記事をまとめました。
ConoHa関連まとめ

2015年7月3日金曜日

新ConoHaのオブジェクトストレージにWeb公開可能なコンテナを作成する。

Swiftコマンドラインクライアントで新ConoHaのオブジェクトストレージに接続する。
これの続き。

SwiftコマンドでConoHaのオブジェクトストレージにアクセスできたのでコンテナの設定をしていく。

やりたいこと

コンテナにアップロードしたファイルを認証なしで取得できるようにしたい。
(画像とかをブラウザから認証なしで見れるようにしたい)

参考

Object Storage API v1 (SUPPORTED)
よくわからんけどX-Container-Readってメタデータに.r:*ってのをセットできればいいんかな?

OpenStack SwiftでStatic Webサイトを作る
ググってたら似たようなことしてる記事みつけた。

真似てみる

$ swift post -r '.r:*' hogehoge
これだけでhogehogeコンテナの作成(すでにあれば更新)できるらしい。

確認

コマンドラインで見る方法よくわからんしCyberDuckで見てみる。
それっぽく入ってる。

適当なファイルあげてみる

$ swift upload hogehoge hello.txt 
hogehogeコンテナにhello.txtをアップロード

入った。

ブラウザで見れるかな
URLどうなるんだろうと思ってCyberDuck触ってたらURLコピーする機能あった。便利。

アクセス!

見れたっぽい。
なるほど。Web公開するだけなら簡単やね。

おまけ

コンテナ作成時にメタデータを指定しないと認証エラーしたしちゃんとできてるっぽいかな。

今日はここまで。

関連記事

ConoHa関連の記事をまとめました。
ConoHa関連まとめ
Related Posts Plugin for WordPress, Blogger...