📝
S3へファイルアップロードするWEBアプリを爆速でつくる
完成イメージ
以下のイメージでブラウザ経由でファイルをS3へアップロードする
認証突破したあとのWEB画面
ファイル選択してアップロードすると、S3に保存される。
前提
- Node.jsをセットアップしておく。
- AWS CLIをセットアップしておく。
- GitHubをセットアップしておく
- Amplify CLIをセットアップしておく。
構築手順
まずはこちらのリポジトリをフォークしてクローンします。
git clone https://github.com/aws-samples/s3uploader-ui.git
cd s3uploader-ui
つづいて、Amplifyのセットアップしていきます。
amplify init を実行して、対話形式でコマンドを入力していきます。
amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project s3uploaderui
The following configuration will be applied:
Project information
| Name: s3uploaderui
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start
? Initialize the project with the above configuration? Yes
Using default provider awscloudformation
? Select the authentication method you want to use: AWS profile
つづいて、 Amazon Cognito 認証を追加します。
amplify add auth を実行して、対話形式でコマンドを入力していきます。
amplify add auth
Using service: Cognito, provided by: awscloudformation
The current configured provider is Amazon Cognito.
Do you want to use the default authentication and security configuration? Default configuration
Warning: you will not be able to edit these selections.
How do you want users to be able to sign in? Username
Do you want to configure advanced settings? No, I am done.
✅ Successfully added auth resource s3uploaderui0e0a4ac7 locally
さらにS3のストレージを追加します。
amplify add storage を実行して、対話形式でコマンドを入力していきます。
amplify add storage
? Select from one of the below mentioned services: Content (Images, audio, video, etc.)
✔ Provide a friendly name for your resource that will be used to label this category in the project: · sandbox
✔ Provide bucket name: · s3uploaderuie7730f9df0e74cccbc8203ffa394498f
✔ Who should have access: · Auth users only
✔ What kind of access do you want for Authenticated users? · create/update, read, delete
✔ Do you want to add a Lambda Trigger for your S3 Bucket? (y/N) · no
✅ Successfully added resource sandbox locally
最後にWebホスティングを追加します。
amplify hosting add を実行して、対話形式でコマンドを入力していきます。
amplify hosting add
✔ Select the plugin module to execute · Amazon CloudFront and S3
✔ hosting bucket name · s3uploaderui-20231010161056-hostingbucket
Static webhosting is disabled for the hosting bucket when CloudFront Distribution is enabled.
You can now publish your app using the following command:
Command: amplify publish
実行する
リソースをAWSに反映するため、 amplify push を実行します。
npm i
amplify push
さらにWEBサイト公開するために、 amplify publish を実行します。
amplify publish
Cognitoユーザープールを開いて、適当なユーザを追加しておきます。
割愛
ログインして、動作確認する
publish後に表示されるHosting endpointのURLへアクセスすると認証画面が出てきます。
先ほど作成したCognitoのユーザのIDとパスワードで認証を突破します。
ファイルをアップロードするWEBアプリが動いていることを確認できました。
参考資料
Discussion