Top Banner
Browser Uploads to S3 using HTML POST Forms @suz_lab Saturday, December 17, 11
23

Browser Uploads to S3 using HTML POST Forms

Jul 03, 2015

Download

Technology

Hiroyasu Suzuki
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Browser Uploads to S3 using HTML POST Forms

Browser Uploads to S3 using HTML POST Forms

@suz_lab

Saturday, December 17, 11

Page 2: Browser Uploads to S3 using HTML POST Forms

AWSで負荷分散が容易に!

Saturday, December 17, 11

Page 3: Browser Uploads to S3 using HTML POST Forms

(Upload)ファイル分散問題

•nfs?

•SPOF対策が面倒...

•s3fs?

•Heavyに利用すると嫌な思い出が...

•...

Saturday, December 17, 11

Page 4: Browser Uploads to S3 using HTML POST Forms

As-Is と To-Be

Saturday, December 17, 11

Page 5: Browser Uploads to S3 using HTML POST Forms

シーケンス

Saturday, December 17, 11

Page 6: Browser Uploads to S3 using HTML POST Forms

<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

Page 7: Browser Uploads to S3 using HTML POST Forms

<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

Page 8: Browser Uploads to S3 using HTML POST Forms

action

•バケット名.s3.amazonaws.comを指定

•http/httpsが指定可能

•www.suz-lab.comのようなドット区切りのバケット名は証明書エラー

•証明書が*.s3.amazonaws.comだから

Saturday, December 17, 11

Page 9: Browser Uploads to S3 using HTML POST Forms

<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

Page 10: Browser Uploads to S3 using HTML POST Forms

key

•S3にアップロードされるオブジェクト(ファイル)名を指定

•${filename}にするとアップロードするファイル名が利用される

Saturday, December 17, 11

Page 11: Browser Uploads to S3 using HTML POST Forms

<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

Page 12: Browser Uploads to S3 using HTML POST Forms

acl

•private

•public-read

•public-read-write

•authenticated-read

•bucket-owner-read

•bucket-owner-full-control

Saturday, December 17, 11

Page 13: Browser Uploads to S3 using HTML POST Forms

<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

Page 15: Browser Uploads to S3 using HTML POST Forms

<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

Page 16: Browser Uploads to S3 using HTML POST Forms

policy

•JSONで記述されたポリシーをBase64でエンコードしたもの

•ポリシーには有効期限やフォームのinputタグに記載された内容の条件などを記述

Saturday, December 17, 11

Page 17: Browser Uploads to S3 using HTML POST Forms

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

Page 18: Browser Uploads to S3 using HTML POST Forms

<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

Page 19: Browser Uploads to S3 using HTML POST Forms

signature

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

Saturday, December 17, 11

Page 20: Browser Uploads to S3 using HTML POST Forms

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

Page 21: Browser Uploads to S3 using HTML POST Forms

まとめ

•負荷分散によるアップロードファイル分散問題

•直接S3にファイルアップロードすることで解決

•S3の耐久性と可用性をダイレクトに利用できるので負荷や障害にも強いシステムに!

Saturday, December 17, 11

Page 22: Browser Uploads to S3 using HTML POST Forms

参考資料

• 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

Page 23: Browser Uploads to S3 using HTML POST Forms

cloudpack

Saturday, December 17, 11