AWS Amplifyを使って静的ファイルを扱う

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

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

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

ファイルアクセスレベル

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

レベル 説明 ファイル格納先
public 全ユーザがアクセス可能 public/
protected 全ユーザがアクセスできるが、書き込みは自分のフォルダのみ protected/{cognito identity id}/
private アクセスできるのは自分のみ private/{cognito identity id}/

環境等

項目 バージョン
node v10.15.3
npm 6.4.1
@aws-amplify/cli 1.6.11
aws-amplify 1.1.28
aws-amplify-vue 0.2.11
vuesax 3.8.65
material-icons 0.3.1

機能追加

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'
});

コメント

タイトルとURLをコピーしました