ファイルをアップロードするS 3プレサインURLを使用して

閉じるこの動画はお気に入りから削除されています.

私たちは何を建てていますか。

我々は、事前に署名されたURLを生成するラムダ関数を作成するつもりだと同様に反応するフロントエンドは本当にクールなコンポーネントライブラリを利用して!
伝統的に、ファイルをアップロードすることは、実装して、管理するために少しの痛みでありえました.幸いAWSは、直接署名されたURLを使用してオブジェクトを直接S 3のバケットにアップロードすることができます.事前に署名されたURLは、有効期限が付属しているので、それ以外の場合、アクセスがブロックされる前に、あなたのアップロードを開始する必要があります.

ウォークスルー時間。

プロジェクトは2つのセクションに分かれます.フロントエンドとバックエンド.
Gitthubにヘッドをつかむcode .

バックエンド

我々は、我々のS 3バケットを作成するのと同様に我々のラムダ機能をつくって、配備するために、CloudformationとAWSサムを使用するつもりです.この関数は、呼び出されると、事前に署名されたURLを生成します.このコードを自分のAPI内で簡単にホストできます.
まず、AWS CLIとAWS SAM CLIがインストールされ、設定されていることを確認します.ここでの方法this .
一度設定して行く準備が整いましたら、実行する必要があるすべてが実行されてsam build 続いてsam deploy --guided ラムダ関数のルートフォルダの中から.SAM CLIは展開を通してあなたを案内します、そして、一旦成功するならば、あなたは新しくつくられたS 3バケットとラムダ機能を持っています.
あなたのラムダ関数のAPIゲートウェイURLをコピーしてくださいUpload.js コンポーネント.

フロントエンド

更新Upload.js APIエンドポイントを持つコンポーネント.

const SignedUploadDragAndDrop = () => {
  useRequestPreSend(async ({ items, options }) => {
    const files = items.length > 0 ? items[0] : {};

    let { file } = files;
    let { name, type } = file;
    let gateway = '<YOUR APIGATEWAY ENDPOINT URL>';

    const response = await axios(
      `${gateway}?` +
      new URLSearchParams({
        name,
        type,
      })
    );

   ....

これの後、ちょうど走るyarn and yarn start フロントエンドフォルダの中から、このポストのヒーローイメージの1つのように見えるページで終わる必要があります.
私は真剣に素晴らしいコンポーネントライブラリを使用しているこのチュートリアルの反応アップロードと呼ばれる.具体的には、アップロードボタン、ドラッグアンドドロップ、および進捗コンポーネントを組み合わせました.しかし、あなたが加えることができるいくつかの他があります.Check it out!
リクエストをアップロードするファイルを選択すると、事前に署名されたURLを取得し、再度返されます.かなり甘い.
これが助ける望み!