くるくるパーマの株日記

2024年証券口座に1000万円達成が目標


トップ > AWS系 > Amazon S3をイジってファイル共有サイト化してみる

Amazon S3をイジってファイル共有サイト化してみる

AWS系

AD

f:id:ktkooon:20160727190037p:plain

以前の記事で、Amazon S3でファイルを公開するというのをやってみました。

で、やってみて気づいたのですがDropboxっぽくこう保存したファイルをいい感じに表示できたらなぁと思い、調べてやってみることにしました。

どうやら、静的Webサイトホスティング機能を上手く使えばできそうです。

docs.aws.amazon.com

よさげなブログがあったので参考にしました。

www.lancork.net

それではやってみます。

今回目指すもの

今回は、上記の参考ブログとはちょっと変えて、特定のバケットのファイルリストをダウンロードリンク付きでリスト表示させたいと思います。

……そうイメージはDropboxのように。

準備

CORS設定

参考ブログを元に、CORSを設定していきます。
バケットは今回用に、バケット名「my-list-bucket」リージョン「Tokyo」で作りました。作成したら、プロパティ  > アクセス許可からCORS設定の追加をしていきます。

f:id:ktkooon:20160726084627p:plain

CORS設定はこの辺が参考になります。今回は、あらゆるドメインからのGET,PUT,POST,DELETEリクエストを許可設定にします。

実際の運用の際は、セキュリティの観点から細かく切り分けたほうがよさそうですが、テストであればこれで十分かと思います。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedHeader>*</AllowedHeader>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

f:id:ktkooon:20160726085205p:plain

「保存」を押して完了です。

静的Webサイトホスティング設定

プロパティ > 静的ウェブサイトホスティングの設定より、インデックスでドキュメントを記述しておきます。今回はあとで、「index.html」というhtmlファイルを用意するのでインデックスドキュメントに「index.html」と記述しておきます。

エラードキュメントは今回はとりあえずなしで。

f:id:ktkooon:20160726124606p:plain

画像の準備

ついでにおなじみ「いらすとや」から素材をいくつかダウンロードして、バケットに保存しておきます。高校野球の時期なので、野球系のPNGを何枚か(笑)

f:id:ktkooon:20160727190228p:plain

 

AWS SDK for JavaScriptをつかってみる！

まずは、API経由でアクセスするためにaccess_keyとsecret_keyが必要です。

joppot.info

を参考に、キーを取得していきます。
IAMユーザーの使用開始よりユーザーを作成していきます

f:id:ktkooon:20160726220938p:plain

名前はS3userとします

f:id:ktkooon:20160726221021p:plain

次の画面で、「ユーザーのセキュリティ認証情報を非表示」を押すとアクセスキーIDとシークレットアクセスキーが手に入りました。

f:id:ktkooon:20160726221850p:plain

本当はJSに埋め込むと、ユーザーに見えてしまうため実運用ではちょっと微妙ですが今回はテストなのでこれらのキーを使います。

Configuring the SDK in the Browser — AWS SDK for JavaScript

を読むとFacebook,Amazon,googleのアカウントの認証を使って認証連携できるらしいので、実運用ではそれを使うと良さそうです。

AWS SDK for JavaScriptを使ってみる

使い方は簡単。index.htmlでscriptタグにてCDN提供されているaws-sdkを読み込み、アクセスキーとシークレットキーを渡してあげるとすぐに使えます。

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.0.0-rc1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">AWS.config.update({accessKeyId: 'ここにアクセストークン', secretAccessKey: 'ここにシークレットキー'});</script>

 あとは、JavaScriptでドキュメントに沿って呼び出すだけです！

File: README — AWS SDK for JavaScript

S3だけじゃなく色んなサービスのAPIが用意されているところはさすがです。

今回は、指定したS3バケット内のファイルをリスト表示していきたいと思います。
ここですべてのファイルをリスト化してしまうと、「index.html」も表示されてしまうので、その場合はリスト表示しない処理をいれました。

「index.html」の全体は以下です。

ファイルができたらS3のバケットにアップロードしましょう。

動作確認

それでは、実際にどうなったか確認していきたいと思います。

確認する際は「index.html」を開くのですが、リンクはこちらにあります。index.htmlのプロパティ欄です。

f:id:ktkooon:20160727185243p:plain

ではこれを開いてみると…

f:id:ktkooon:20160727185642p:plain

こんな感じでバケット内のファイルがリスト表示されました！
ためしに、一番上の「baseball_hit.png」をクリックしてみます。

f:id:ktkooon:20160727185743p:plain

別タブで画像が表示されれば成功です！

セキュリティをしっかり考慮すれば、企業間のファイルのやりとりにも使えそうかなと思います！今度はアップロードとどういうセキュリティ設定がベストなのかも考えてみたいと思います。おわり。

AD