Next.js × Docker MinIO|S3互換ストレージにファイルを保存する手順

Next.js × Docker MinIO|S3互換ストレージにファイルを保存する手順 開発ツール(Dev Tools)
Next.js × Docker MinIO|S3互換ストレージにファイルを保存する手順
この記事は約7分で読めます。
てんハロ運営者
てんハロ運営者

どもども
今回は「MinIOの導入」について解説します。

バグヲ
バグヲ

読み方はミニオ…? なにそれ怖い…

てんハロ運営者
てんハロ運営者

こんなあなたにピッタリな記事👇

  • ローカルでS3っぽい環境を作りたい
  • Docker上にストレージを立てたい
  • Next.jsやNode.jsからファイルを保存したい

がまぁまぁわかります!

未経験からエンジニア転職を目指すなら
👉 テックゲート転職 をチェック!

この記事の目的

Next.jsなどのアプリから、ローカルのMinIOにファイルを保存・取得したい人向けに、
Docker環境へのMinIO導入と、接続手順を紹介します。
(AWSは使いません!)

MinIOとは?

MinIO(ミニオ)は、Amazon S3と互換性のあるオブジェクトストレージです。
S3と同じAPIを使えるため、@aws-sdk/client-s3 を使って接続できます。

📦 MinIOの特徴

  • 軽量で高速なオブジェクトストレージ
  • Dockerで簡単に立ち上げられる
  • 完全ローカルで完結する(S3の代替に便利)

実装方法

ステップ1:MinIOをDockerで立ち上げる

まず、docker-compose.yml に以下を追加します。

services:
  minio:
    image: minio/minio
    container_name: minio
    ports:
      - "9000:9000"  // APIアクセス用(アプリ・SDKから)
      - "9001:9001"  // 管理画面(GUI)
    environment:
      MINIO_ROOT_USER: your_username       // 開発用ユーザー名
      MINIO_ROOT_PASSWORD: your_password   // 開発用パスワード
    command: server /data --console-address ":9001"
    volumes: // データ永続化の設定
      - minio_data:/data

volumes: // データ永続化の設定
  minio_data:

🐳 docker minio volume とは?

MinIOにアップロードしたファイルを、コンテナを削除・再起動しても消えないように保存するための方法です。

通常、Dockerコンテナだけに保存したデータは、コンテナが停止・削除されると一緒に消えてしまいます。それを防ぐために、Dockerでは volumes を使って、データをPCの中(ホスト側)に残す仕組みが用意されています。

MinIOは /data にファイルを保存するため、上記( // データ永続化の設定)のように設定しておけば、ファイルは消えません。

ステップ2:MinIOにログイン&バケット作成

ブラウザで http://localhost:9001 にアクセス
先ほど設定したユーザー名/パスワードでログイン

Next.js × Docker MinIO|S3互換ストレージにファイルを保存する手順

ボタンをクリックでOKです。
これによりライセンス画面が閉じて、通常のMinIO管理画面(バケット作成など)に進めます。これはローカル環境で使う分には問題ありません

Next.js × Docker MinIO|S3互換ストレージにファイルを保存する手順

+create Bucket を押し、「uploads」など任意のバケットを作成

Next.js × Docker MinIO|S3互換ストレージにファイルを保存する手順

バケットを作成完了

Next.js × Docker MinIO|S3互換ストレージにファイルを保存する手順

ステップ3:SDKをインストール

MinIOはS3互換なので、以下をインストールします。

npm install @aws-sdk/client-s3

ステップ4:ファイルアップロードの実装

src/lib/minio.ts を作成して、接続設定を実装

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

const s3Client = new S3Client({
  region: "us-east-1", // MinIOでは使われないが、SDKの必須項目のため任意の値を指定(省略不可)
  endpoint: "http://localhost:9000",
  credentials: {
    accessKeyId: "your_username",     // 開発用ユーザー名
    secretAccessKey: "your_password", // 開発用パスワード
  },
  forcePathStyle: true, // バケット名をパスで扱うようにするためtrue
});

export async function uploadToMinio(file: File) {
  const arrayBuffer = await file.arrayBuffer(); // ファイルの生データを取得

  const command = new PutObjectCommand({
    Bucket: "uploads",       // GUIで作成したバケット名
    Key: file.name,          // 保存時の名前
    Body: arrayBuffer,       // アップロードするデータの中身
    ContentType: file.type,  // ファイルの種類(MIME)
  });

  await s3Client.send(command);
}

ステップ5:動作確認

Next.jsやNode.jsの処理の中で uploadToMinio(file) を呼び出せば、
ローカルのMinIOにファイルが保存されます。

Next.js × Docker MinIO|S3互換ストレージにファイルを保存する手順

Dockerもっと勉強したい!と思われた方は、こちらの記事もおすすめです。

てんハロ運営者
てんハロ運営者

おつかれさまでした!

更新をF5連打で待つの、そろそろやめませんか?
( ブログ更新をメールでそっとお知らせします🙇‍♂️ )

スパムはしません!詳細については、プライバシーポリシーをご覧ください。

コメント