🗂

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

2024/10/01に公開

構成

アプリイメージ

S3 にLambdaソースコードアップロード

S3バケットを作成し、以下のlambda_function.py.zipをアップロードしてください
https://github.com/hanzoarch/image-uploader-nextjs/blob/amplify/aws/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 ブランチをデプロイする。
https://github.com/hanzoarch/image-uploader-nextjs/tree/amplify/

環境変数は以下の通り。

Key Value
NEXT_PUBLIC_API_ENDPOINT <API Endpoint>/prod

アプリテスト

ファイルのアップロードができれば成功

Discussion