React : 이미지 외부저장소에 업로드하기 - 네이버 클라우드

이미지를 서버쪽에 저장을하게될 때 만약 다른 환경에 배포해주어야 할 때 아래와 같은 이미지 경로는 배포환경에 맞게 변경을 해줘야한다.

또한 커뮤니티를 운영할 때의 이미지 저장은 여러 이용자들이 여러 이미지를 저장할 텐데 서버쪽의 이미지 폴더를 만들어서 저장하게 되면 서버에 부담이가게 되고 비용도 많이 들게 된다.

 

그래서 대부분의 서비스들은 외부저장소에 이미지를 저장한다.

 

이미지를 외부저장소에 저장하는 방법을 알아보자

 

우리는 네이버 클라우드를 이용해 볼 것이다.

 

네이버 클라우드는 결제를해야 이용할 수 있다!

-위 이미지에 표시한 곳을 눌러서 사용하면 되는데 나는 결제를 하지 않았으므로 사용방식만 알아보자

 

 

 

네이버 클라우드 사용가이드

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

Javascript용 AWS SDK

위 사용가이드를 따라서 사용하면된다.

 

 

1. AWS s3설치

npm install --save aws-sdk@2.348.0

2. 파일 업로드

-우리가 사용할 것은 이미지 업로드이므로 이 부분을 가져와서 따라한다.

3. 네이버 API 인증키 발급

- 아래 이미지에서 보이듯이 현재 마이페이지에서 인증키 발급받는게 변경되었다고한다

4.우리는 이전에 multer을 이용해 이미지를 서버에 저장했는데 multer도 s3용 이미지 업로드가 있다.

-이를 사용해서 이미지를 네이버클라우드에 업로드 해줄 수 있다.

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

multer-s3

5.이제 작성했던 코드에 직접 추가해보자

6.server에 util 폴더와 upload.js 파일 생성

7. upload.js에 파일 업로드 코드 추가-(파일 업로드 코드에서 윗 부분만 가져왔다.

-access_key와 secret_key는 인증키를 발급받아서 적으면된다.(유출 주의!)

const AWS = require('aws-sdk');
const fs = require('fs');
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
    }
});

8. multer 설치

npm install --save multer-s3

9.multer 코드 upload.js에 추가

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())
    }
  })
})

 

-buket : 네이버클라이드의 버킷의 경로를 지정해주면 된다.

-metadata : 지금 현재 필요없는 부분이라 지워도된다.

-key :이전 multer에서 사용했던 파일 이름을 고유하게 바꿔주는 부분이다.

바꿀 부분

        -버킷의 경로를 인자로 받아올 것이기 때문에 setUpload라는 함수로 감싸준다.

        -path로 파일 이름을 가져와서 아래와 같이 고유한 키를 만들어준다.

       - acl을 모든 사용자가 읽고 쓸 수 있도록 바꿔준다.

 

 

    -파일을 하나만 저장할 것이기 때문에 아래와 같은 코드도 붙여줘야한다.

10. 마지막 upload.js를 모듈로서 사용하기위해 export 해준다

11. 이전에 사용했던 /image/upload API를 수정해준다.

 - 우리는 이미지를 저장하기 위해 Express의 미들웨어를 사용할 것이다

   -미들웨어는 요청과 응답 중간에 함수를 실행하는 것을 의미한다.

    -위에서 만든 upload.js의 모듈에 있는 setUpload함수를 수행한다.

    -setUpload 인자에는 네이버클라우드 버킷에 어떤 이름의 버킷에 어떤 폴더에 저장할 건지 경로를 적어준다.

     -버킷과 폴더는 네이버클라우드에서 수동으로 직접 생성해줘야한다.

12. 그럼 이제 이미지를 클라이언트에서 업로드하게 되면 네이버 클라우드에 잘 저장된다.

13. 서버에서 파일의 경로는 아래와같이 location이라는 이름으로 보내주게된다.

   -DB에는 아래와 같은 경로가 저장되는 것이다.

14. 클라이언트의 게시글 상세페이지에서 내가 올린 이미지를 보려면 넣을 값을 바꿔준다.(이전에 local~ 어쩌구 지워주기)

 

 

 

이러한 네이버 클라우드를 사용하거나 몽고DB를 사용할 때 코드에 인증키라던지 아이디와 비밀번호라던지 보안에 중요한 부분들이 노출되어있다.

 

이를 감추기위해 ENV 환경변수를 사용해야한다.

 

ENV환경변수는 다음 포스팅에 알아보자!