디지털 오션에 이미지 업로드하기

B Y·2023년 3월 12일

React client digital ocean wordpress

요약

디지털 오션에 이미지를 업로드 하려면

access key, secret key 발급
CORS 설정
S3Client를 활용해 업로드

디지털 오션이란?

cafe24같은 해외 웹호스팅 업체입니다. AWS S3같은 Storage 서비스도 제공합니다.
디지털 오션 공식 홈페이지

Key 발급

디지털 오션 관리자 페이지에서 Key를 발급받습니다.

CORS 설정

Origin, Methods, Headers를 적절히 설정해 줍니다.
CORS가 궁금하다면?

S3Client를 활용해 업로드

sdk설치

npm install @aws-sdk/client-s3

client 생성

const region = 'sgp1';
const config = {
  endpoint: 'https://sgp1.digitaloceanspaces.com',
  forcePathStyle: false,
  region,
  credentials: {
    accessKeyId: 'ACCESS_KEY_ID',
    secretAccessKey: 'SECRET_ACCESS_KEY',
  },
};
const s3Client = new S3Client(config);

이미지 업로드

async function handleUpload(file: any) {
  const key = `${Date.now()}.${file.name}`;

  const params = {
    Bucket: 'vendor-apmmust',
    Key: key, // 이미지의 id와 같은 역할입니다
    Body: file,
    ACL: 'public-read',
  };
  try {
    const data = await s3Client.send(new PutObjectCommand(params));
    ...
  } catch (err) {
    throw new Error('이미지 업로드 실패');
  }
}