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を追加します。

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

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

実装

PUT

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

GET

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA