メサイア・ワークス

htmlフォームからs3にアップロードしようとしたら、policyとsignatureをbase64でエンコードしないと駄目なので、変換プログラミングがないと厳しい!素直にAWS SDK for javascriptを使おう!

htmlフォームからs3にアップロードしようとしたら、policyとsignatureをbase64でエンコードしないと駄目なので、変換プログラミングがないと厳しい!素直にAWS SDK for javascriptを使おう!

そう考えると、htmlフォーム@s3 → lambda -> s3へアップロードが簡単かな?

公式に「ブラウザから Amazon S3 への写真のアップロード」があったので実装してみよう。
S3+JSで行けるかと思ったら、cognitoも必要なのか…。
https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html

グダグダ言っててもしょうがないので、とりあえずやってみるか
cognitoじゃなくて、普通のIAMユーザにs3フルアクセス権限を与えて、アクセスキー&シークレットキーで認証しよう(ソースで丸見えになるから本当は駄目です!!)

1, s3バケットを作成。パブリックにアクセス可能にしておく
1-a, ブロックパブリックアクセス (バケット設定)を4つともオフ!
2-b, パケットポリシーを設定。Bucket-Nameだけ書き換えする。s3のファイル取得のみ可
この状態にすると、s3にアップロードしたファイルはURLにアスセスすれば表示される。

2, CORS(Cross-Origin Resource Sharing)設定
別のドメイン(localhost)からでもアクセスできるように設定する

3, s3にアクセスするためのユーザを作る(アクセスキーだけって作れないのか~!?)
3-1, iamユーザを作る
3-2, AmazonS3FullAccessポリシーを、作ったユーザにアタッチする
3-3, アクセスキーとアクセスシークレットが表示されるのでメモしておく。
※忘れたら2つまで作れるので、新規に作っても良い。

4, ようやくコーディング。土台となるhtmlとアップロード処理のJSを作る。

AWSのSDKの最新バージョンは、以下のサイトから確認する
https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/index.html

アルバム機能と削除機能は不要なので削除した。アップロード機能と写真一覧機能のみ!

モバイルバージョンを終了