AWS AmplifyのStorageを利用して静的ファイルを扱います。

Authenticationを利用した認証については、以下を参照してください。

1.AWS Amplifyを使ってサインインを実装する-1
2.AWS Amplifyを使ってサインインを実装する-2
3.AWS Amplifyを使ってサインインを実装する-3
4.AWS Amplifyを使ってサインインを実装する-4

ファイルアクセスレベル

Storageには3つのアクセスレベルがあります。
今回は、privateに対してのアクセスを行います。

環境等

機能追加

Amplify storage

Amplify storageを追加します。

amplify add storage

実行すると、いくつか質問があるので答えます。
以下は選択した内容です。

? Please select from one of the below mentioned services Content (Images, audio, video, etc.)
? Please provide a friendly name for your resource that will be used to label this category in the project: ...
? Please provide bucket name: ...
? Who should have access: Auth users only
? What kind of access do you want for Authenticated users? create/update, read, delete
Successfully updated auth resource locally.
Successfully added resource filetransfer locally

Some next steps:
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud

バックエンドを更新します。
Are you sure you want to continue? と聞かれるので、Yes と入力します。
すると、S3にバケットが追加されます。

amplify push

実装

PUT

import { Storage } from 'aws-amplify';

Storage.put('test.txt', , {
level: 'private',
contentType: 'text/plain'
});

また、vueファイル内で利用する場合は、thisに$Amplifyが生えているので、以下のようにできます。

this.$Amplify.Storage.put('test.txt', , {
level: 'private',
contentType: 'text/plain'
});

GET

import { Storage } from 'aws-amplify';

Storage.get('test.txt', {
level: 'private'
});

また、vueファイル内で利用する場合は、thisに$Amplifyが生えているので、以下のようにできます。

this.$Amplify.Storage.get('test.txt', {
level: 'private'
});

奥山

ECMAScript,Javaを扱います。
最近は、vue.jsなどフロントエンドの技術に興味あり！

中日ドラゴンズを応援してます。