Browser Uploads to S3 using HTML POST Forms

12,115 views

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,115
On SlideShare
0
From Embeds
0
Number of Embeds
1,361
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×