Name:
interface
Value:
Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

Page updated Apr 30, 2024

Maintenance ModeYou are viewing Amplify Gen 1 documentation. Amplify Gen 1 has entered maintenance mode and will reach end of life on May 1, 2027. New project should use Amplify Gen 2. For existing Gen 1 projects, a migration guide and tooling are available to help you upgrade. Switch to the latest Gen 2 docs →

Amplify Storage のセットアップ

前提条件

以下の手順が完了していることを確認してください:

バックエンドストレージをプロビジョニングする

AWS Amplify Storage モジュールは、アプリのユーザーコンテンツを公開、保護、またはプライベートストレージバケットで管理するためのシンプルなメカニズムを提供します。Storage カテゴリには Amazon S3 の組み込みサポートが付属しています。

バックエンドでストレージリソースのプロビジョニングを開始するには、プロジェクトディレクトリに移動して 以下のコマンドを実行 してください:

amplify add storage

プロンプトで以下のように入力してください:

? Please select from one of the below mentioned services:
`Content (Images, audio, video, etc.)`
? You need to add auth (Amazon Cognito) to your project in order to add storage for user files. Do you want to add auth now?
`Yes`
? Do you want to use the default authentication and security configuration?
`Default configuration`
? How do you want users to be able to sign in?
`Username`
? Do you want to configure advanced settings?
`No, I am done.`
? Please provide a friendly name for your resource that will be used to label this category in the project:
`S3friendlyName`
? Please provide bucket name:
`storagebucketname`
? Who should have access:
`Auth and guest users`
? What kind of access do you want for Authenticated users?
`create/update, read, delete`
? What kind of access do you want for Guest users?
`create/update, read, delete`
? Do you want to add a Lambda Trigger for your S3 Bucket?
`No`

変更をクラウドにプッシュするには、以下のコマンドを実行 してください:

amplify push

バックエンドが正常に更新されると、新しい設定ファイル amplifyconfiguration.json がソースディレクトリ (例: '/src') にコピーされます。

アプリケーションを設定する

yarn または npm で Amplify をアプリに追加します:

npm install aws-amplify

Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example index.js in React or main.ts in Angular.

import { Amplify } from 'aws-amplify';
import amplifyconfig from './amplifyconfiguration.json';
Amplify.configure(amplifyconfig);

Amplify.configure をアプリケーションのライフサイクルの早い段階で呼び出すことを確認してください。Amplify.configure が他の Amplify JavaScript API の前に呼び出されていない場合、設定の欠落または NoCredentials エラーがスローされます。この問題の考えられる原因については、ライブラリが設定されていないトラブルシューティングガイドを確認してください。

Amplify CLI を使用したモックとローカルテスト

Amplify CLI は Amazon S3 でアプリケーションをテストするためのローカルモックサーバーの実行をサポートしています。詳細については CLI ツールチェーンドキュメントを参照してください。