Reactを使ってAWS S3からファイルURLを取得する方法

やりたいこと

Reactを使ってAWS S3からファイルURLを取得したい。
開発環境はReact 18.12.0、 Typescript4.9.5

実現方法

aws-sdkを用いて実装を行う。 aws-sdkはnpm install aws-sdkでインストールする。

S3インスタンスにAWS_KEYとAWS_SEACRET_KEYを設定する。

getSignedUrlメソッドの第一引数にgetObjectを第二引数にバケットとファイルを指定する。

上記内容を基にダウンロードURLを実装した。(環境変数は別途指定)

// aws-sdkのインポート
import AWS from "aws-sdk";
import { Credentials } from "aws-sdk";

export const s3Url = async (fileName:String, extention: string): Promise<string | undefined> => {
  // 認証情報設定
  const creds = new Credentials(
    AWS_KEY,
    AWS_SEACRET_KEY
  );
  // s3インスタンス生成
  const s3 = new AWS.S3({ region: AWS_REGION, credentials: creds });
  // output配下のファイルを指定
  const filePath = "output/" + fileName;
  // バケット名とファイルを指定
  const getUrlParams = {
    Bucket: AWS_BUCKET,
    Key: filePath,
  }
  try {
    // 取得処理を実行
    const downloadUrl = await s3.getSignedUrl("getObject",getUrlParams);
    return downloadUrl;
  } catch (error) {
    console.error("Error generating signed URL:", error);
    return undefined;
  }
}

感想

今回取得したURLからプレビュー表示をさせたり、ダウンロードリンクを生成させたりできるので、 実装サンプルあげていきたい。 AWSから直接ファイルをダウンロードできると、やれることも広がりそう。

今回の内容が参考になったら幸いです。