1. Browser Uploads to S3
using HTML POST Forms
@suz_lab
Saturday, December 17, 11

2. AWSで負荷分散が容易に！
Saturday, December 17, 11

3. (Upload)ファイル分散問題
•nfs?
•SPOF対策が面倒...
•s3fs?
•Heavyに利用すると嫌な思い出が...
•...
Saturday, December 17, 11

4. As-Is と To-Be
Saturday, December 17, 11

5. シーケンス
Saturday, December 17, 11

6. <form action="http://www.suz-lab.com.s3.amazonaws.com/"
method="post" enctype="multipart/form-data">
<input type="hidden" name="key"
value="${filename}"/>
<input type="hidden" name="AWSAccessKeyId"
value="AAAAAAAAAAAAAAAAAAAA"/>
<input type="hidden" name="acl"
value="private"/>
<input type="hidden" name="success_action_redirect"
value="http://www.suz-lab.com/"/>
<input type="hidden" name="policy"
value="pppppppppppppppppppppppppppp"/>
<input type="hidden" name="signature"
value="ssssssssssssssssssssssssssss"/>
<input type="hidden" name="Content-Type"
value="text/plain"/>
<input type="file" name="file"/>
<input type="submit" name="button" value="Upload"/>
</form>
Saturday, December 17, 11

7. <form action="http://www.suz-lab.com.s3.amazonaws.com/"
method="post" enctype="multipart/form-data">
<input type="hidden" name="key"
value="${filename}"/>
<input type="hidden" name="AWSAccessKeyId"
value="AAAAAAAAAAAAAAAAAAAA"/>
<input type="hidden" name="acl"
value="private"/>
<input type="hidden" name="success_action_redirect"
value="http://www.suz-lab.com/"/>
<input type="hidden" name="policy"
value="pppppppppppppppppppppppppppp"/>
<input type="hidden" name="signature"
value="ssssssssssssssssssssssssssss"/>
<input type="hidden" name="Content-Type"
value="text/plain"/>
<input type="file" name="file"/>
<input type="submit" name="button" value="Upload"/>
</form>
Saturday, December 17, 11

8. action
• バケット名.s3.amazonaws.comを指定
• http/httpsが指定可能
•りのバケット名は証明書エラー
www.suz-lab.comのようなドット区切
• 証明書が*.s3.amazonaws.comだから
Saturday, December 17, 11

9. <form action="http://www.suz-lab.com.s3.amazonaws.com/"
method="post" enctype="multipart/form-data">
<input type="hidden" name="key"
value="${filename}"/>
<input type="hidden" name="AWSAccessKeyId"
value="AAAAAAAAAAAAAAAAAAAA"/>
<input type="hidden" name="acl"
value="private"/>
<input type="hidden" name="success_action_redirect"
value="http://www.suz-lab.com/"/>
<input type="hidden" name="policy"
value="pppppppppppppppppppppppppppp"/>
<input type="hidden" name="signature"
value="ssssssssssssssssssssssssssss"/>
<input type="hidden" name="Content-Type"
value="text/plain"/>
<input type="file" name="file"/>
<input type="submit" name="button" value="Upload"/>
</form>
Saturday, December 17, 11

10. key
•S3にアップロードされるオブジェクト
(ファイル)名を指定
•${filename}にするとアップロードする
ファイル名が利用される
Saturday, December 17, 11

11. <form action="http://www.suz-lab.com.s3.amazonaws.com/"
method="post" enctype="multipart/form-data">
<input type="hidden" name="key"
value="${filename}"/>
<input type="hidden" name="AWSAccessKeyId"
value="AAAAAAAAAAAAAAAAAAAA"/>
<input type="hidden" name="acl"
value="private"/>
<input type="hidden" name="success_action_redirect"
value="http://www.suz-lab.com/"/>
<input type="hidden" name="policy"
value="pppppppppppppppppppppppppppp"/>
<input type="hidden" name="signature"
value="ssssssssssssssssssssssssssss"/>
<input type="hidden" name="Content-Type"
value="text/plain"/>
<input type="file" name="file"/>
<input type="submit" name="button" value="Upload"/>
</form>
Saturday, December 17, 11

12. acl
• private
• public-read
• public-read-write
• authenticated-read
• bucket-owner-read
• bucket-owner-full-control
Saturday, December 17, 11

13. <form action="http://www.suz-lab.com.s3.amazonaws.com/"
method="post" enctype="multipart/form-data">
<input type="hidden" name="key"
value="${filename}"/>
<input type="hidden" name="AWSAccessKeyId"
value="AAAAAAAAAAAAAAAAAAAA"/>
<input type="hidden" name="acl"
value="private"/>
<input type="hidden" name="success_action_redirect"
value="http://www.suz-lab.com/"/>
<input type="hidden" name="policy"
value="pppppppppppppppppppppppppppp"/>
<input type="hidden" name="signature"
value="ssssssssssssssssssssssssssss"/>
<input type="hidden" name="Content-Type"
value="text/plain"/>
<input type="file" name="file"/>
<input type="submit" name="button" value="Upload"/>
</form>
Saturday, December 17, 11

14. success_action_redirect
•アップロード完了後のリダイレクト先
•http://www.suz-lab.com/
?bucket=www.suz-lab.com
&key=upload.txt
&etag=%22...%22
Saturday, December 17, 11

15. <form action="http://www.suz-lab.com.s3.amazonaws.com/"
method="post" enctype="multipart/form-data">
<input type="hidden" name="key"
value="${filename}"/>
<input type="hidden" name="AWSAccessKeyId"
value="AAAAAAAAAAAAAAAAAAAA"/>
<input type="hidden" name="acl"
value="private"/>
<input type="hidden" name="success_action_redirect"
value="http://www.suz-lab.com/"/>
<input type="hidden" name="policy"
value="pppppppppppppppppppppppppppp"/>
<input type="hidden" name="signature"
value="ssssssssssssssssssssssssssss"/>
<input type="hidden" name="Content-Type"
value="text/plain"/>
<input type="file" name="file"/>
<input type="submit" name="button" value="Upload"/>
</form>
Saturday, December 17, 11

16. policy
• JSONで記述されたポリシーをBase64で
エンコードしたもの
• ポリシーには有効期限やフォームの
inputタグに記載された内容の条件など
を記述
Saturday, December 17, 11

17. require 'base64'
json = <<"EOS"
{
"expiration": "2012-01-01T00:00:00Z",
"conditions": [
{"bucket": "www.suz-lab.com"},
["starts-with", "$key", ""],
{"acl": "private"},
{"success_action_redirect": "http://www.suz-lab.com/"},
["starts-with", "$Content-Type", ""],
["content-length-range", 0, 1048576]
]
}
EOS
policy = Base64.encode64(json).gsub("n","")
Saturday, December 17, 11

18. <form action="http://www.suz-lab.com.s3.amazonaws.com/"
method="post" enctype="multipart/form-data">
<input type="hidden" name="key"
value="${filename}"/>
<input type="hidden" name="AWSAccessKeyId"
value="AAAAAAAAAAAAAAAAAAAA"/>
<input type="hidden" name="acl"
value="private"/>
<input type="hidden" name="success_action_redirect"
value="http://www.suz-lab.com/"/>
<input type="hidden" name="policy"
value="pppppppppppppppppppppppppppp"/>
<input type="hidden" name="signature"
value="ssssssssssssssssssssssssssss"/>
<input type="hidden" name="Content-Type"
value="text/plain"/>
<input type="file" name="file"/>
<input type="submit" name="button" value="Upload"/>
</form>
Saturday, December 17, 11

19. signature
• Base64でエンコードされたポリシーを
HMAC/SHA-1を使ってシークレットキー
でサインして、さらにBase64でエン
コードしたもの
Saturday, December 17, 11

20. require 'base64'
require 'openssl'
require 'digest/sha1'
...
signature = Base64.encode64(OpenSSL::HMAC.digest(
OpenSSL::Digest::Digest.new('sha1'),
"SECRET_KEY", policy
)).gsub("n","")
Saturday, December 17, 11

21. まとめ
•負荷分散によるアップロードファイル
分散問題
•直接S3にファイルアップロードする
ことで解決
•S3の耐久性と可用性をダイレクト
に利用できるので負荷や障害にも
強いシステムに！
Saturday, December 17, 11

22. 参考資料
• Browser-Based Uploads Using POST
http://docs.amazonwebservices.com/AmazonS3/2006-03-01/
dev/UsingHTTPPOST.html
• Browser Uploads to S3 using HTML POST Forms
http://aws.amazon.com/articles/1434
• Amazon Simple Storage Service: Browser-Based Uploads
using POST Proposal
http://doc.s3.amazonaws.com/proposals/post.html
Saturday, December 17, 11

23. cloudpack
Saturday, December 17, 11