AWS S3にNext.js(React)から画像をアップロードする

画像投稿の流れ

・Next.jsからS3へ画像をアップロードする
・同時にS3からアップロードした画像のURLを取得する
・取得した画像のURLをバックエンドへ送信する
・データベースに画像URLが保存される

はじめに

AWS SDK for JavaScriptをインストール

S3でやること

・バケットの作成
・ブロックパブリックアクセス: 無効にする(ブロックのチェックをOFF)
・アクセス許可： Cross-Origin Resource Sharing (CORS) を編集
・公開設定：バケットポリシーを編集

Next.jsでやること

・.envファイル作成（gitgnoneで設定すること忘れずに！）※「＊」の部分は実際の環境変数を入力する。

ACCESS_KEY_ID=********************
SECRET_ACCESS_KEY=***************
REGION=************
S3_BUCKET_NAME=***************

・next.config.jsファイルを編集

  // Next.jsの場合は.envをここで読み込む必要がある
  env: {
    ACCESS_KEY_ID: process.env.ACCESS_KEY_ID,
    SECRET_ACCESS_KEY: process.env.SECRET_ACCESS_KEY,
    REGION: process.env.REGION,
    S3_BUCKET_NAME: process.env.S3_BUCKET_NAME,
  }

・画像をアップロードするコードを書く

// S3の設定
const s3 = new S3({
  accessKeyId: process.env.ACCESS_KEY_ID,
  secretAccessKey: process.env.SECRET_ACCESS_KEY,
  region: process.env.REGION,
});

// S3に画像をアップロードし、そのURLを取得する関数
const uploadImageToS3 = async (file: File) => {
  // アップロード時のファイル名を作成
  const fileName = `${Date.now()}-${file.name}`;
  // S3へのアップロードに必要な情報をまとめるオブジェクト
  const params: PutObjectRequest = {
    Bucket: process.env.S3_BUCKET_NAME ? process.env.S3_BUCKET_NAME : '',
    Key: fileName,
    ContentType: file.type,
    Body: file,
  };
  // Bucket: アップロード先のバケット名を環境変数から取得します。
  // Key: アップロードするファイルのキーを指定します。
  // ContentType: アップロードするファイルのMIMEタイプを指定します。
  // Body: アップロードするファイルデータを指定します。

  try {
    // S3に画像をアップロードする
    const data = await s3.upload(params).promise();
    // アップロード成功時の処理
    console.log('画像アップロード成功:', data.Location);
    // アップロードされた画像のURLを取得
    return data.Location;
  } catch (error) {
    // アップロードエラー発生時の処理
    console.error('画像アップロードエラー:', error);
    // null値を返す
    return null;
  }
};