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

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

クラウドパックさんのブログを参考にコードが書けない自分でもコピペするだけで出来ました
image
それでは手順です
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名でアクセスすると
image
ファイルを選択ボタンを押すとキタァーーー!! すごいね
image
最後にUploadボタンを押す と おっ数KBだけだから マッハで リダイレクト先へ飛んだ
AWSのコンソールからS3のバケットを確認すると  あった!! ファイルをアップできました
コード書けなくても 先人の知恵を頼れば簡単にアップロードできました
コード書ける人はファイル名を可変にしてアップロードしたファイルを一覧で取得してダウンロードできる画面を作ることもできると思いますので 試してください そして教えてください
S3アップロード ダウンロード関係の参考サイト

シェアする

  • このエントリーをはてなブックマークに追加

フォローする