質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
AWS Lambda

AWS Lambdaは、クラウド上でアプリを実行できるコンピューティングサービス。サーバーのプロビジョニングや管理を要せず複数のイベントに対してコードを実行します。カスタムロジック用いた他AWSサービスの拡張やAWSの規模やパフォーマンスを用いたバックエンドサービスを作成できます。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

解決済

2回答

11482閲覧

localhostからAPIGateway→Lambdaを経由してS3に画像をアップロードしたい

_Victorique__

総合スコア1392

AWS Lambda

AWS Lambdaは、クラウド上でアプリを実行できるコンピューティングサービス。サーバーのプロビジョニングや管理を要せず複数のイベントに対してコードを実行します。カスタムロジック用いた他AWSサービスの拡張やAWSの規模やパフォーマンスを用いたバックエンドサービスを作成できます。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

1クリップ

投稿2019/02/19 10:34

現在、Vueでサーバーレスアプリケーションを作成しています。
フロント側からaxiosでapigatewayにリクエストを投げてそれをlambdaに渡してS3に画像をアップロードしようとしています。

何故経由させているかというと、データベースに画像の情報を登録するためです。
なので、もしかするとS3に直接アップロードしてアップロードトリガーで処理することができるかもしれません。
とりあえずはおいておきます。
フロントエンドのリクエストの部分が以下になります。

vue

1 methods: { 2 onSubmit () { 3 let data = new FormData() 4 data.append('title', 'test') 5 6 for (let i = 0; i < this.files.length; i++) { 7 data.append('image', this.files[i]) 8 } 9 10 let config = { 11 headers: { 12 'Content-Type': 'multipart/form-data' 13 } 14 } 15 16 axios.post('apigatewayUrl', data, config) 17 .then((response) => { 18 console.log(response.data) 19 }) 20 .catch((error) => { 21 console.log(error) 22 }) 23 },

lambda側は以下です。

python

1import json 2import boto3 3import base64 4 5 6def lambda_handler(event, context): 7 # print(json.dumps(event)) 8 9 try: 10 s3 = boto3.resource('s3') 11 bucket = s3.Bucket('backetname') 12 imageBody = base64.b64decode(event['body']) 13 key = "test/cat.png" 14 bucket.put_object( 15 Body = imageBody, 16 Key = key 17 ) 18 print('success!') 19 res = { 20 "isBase64Encoded": True, 21 "statusCode": 200, 22 "headers": {}, 23 "body": json.dumps({"status": 1}) 24 } 25 return res 26 27 except Exception as e: 28 res = { 29 "isBase64Encoded": True, 30 "statusCode": 200, 31 "headers": {}, 32 "body": json.dumps({"message": str(e)}) 33 } 34 return res

実際にリクエストを投げると以下のようなエラーが返ってきます

shell

1string argument should contain only ascii characters

調べてみるとJavascriptのFormDataは独特なパースが必要というのを知りました。
現在、lambdaはpython3を使っていますが、パースする方法が見つかりませんでした。
そもそもFormDataオブジェクトを使用して画像をpostしている例がほとんどなく、
他の方は一体どのように画像をアップロードしているのだろうかと甚だ疑問です。
localhost→apigateway→lambda→S3はちゃんと繋がっているのは確認済みです。

ここで先ほどの余談に戻るのですが、APIGatewayとlambdaを経由させるのは一般的ではないのでしょうか?
S3にトリガーを設定しておいて、そのトリガーでデータベースを更新するのが一般的でしょうか?
教えて欲しいことをまとめると、

  1. FormDataでpostしたデータをlambda(python)側でパースして保存する方法はあるか
  2. そもそもFormDataを用いない方法があってそっちの方が便利なのか
  3. そもそもPythonという選択が間違っているのか
  4. apigateway→lambdaを経由させる必要はなく、S3にトリガーを仕込むのが普通か?また、その時のデータベースに登録するのに必要な情報等は一緒に送ることができるのか
  5. 一般的なサーバーレスアプリケーションに置ける画像アップロードの仕組みはどれがメジャーなのか

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

base64で送信しては?

  1. JavaScriptで画像をBase64エンコード、FormDataでなくJSONで送信
  2. python側で受け取ったBase64データをデコード、画像に戻してS3に保存

参考
https://qiita.com/mserizawa/items/7f1b9e5077fd3a9d336b

投稿2019/02/22 04:24

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_Victorique__

2019/02/22 05:07

回答ありがとうございます。 JS(フロント)でbase64にエンコード可能なのでしょうか? 以前探したのですが見つかりませんでした。
_Victorique__

2019/03/02 08:45

挑戦してみましたが超簡単にできました!! サーバーレスでやるならFormDataよりもbase64にして飛ばした方が楽ですね! ありがとうございました!
退会済みユーザー

退会済みユーザー

2019/03/02 09:28

良かったです。
guest

0

FormDataでpostしたデータをlambda(python)側でパースして保存する方法はあるか

あります.
必要ならコード描きますが,どうしますか?

そもそもFormDataを用いない方法があってそっちの方が便利なのか

エンコードしてjsonで受け取るとういうのが一般的ではあります.

そもそもPythonという選択が間違っているのか

Pythonが間違っているわけではないです.言語は各社,各人の最適なもので大丈夫です.

apigateway→lambdaを経由させる必要はなく、S3にトリガーを仕込むのが普通か?また、その時のデータベースに登録するのに必要な情報等は一緒に送ることができるのか

普通かどうかはわかりませんが,,, s3に直接PutするよりもAPIGatewayを通したほうがセキュリティ上安全かと思います.

一般的なサーバーレスアプリケーションに置ける画像アップロードの仕組みはどれがメジャーなのか

今回ご質問いただいている環境は,メジャーでよく使われる構成ですね.

APIGatewayの設定でimageは許可されていますか?

下記を参照してみてもうまくいかないですかね...
https://dev.classmethod.jp/cloud/aws/sugano-013-api-gateway/
https://qiita.com/acro5piano/items/125aeede85bc0448b600

投稿2019/02/20 06:10

DaichiYasuda

総合スコア173

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_Victorique__

2019/02/20 06:19

回答ありがとうございます。 是非コードを見てみたいです! こちらでもpythonでパースを試してみましたがファイル名は取れますが肝心の画像データが空になってしまいます(画像データ自体はちゃんとlambdaに届いています。) imageの許可してあります。構成も載せますね
_Victorique__

2019/02/20 06:20

ちなみにcontent-typeはimage/*ではなくmultipart/form-dataでpostしていますので画像とは関係ないと思うのですがどうでしょうか?
DaichiYasuda

2019/02/20 06:26

> ちなみにcontent-typeはimage/*ではなくmultipart/form-dataでpostしていますので画像とは関係ないと思うのですがどうでしょうか? 私の環境では,image/* もmultipart/form-data許可していました. ドキュメントがなかなか見当たらず,手当たり次第に設定していましたね
DaichiYasuda

2019/02/20 06:29

コードはちょっと待ってくださいね. 明日ぐらいには出来るかと. lambdaでflaskでAPI作って,ゴニョゴニョやってたはずです
_Victorique__

2019/02/20 07:02

なるほどです。確かに全部設定しておいたほうが間違いなさそうですね。 ありがとうございます!flaskってlambdaで使えるんですか? サーバーレスで実現できるならめっちゃ便利ですね!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問