React.js 네이버 클라우드 외부 저장소에 파일 저장하기

https://www.ncloud.com/

NAVER CLOUD PLATFORM

일단 공부하는 용도로는 비용이 얼마 발생 안 할 것 같습니다. 

그리고 결제 방법을 등록하면 

1000 크레딧도 공짜로 신청하는 방법도 있다고 합니다. 

 

이용 신청하기 버튼을 클릭해서 

콘솔 창으로 이동을 해줍니다. 

https://guide.ncloud-docs.com/docs/ko/storage-storage-6-1

Object Storage 개요

사용자 가이드를 잘 확인해야 합니다. 

https://guide.ncloud-docs.com/docs/storage-storage-8-4

Javascript용 AWS SDK

npm install --save aws-sdk@2.348.0

가이드에는 위의 sdk를 설치하라고 나온다

나는 아래 최신 버전을 설치 해서 해줬다. 

npm install @aws-sdk/client-s3

server >  Util > upload.js

const AWS = require('aws-sdk');

const endpoint = new AWS.Endpoint('https://kr.object.ncloudstorage.com');
const region = 'kr-standard';
const access_key = 'ACCESS_KEY';
const secret_key = 'SECRET_KEY';

const S3 = new AWS.S3({
    endpoint: endpoint,
    region: region,
    credentials: {
        accessKeyId : access_key,
        secretAccessKey: secret_key
    }
});

const access_key = 'ACCESS_KEY';
const secret_key = 'SECRET_KEY';

이 두 개를 네이버클라우드에서 받아와야 한다. 

마이페이지 > 인증키 관리

s3 를 사용 하니 여기에 맞는 multer를 사용해야 한다 

https://www.npmjs.com/package/multer-s3

multer-s3

npm i multer-s3

npm install multer-s3@latest

사용법

const { S3Client } = require('@aws-sdk/client-s3')
const express = require('express')
const multer = require('multer')
const multerS3 = require('multer-s3')

const app = express()

const s3 = new S3Client()

const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: 'some-bucket',
    metadata: function (req, file, cb) {
      cb(null, {fieldName: file.fieldname});
    },
    key: function (req, file, cb) {
      cb(null, Date.now().toString())
    }
  })
})

app.post('/upload', upload.array('photos', 3), function(req, res, next) {
  res.send('Successfully uploaded ' + req.files.length + ' files!')
})

잘 사용 하면 된다 .

코드를 보면 

const S3 변수에는 이와 같은 내용을 담으면 된다. 

const endpoint = 'https://kr.object.ncloudstorage.com';
const region = 'kr-standard';
const access_key = 'ZVuW8vFDcMkWhOLkzEcA';
const secret_key = '2FIJHBMuJQYDVhtHfXJ5sUVNfDISRIce1VzwY4EL';


const S3 = new S3Client({
    endpoint: endpoint,
    region: region,
    credentials: {
        accessKeyId: access_key,
        secretAccessKey: secret_key
    }
});

네이버클라우드에 접속할 때 꼭 필요한 값들을 담는다. 

function setUpload(Bucket) {

    const upload = multer({
        storage: multerS3({
            s3: S3,
            bucket: Bucket,
            acl: "public-read-write",
            key: function (req, file, cb) {
                let extension = path.extname(file.originalname);
                cb(null, "post/" + Date.now().toString() + extension);
            },
        }),
    }).single("file");
    //single("file"); 매우 중요 ! 
    return upload;
}

const upload 는 함수로 담으면 되는데 이는 server 단에서 미들웨어로 사용하기 위함이다. 

bucket 은 네이버 클라우드에 생성될 버킷 명을 String 값으로 정해주면 되고 

acl 은 해당 권한 여부 

cb 인자로는 저장될 경로 및 파일 명을 등록 해주면 된다. 

.single("file") -> 파일 하나만 업로드 한다는 코드 이다 . 

해당 코드를 적어줘야 에러가 안 난다. 

const { S3Client } = require('@aws-sdk/client-s3')
const multer = require('multer')
const multerS3 = require('multer-s3')
const path = require('path');

const endpoint = 'https://kr.object.ncloudstorage.com';
const region = 'kr-standard';
const access_key = 'ZVuW8vFDcMkWhOLkzEcA';
const secret_key = '2FIJHBMuJQYDVhtHfXJ5sUVNfDISRIce1VzwY4EL';


const S3 = new S3Client({
    endpoint: endpoint,
    region: region,
    credentials: {
        accessKeyId: access_key,
        secretAccessKey: secret_key
    }
});


function setUpload(Bucket) {

    const upload = multer({
        storage: multerS3({
            s3: S3,
            bucket: Bucket,
            acl: "public-read-write",
            key: function (req, file, cb) {
                let extension = path.extname(file.originalname);
                cb(null, "post/" + Date.now().toString() + extension);
            },
        }),
    }).single("file");
    //single("file"); 매우 중요 ! 
    return upload;
}

module.exports = setUpload;

server > Route > post.js

const setUpload = require("../Util/upload.js");

router.post(
  "/image/upload",
  setUpload("centum-community"),
  (req, res, next) => {

    res.status(200).json({ success: true, filePath: res.req.file.path });

  });

 이와 같이 

미들웨어 함수로 작동하게 하여 

setUpload() 함수에 버킷 명을 인자로 주어 해당 버킷으로 파일이 올라가도록 작동한다.