🗃️

Next.js App RouterでS3ファイルをアップロード・取得・削除する

2024/11/19に公開

Next.js

tech

 前提この記事では、以下の技術を使ったS3ファイルの操作方法を記述していきます。
Next.js App Router (v14.2.10)
Amazon S3
AWS SDK for JavaScript v3
AWS IAMユーザー（SDK認証用）
なお、この記事ではローカルで挙動確認することを目的としているため、簡易的にIAMユーザーを用いています。AWS上で恒久的なシステムとして公開する場合は、セキュリティ強化のため各サービスのIAMロールやCognitoの利用をご検討ください。

 事前準備事前準備として、S3バケットを作成し、IAMユーザにS3アクションを許可するように設定します。

手順の内容はすべてAWSコンソール上で操作します。

 S3まずはS3バケットを作成します。

 バケット作成
バケットを作成を押下

バケット名に任意の値を入力
他はデフォルトのまま、ページ最下部のバケットを作成を押下

 IAM続いて、IAMユーザーにS3操作を実行できるポリシーを関連付けます。

 ポリシー作成左メニューでポリシーを押下

ポリシーの作成を押下
以下のとおりに設定
サービス：S3
アクション許可：GetObject, PutObject, DeleteObject
リソース > object

ARNを設定を押下
Resource bucket name：作成したS3のバケット名
Resource object name：*

ARNを追加を押下



次へを押下

ポリシー名に任意の値を入力

ポリシーの作成を押下
ここではResource object nameを*と設定しているため、作成したS3バケットに存在するすべてのオブジェクトに対して許可を与えている設定となります。

対象のオブジェクトを制限したい場合は、制限に応じた内容でポリシーを編集します。

 ユーザー作成左メニューでユーザーを押下

ユーザーの作成を押下

ユーザー名に任意の値を入力

次へを押下
以下のとおりに設定
許可のオプション：ポリシーを直接アタッチする
許可ポリシー：作成したポリシー名


次へを押下

ユーザーの作成を押下

 アクセスキー発行IAMユーザのアクセスキーが未発行の場合のみ対応します。
左メニューでユーザーを押下
対象のユーザー名を押下

セキュリティ認証情報タブ内のアクセスキーを作成を押下
以下のとおりに設定
ユースケース：ローカルコード
上記のレコメンデーションを理解し、アクセスキーを作成します。：ON


次へを押下

アクセスキーを作成を押下
画面上にアクセスキーとシークレットアクセスキーが表示されるので、コピーして控えておく

 Next.jsプロジェクトの作成については省略します。公式ドキュメントをご参照ください。

 環境変数設定機密情報秘匿のため、AWS関連の値を環境変数として設定します。

リポジトリ直下の.envに、以下の記述を追加します。
AWS_REGION={AWSリージョン}
S3_BUCKET_NAME={S3バケット名}
IAM_ACCESS_KEY={IAMユーザのアクセスキー}
IAM_SECRET_ACCESS_KEY={IAMユーザのシークレットアクセスキー}
ここではローカルで動かすための設定を記述していますが、デプロイ時には各サービスの環境変数に同様の設定が必要となります。

 SDKライブラリ追加以下のコマンドを実行して、AWS SDKライブラリを追加します。
npm install @aws-sdk/client-s3
または
yarn add @aws-sdk/client-s3
これで、IAMユーザーによる認証でS3操作を実行する準備が整いました。

以降は、Next.js App RouterにてS3操作を実装していきます。

 ファイルをアップロードする
 サーバアクションaction.ts
"use server";
import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3";

const s3Client = new S3Client({
  region: process.env.AWS_REGION,
  credentials: {
    accessKeyId: process.env.IAM_ACCESS_KEY!,
    secretAccessKey: process.env.IAM_SECRET_ACCESS_KEY!,
  },
});

export async function uploadFile(base64: string, fileName: string) {
  try {
    const command = new PutObjectCommand({
      Bucket: process.env.S3_BUCKET_NAME!,
      Key: fileName,
      Body: Buffer.from(base64.split(",")[1], "base64")
    });
    await s3Client.send(command).then(() => {
        console.log("File uploaded successfully");
    }).catch((error) => {
      console.error("Error uploading file:", error);
      throw error;
    });
    return;
  } catch (error) {
    console.error("Error uploading file:", error);
    throw error;
  }
}
まず最初にAWSリージョンとIAMユーザの認証情報を指定し、S3Clientを生成しています。
サーバアクションはシリアライズ可能な値のみを送受できるため、アップロードするファイルはbase64の文字列として受け取ります。S3へのコマンド送信のため、さらにBufferに変換しています。

ファイルはS3バケット直下に、引数として渡されたファイル名でアップロードされます。

 コンポーネントUploadInput.tsx
"use client";
import { uploadFile } from "./action";

function convertFileToBase64(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = (error) => reject(error);
  });
}

async function handleUpload(event: React.ChangeEvent<HTMLInputElement>) {
  try {
    const file = event.target.files?.[0];
    if (file) {
      const base64 = await convertFileToBase64(file);
      await uploadFile(base64, file.name);
    }
  } catch (error) {
    console.error("Error uploading file:", error);
  }
}

export default function UploadInput() {
  return <input type="file" onChange={handleUpload} />;
}
フィールドにてファイルを選択した時点で、アップロード処理が動きます。

Fileをbase64形式のstringに変換したうえで、サーバアクションに送信します。

実行後にサーバでFile uploaded successfullyのログが出たら、アップロード成功です。

 ファイルを取得する
 サーバアクションaction.ts
"use server";
import { GetObjectCommand, S3Client } from "@aws-sdk/client-s3";
import { Readable } from "stream";

const s3Client = new S3Client({
  region: process.env.AWS_REGION,
  credentials: {
    accessKeyId: process.env.IAM_ACCESS_KEY!,
    secretAccessKey: process.env.IAM_SECRET_ACCESS_KEY!,
  },
});

export async function getFile(): Promise<Buffer> {
  try {
    const command = new GetObjectCommand({
      Bucket: process.env.S3_BUCKET_NAME,
      Key: "test.txt",
    });
    const response = await s3Client.send(command);

    const stream = response.Body as Readable;
    const chunks: Buffer[] = [];

    return new Promise((resolve, reject) => {
      stream.on("data", (chunk) => {
        chunks.push(chunk);
      });
      stream.on("end", () => {
        const buffer = Buffer.concat(chunks);
        resolve(buffer);
      });
      stream.on("error", (error) => {
        reject(`An error occurred: ${error.message}`);
      });
    });
  } catch (error) {
    console.error("Error getting file:", error);
    throw error;
  }
}
アップロードと同じようにKeyへのパスを指定してS3コマンドを実行しますが、今回はtest.txtで固定としています。

S3からのレスポンスをReadableに型変換し、すべてのチャンクを結合してからBufferとしてクライアントに返却します。

 コンポーネントGetButton.tsx
"use client";
import { getFile } from "./action";

async function handleGetButton() {
  const buffer = Buffer.from(await getFile());
  const fileContent = buffer.toString("utf-8");
  const blob = new Blob([fileContent], {
    type: "text/plain",
  });

  const url = window.URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "test.txt";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  window.URL.revokeObjectURL(url);
}

export default function GetFileButton() {
  return <button onClick={handleGetButton}>ファイル取得</button>;
}
ボタンが押下されると、イベントハンドラからサーバアクションを実行します。

今回はUTF-8への文字コード変換後、Blobを作成して自動でダウンロードさせています。

 テキストファイル以外を取得する場合例としてtest.pngの変換処理のうち、test.txtと変更がある箇所のみ記載します。
サーバアクションでは、S3バケットのファイルパス（Key）を変更します。
action.ts
    const command = new GetObjectCommand({
      Bucket: process.env.S3_BUCKET_NAME,
      Key: "test.png",
    });
コンポーネントでは、MIMEタイプとダウンロードファイル名を変更します。

また、文字コード変換処理は削除します。
GetButton.tsx
  const buffer = Buffer.from(await getFile());
  const blob = new Blob([new Uint8Array(buffer)], {
    type: "image/png",
  });
  // ...中略...
  a.download = "test.png";

 ファイルを削除する
 サーバアクションaction.ts
"use server";
import { DeleteObjectCommand, S3Client } from "@aws-sdk/client-s3";

const s3Client = new S3Client({
  region: process.env.AWS_REGION!,
  credentials: {
    accessKeyId: process.env.IAM_ACCESS_KEY!,
    secretAccessKey: process.env.IAM_SECRET_ACCESS_KEY!,
  },
});

export async function deleteFile() {
  try {
    const command = new DeleteObjectCommand({
      Bucket: process.env.S3_BUCKET_NAME!,
      Key: "test.txt",
    });
    const response = await s3Client.send(command);
    console.log("File deleted successfully");
    return response;
  } catch (error) {
    console.error("Error deleting file:", error);
    throw error;
  }
}
こちらもKeyはtest.txtで固定としています。

 コンポーネントDeleteButton.tsx
"use client";
import { deleteFile } from "./action";

async function handleDelete () {
  await deleteFile();
};

export default function DeleteButton() {
  return <button onClick={handleDelete}>ファイル削除</button>;
}
ボタンが押下されると、イベントハンドラからサーバアクションを実行します。

実行後にサーバでFile deleted successfullyのログが出たら、削除成功です。

NCDCエンジニアブログ

NCDC株式会社( ncdc.co.jp/ )のエンジニアチームです。募集中のエンジニアのポジションや、採用している技術スタックの紹介などはこちら( github.com/ncdcdev/recruitment )をご覧ください！ ※エンジニア以外も記事を投稿することがあります

前提

事前準備

S3

バケット作成

IAM

ポリシー作成

ユーザー作成

アクセスキー発行

Next.js

環境変数設定

SDKライブラリ追加

ファイルをアップロードする

サーバアクション

コンポーネント

ファイルを取得する

サーバアクション

コンポーネント

テキストファイル以外を取得する場合

ファイルを削除する

サーバアクション

コンポーネント

Discussion