Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Browser	 Uploads	 to	 S3	                      using	 HTML	 POST	 Forms                               @suz_labSaturday, De...
AWSで負荷分散が容易に!Saturday, December 17, 11
(Upload)ファイル分散問題                    •nfs?                     •SPOF対策が面倒...                    •s3fs?                     ...
As-Is	 と	 To-BeSaturday, December 17, 11
シーケンスSaturday, December 17, 11
<form	 action="http://www.suz-lab.com.s3.amazonaws.com/"	 	 	 	 	 	 	 	 	 	 method="post"	 enctype="multipart/form-data">	...
<form	 action="http://www.suz-lab.com.s3.amazonaws.com/"	 	 	 	 	 	 	 	 	 	 method="post"	 enctype="multipart/form-data">	...
action                    •       バケット名.s3.amazonaws.comを指定                    •       http/httpsが指定可能                    ...
<form	 action="http://www.suz-lab.com.s3.amazonaws.com/"	 	 	 	 	 	 	 	 	 	 method="post"	 enctype="multipart/form-data">	...
key                    •S3にアップロードされるオブジェクト                     (ファイル)名を指定                    •${filename}にするとアップロードする     ...
<form	 action="http://www.suz-lab.com.s3.amazonaws.com/"	 	 	 	 	 	 	 	 	 	 method="post"	 enctype="multipart/form-data">	...
acl                    •       private                    • public-read                    • public-read-write            ...
<form	 action="http://www.suz-lab.com.s3.amazonaws.com/"	 	 	 	 	 	 	 	 	 	 method="post"	 enctype="multipart/form-data">	...
success_action_redirect                    •アップロード完了後のリダイレクト先                     •http://www.suz-lab.com/                ...
<form	 action="http://www.suz-lab.com.s3.amazonaws.com/"	 	 	 	 	 	 	 	 	 	 method="post"	 enctype="multipart/form-data">	...
policy                    •       JSONで記述されたポリシーをBase64で                            エンコードしたもの                    •       ポ...
require	 base64json	 =	 <<"EOS"{	 	 "expiration":	 "2012-01-01T00:00:00Z",	 	 "conditions":	 [	 	 	 	 {"bucket":	 "www.suz...
<form	 action="http://www.suz-lab.com.s3.amazonaws.com/"	 	 	 	 	 	 	 	 	 	 method="post"	 enctype="multipart/form-data">	...
signature                    •       Base64でエンコードされたポリシーを                            HMAC/SHA-1を使ってシークレットキー               ...
require	 base64            require	 openssl            require	 digest/sha1            ...            signature	 =	 Base64...
まとめ                    •負荷分散によるアップロードファイル                     分散問題                            •直接S3にファイルアップロードする          ...
参考資料                    •       Browser-Based	 Uploads	 Using	 POST                            http://docs.amazonwebservic...
cloudpackSaturday, December 17, 11
Upcoming SlideShare
Loading in …5
×

Browser Uploads to S3 using HTML POST Forms

12,464 views

Published on

Published in: Technology, Business
  • Be the first to comment

Browser Uploads to S3 using HTML POST Forms

  1. 1. Browser Uploads to S3 using HTML POST Forms @suz_labSaturday, December 17, 11
  2. 2. AWSで負荷分散が容易に!Saturday, December 17, 11
  3. 3. (Upload)ファイル分散問題 •nfs? •SPOF対策が面倒... •s3fs? •Heavyに利用すると嫌な思い出が... •...Saturday, December 17, 11
  4. 4. As-Is と To-BeSaturday, December 17, 11
  5. 5. シーケンスSaturday, December 17, 11
  6. 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. 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. 8. action • バケット名.s3.amazonaws.comを指定 • http/httpsが指定可能 •りのバケット名は証明書エラー www.suz-lab.comのようなドット区切 • 証明書が*.s3.amazonaws.comだからSaturday, December 17, 11
  9. 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. 10. key •S3にアップロードされるオブジェクト (ファイル)名を指定 •${filename}にするとアップロードする ファイル名が利用されるSaturday, December 17, 11
  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. 12. acl • private • public-read • public-read-write • authenticated-read • bucket-owner-read • bucket-owner-full-controlSaturday, December 17, 11
  13. 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. 14. success_action_redirect •アップロード完了後のリダイレクト先 •http://www.suz-lab.com/ ?bucket=www.suz-lab.com &key=upload.txt &etag=%22...%22Saturday, December 17, 11
  15. 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. 16. policy • JSONで記述されたポリシーをBase64で エンコードしたもの • ポリシーには有効期限やフォームの inputタグに記載された内容の条件など を記述Saturday, December 17, 11
  17. 17. require base64json = <<"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] ]}EOSpolicy = Base64.encode64(json).gsub("n","")Saturday, December 17, 11
  18. 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. 19. signature • Base64でエンコードされたポリシーを HMAC/SHA-1を使ってシークレットキー でサインして、さらにBase64でエン コードしたものSaturday, December 17, 11
  20. 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. 21. まとめ •負荷分散によるアップロードファイル 分散問題 •直接S3にファイルアップロードする ことで解決 •S3の耐久性と可用性をダイレクト に利用できるので負荷や障害にも 強いシステムに!Saturday, December 17, 11
  22. 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.htmlSaturday, December 17, 11
  23. 23. cloudpackSaturday, December 17, 11

×