WebフォームからS3へ直接ファイルをアップロードしてみました

AWSの備忘録なんですが、ブラウザから直接S3へファイルをアップロードする仕組みを試します

クラウドパックさんのブログを参考にコードが書けない自分でもコピペするだけで出来ました

それでは手順です

Webサーバーを準備します　PHPが動けばいいので既存のサーバーでも大丈夫だと思います

今回というか毎回ですが私はCentOSを使いますまずhttpdとphpをインストールします

yum -y install httpd php php-mbstring

続いてhttpd.confを編集しますが割愛させていただきます　こちらを参考に

AWSのコンソールからS3にアップロード先のバケットを作成していきます　こちらも特に難しくないので割愛しますが権限の設定でEveryone→Uploadできるようにしてみました

結局バケット名は「file.XXXX.XXXX.jp」にしました

次がphpファイルの作成します

httpdのコンテンツ置き場（/var/www/html）にファイルを作成します　名前は何でもOKですが私は月並みな　test.phpとしました　編集箇所は青字の部分のみです　コードが書けない＝理解できないなのでリダイレクトにパラメータ付きでも気にしません

vi /var/www/html/test.php

<?php
$id         = “00000000”;
$expiration = gmdate(“Y-m-dTH:i:sZ”,strtotime(“1 minute”));
$redirect   = “http://www.yahoo.co.jp”;　→アップロード完了後のリダイレクト先
$policy = <<<EOS
{
    “expiration”: “$expiration”,
    “conditions”: [
        {“bucket”: “file.XXXX-XXXX.jp”},　→バケット名を指定しました
        [“starts-with”, “$key”, “”],
        {“acl”: “private”},
        {“success_action_redirect”: “$redirect”},
        [“starts-with”, “$Content-Type”, “”],
        [“content-length-range”, 0, 1048576]
    ]
}
EOS;
$signature = hash_hmac(“sha1”, base64_encode($policy), “SECRET_KEY”, true);
?>
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
</head>
<body>
    <form action=http://file.XXXX-XXXX.jp.s3.amazonaws.com/
          method=”post” enctype=”multipart/form-data”>
      <input type=”hidden” name=”key”
             value=”<?php print(“${id}.txt”); ?>”/>
      <input type=”hidden” name=”AWSAccessKeyId”
             value=”ACCESS_KEY”/>
      <input type=”hidden” name=”acl”
             value=”private”/>
      <input type=”hidden” name=”success_action_redirect”
             value=”<?php print($redirect); ?>”/>
      <input type=”hidden” name=”policy”
             value=”<?php print(base64_encode($policy)); ?>”/>
      <input type=”hidden” name=”signature”
             value=”<?php print(base64_encode($signature)); ?>”/>
      <input type=”hidden” name=”Content-Type”
             value=”text/plain”/>
      <input type=”file”   name=”file”/>
      <input type=”submit” name=”button” value=”Upload”/>
    </form>
</body>
</html>

青字部分のバケット名とアクセスキーとシークレットキーを変更してファイル名も指定できるし容量制限もできるみたい実運用するならアップロード後のリダイレクト先で成功しましたと案内すれば親切ですね

それでは、準備は整ったかなぁ

じゃあパブリックDNS名でアクセスすると