ReactとAWS S3でファイルURLを取得する方法

やりたいこと
1. 開発環境
必要なツールと準備
1. AWSアカウントの作成とS3バケットの準備
2. AWS SDKのインストール
実現方法
まとめ
1. 今回のポイント

やりたいこと

Reactを使ってAWS S3からファイルのURLを取得し、ユーザーがそのファイルをダウンロードできる仕組みを実装したいと考えています。AWSのS3バケットには多くのファイルが保存でき、Reactを利用してこれらのファイルにアクセスすることで、アプリケーションに新しい機能を追加できます。

本記事では、AWS SDKを使ってS3から署名付きURL（signed URL）を取得する方法を初心者向けに解説し、ファイルダウンロードやプレビュー表示の実装方法を紹介します。

開発環境

React: 18.12.0
Typescript: 4.9.5
AWS SDKを利用してS3と連携します。

必要なツールと準備

AWSアカウントの作成とS3バケットの準備

AWS S3にアクセスするには、AWSアカウントが必要です。
S3バケットの下記設定は終わっている前提で進めます。

AWSアカウントの作成
AWS公式サイトからアカウントを作成します。
S3バケットの作成
AWSマネジメントコンソールにログインし、「S3」サービスを開きます。新しいバケットを作成し、アップロードしたいファイルをそのバケットに保存します。
IAMユーザーの作成と権限の設定
AWS SDKを使ってS3にアクセスするためのIAMユーザーを作成し、そのユーザーに必要なS3へのアクセス権限（例: GetObject）を与えます。

AWS SDKのインストール

ReactとAWS SDKを使ってS3と連携するために、まずAWS SDKをインストールします。以下のコマンドを実行してインストールしましょう。

Bash

npm install aws-sdk

実現方法

AWS SDKのセットアップ

AWS SDKを使ってS3バケット内のファイルにアクセスし、ダウンロードURLを取得するために必要な認証情報を設定します。以下はその基本的な流れです。

AWS_KEYとAWS_SECRET_KEYを使って認証を行います。
getSignedUrlメソッドを使用して、特定のファイルへのアクセス権限を一時的に付与した署名付きURLを取得します。

署名付きURLの取得

以下のコードでは、指定したファイルのダウンロードURLを生成するためのサンプルです。getSignedUrlメソッドを利用して、S3からファイルURLを取得します。

TSX

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

// 署名付きURLを取得する関数
export const s3Url = async (fileName: string, extension: string): Promise<string | undefined> => {
  // 認証情報設定
  const creds = new Credentials(
    AWS_KEY,  // AWSのアクセスキー
    AWS_SECRET_KEY  // AWSのシークレットキー
  );
  
  // S3インスタンス生成
  const s3 = new AWS.S3({ 
    region: AWS_REGION, 
    credentials: creds 
  });
  
  // バケット内のファイルパスを指定
  const filePath = "output/" + fileName;
  
  // getSignedUrlメソッドのパラメータ設定
  const getUrlParams = {
    Bucket: AWS_BUCKET,  // S3バケット名
    Key: filePath,       // ファイルのパス
  };
  
  try {
    // 署名付きURLを取得
    const downloadUrl = await s3.getSignedUrlPromise("getObject", getUrlParams);
    return downloadUrl;
  } catch (error) {
    console.error("Error generating signed URL:", error);
    return undefined;
  }
};

署名付きURLの利用

取得したURLを使って、Reactアプリ内でファイルをプレビュー表示したり、ダウンロードリンクを作成したりできます。以下は簡単な例です。

ファイルのダウンロード機能

TSX

import React, { useState, useEffect } from "react";
import { s3Url } from "./s3Url";  // 先ほどのs3Url関数をインポート

const FilePreview: React.FC = () => {
  const [fileUrl, setFileUrl] = useState<string | undefined>(undefined);

  useEffect(() => {
    // ファイル名を指定してURLを取得
    const fetchUrl = async () => {
      const url = await s3Url("example-file.pdf", "pdf");
      setFileUrl(url);
    };

    fetchUrl();
  }, []);

  return (
    <div>
      {fileUrl ? (
        <a href={fileUrl} download>
          ファイルをダウンロード
        </a>
      ) : (
        <p>ファイルを取得中...</p>
      )}
    </div>
  );
};

export default FilePreview;