Minio에 파일 업로드하기(with aws-sdk)

 

MinIO | High Performance, Kubernetes Native Object Storage

0. 들어가기 전

Minio는 AWS S3와 호완되는 Object Storage인데 회사에서는 AWS S3 등의 스토리지를 사용했겠지만 개인 프로젝트의 경우에는 비용을 고려해야하기에 진행하고 있는 프로젝트에선 Minio를 채택하여 파일 서버로 구성하였다.

 

다른 파일 서버도 존재하지만 Minio를 선택한 이유는 총 3가지가 존재한다.

1. Docker를 기반으로 쉬운 설치
2. Dashboard를 제공하여 간편한 운영
3. aws-sdk와의 호완성

 

오늘은 aws-sdk를 이용하여 minio에 파일을 업로드하는 부분을 정리하고자 한다.

 

오늘 예제에서 사용하는 것들은 아래와 같다.

React, Vite, Typescript, aws-sdk

 

 

1. React 셋팅

먼저 아래 cli로 vite를 기반으로 React 프로젝트를 생성한다.

npm create vite@latest

 

나는 React + Typescript + SWC 조합으로 생성했지만, React면 크게 상관 없다.

 

그리고 vite로 생성하면 node_modules를 별도로 설치해야한다.

yarn

 

 

 

모듈을 설치한 후에 아래 명령어로 실행한다.

 

yarn dev

 

 

 

그리고 vite의 경우에만 global 설정을 해줘야 에러가 안 나서 vite.config.ts에 설정을 추가해준다.

// ** vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: {},
  },
});

 

 

2. Minio Upload

 

먼저 aws-sdk를 설치한다.

yarn add aws-sdk

 

그리고 루트 디렉토리에 .env 환경 변수를 생성해서 MINIO 업로드에 필요한 값을 추가한다.

# .env
VITE_MINIO_ACCESS_KEY=
VITE_MINIO_SECRET_KEY=
VITE_MINIO_ENDPOINT=
VITE_MINIO_BUCKET_NAME=

 

각 값은 MINIO로부터 발급 받은 accessKey, secretKey와 bucket 이름과 minio의 ip를 입력하면 된다.

 

그리고 App.tsx에 이렇게 작성한다.

 

// ** React Imports
import { ChangeEvent } from "react";

// ** Aws Imports
import AWS from "aws-sdk";

function App() {
  // ** Input Handler
  const handleImageChange = async (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];

    if (file) {
      // ** S3 객체
      const s3 = new AWS.S3({
        accessKeyId: import.meta.env.VITE_MINIO_ACCESS_KEY,
        secretAccessKey: import.meta.env.VITE_MINIO_SECRET_KEY,
        endpoint: import.meta.env.VITE_MINIO_ENDPOINT,
        s3ForcePathStyle: true,
        signatureVersion: "v4",
      });

      const params = {
        Bucket: import.meta.env.VITE_MINIO_BUCKET_NAME,
        Key: file.name,
        Body: file,
      };

      s3.upload(params, (err: any, data: any) => {
        if (err) {
          console.error(err);

          return;
        }

        console.log(data.Location);
      });
    }
  };

  return <input type="file" accept="image/*" onChange={handleImageChange} />;
}

export default App;

 

이렇게 생성하고 업로드를 하면 대시보드로 갔을 때 잘 업로드된 것을 볼 수 있다.