🗂
AmplifyとS3とAPIGatewayを利用したファイルをアップロードするアプリを作ってみた
構成

アプリイメージ

S3 にLambdaソースコードアップロード
S3バケットを作成し、以下のlambda_function.py.zipをアップロードしてください
※デプロイするリージョンにS3バケットを作成すること

API GatewayのCloudwatchのアクセスロールを作成する
CloudWatch logを有効にするため、API Gatewayのログ記録にロールARNを設定する

CloudFormation 実行
以下のURLからyamlを取得し、先ほど作成したS3バケットと保存したパスをパラーメーターとしてスタックを作成するSuffixに任意の値を入れるとCFnで作成されるバケット名のSuffixが変更される。


APIのテスト
APIのエンドポイントにブラウザからアクセスし、デプロイされていることを確認する。
<API Endpoint>/prod/presigned-url?file_name=example.com
取得したpresigned-urlにファイルをアップロードしてみる。
curl -X PUT -T example.jpg -H "Content-Type: image/jpeg" "<presigned-url>"
AWS Amplify でNext.jsのデプロイ
以下のGithub ブランチをデプロイする。

環境変数は以下の通り。
| Key | Value |
|---|---|
| NEXT_PUBLIC_API_ENDPOINT | <API Endpoint>/prod |
アプリテスト
ファイルのアップロードができれば成功
Discussion