nCloud Object Storage 사용기
2021년 11월 16일 오후 2시 30분
김서진과 김나정은 네이버 클라우드 플랫폼(NCP)의 Object Storage를 이용하여 파일 업로드를 구현하려고 했다.
왜안되지와 얜왜되지를 반복하다가 끝내 성공!! 개발 과정을 기록으로 남기기로 했다.
이 글의 목적은? 네이버 클라우드 플랫폼 많이 사용해주세요~~하하하
우리의 첫번째 목표는 그룹을 생성할 때 그룹 썸네일 업로드하기!
프론트에서 input에 onChange 이벤트를 걸어서 사진을 업로드하려고 했다.
우리가 이용한 서비스는 NCP의 Object Storage이다.
Amazon S3와 호환성을 제공한다니 쉽게 사용할거라 믿었다! 이때는..
nCloud의 친절한 Object Storage 사용 가이드를 발견! 가이드를 따라서 버킷을 생성했다
하라는 대로 버킷을 생성했다!
우리는 자바스크립트에서 사용할 예정이므로 Javascript SDK를 참고하여 코드를 작성했다.
버킷 생성은 이미 진행했으므로 오브젝트 업로드 부분만 코드로 작성했다.
그리고 네이버 클라우드에서 API Key를 발급받았다.
마이페이지 - 계정 관리 - 인증키 관리에서 발급받을 수 있다.
Key ID는 열심히 가렸다!ㅎㅎ
그리고 .env에 ACCESS_KEY와 SECRET_KEY를 추가해줬다. 이제 되겠지?
파일 업로드를 시도해봤다! 어? 안된다.. 오류는 아래와 같았다.
Access to XMLHttpRequest at 'https://duxcord.kr.object.ncloudstorage.com/1_1.png' from origin 'http://localhost:3000'
has been blocked by CORS policy: Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
CORS 오류가 뜨는 것이었다ㅠ
열심히 검색을 한 결과! 버킷에 origin을 허용해줘야 한다고 한다.
AWS에는 권한을 직접 입력하여 문제를 해결할 수 있었다.
하지만 NCP는 postman으로 origin 허용 요청을 보내야 하는 것이었다.ㅜㅠ
NCP는 해당 오류를 해결하는 문서도 제공하고 있었다! 감사합니다~~
PutBucketCORS 문서를 따라서 작업하면 CORS 설정을 할 수 있다고 한다.
예시에 따라 HTTP 헤더와 BODY를 적어서 https://{endpoint}/{bucket-name}?cors= 으로 PUT 요청을 보냈다.
endpoint에는 kr.object.ncloudstorage.com, bucket-name에는 버킷 이름을 입력했다.
계속 요청이 거절됐다. 검색을 열심히 해봤다.
그러다 부스트캠프 1년 선배님들의 Object Storage를 활용한 글을 발견!
헤더의 Authorization에 Signature Key를 넣어줘야 한다고 한다.
AWS signature v4 생성 방법 게시글을 참고하여 서명 키를 생성해보았다.
아래 코드는 JavaScript(Node.js)에서 crypto-js 라이브러리를 사용하여 서명 키를 생성하는 방법이다.
var crypto = require("crypto-js");
function getSignatureKey(key, dateStamp, regionName, serviceName) {
var kDate = crypto.HmacSHA256(dateStamp, "AWS4" + key);
var kRegion = crypto.HmacSHA256(regionName, kDate);
var kService = crypto.HmacSHA256(serviceName, kRegion);
var kSigning = crypto.HmacSHA256("aws4_request", kService);
return kSigning;
}
getSignatureKey 함수로 서명 키를 만들어서 헤더의 Auth에 넣어보았다.
여전히 안된다!! 하.. 여기서 작업을 포기하고 아래의 선택지 중 하나로 가려고 했다.
(여기서 안 된 이유는 서명 키를 이상하게 만들어서였다!!)
-
AWS S3로 갈아타기 (S3 스토리지에 업로드는 성공했다)
-
백에서 파일 업로드하기 (다른 팀들은 백에서 업로드를 해서 참고할 수 있을거라 생각했다)
네이버 교육이니 NCP를 써보기로 해서 1번은 탈락
2번으로 가려던 와중 <갓찬희님>의 등장!!!
postman으로 AWS Signature를 생성하는 방법을 알게 되었다.
Postman으로 AWS Signature 생성하는 방법 글을 참고하여 AWS Signature를 생성했다.
여기에 NCP의 AccessKey, SecretKey를 넣고 AWS Region에는 kr-standard, Service Name에는 s3를 넣었다.
그러니 이렇게 헤더에 필요한 정보들이 포함된다! 오호~ 이제 되나 했는데!!
따흑... 안된다 ㅠㅠㅠ 마지막 관문이다...
Content-MD5에 대체 어떤 값을 넣어줘야 하는지 모르겠었다...
다시 한 번 <빛찬희님>의 도움!!! Postman에서 AWS S3를 검색해서 레퍼런스를 찾을 수 있었다
Postman에 AWS S3를 검색하면 많은 글이 나오는데 Collections에 API Evangelist가 적혀있는 글로 들어간다.
여기서 AWS S3/Buckets/CORS/PUT CORS에 들어가서 해당 자료를 fork한다.
그리고 우리가 처음에 넣었던 값들을 넣어준다.
Content-MD5는 알아서 넣어준다 허허 신기하구려~
BODY에는 XML로 아래와 같이 적어준다.
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>http://localhost:3000</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
해당하는 origin에 PUT과 POST 요청을 허용해주고 모든 origin에 GET 요청을 허용해준다.
DELETE 요청은 필요하지 않으므로 허용하지 않았다.
추가로 허용하고 싶은 origin이 있으면 CORSRule을 추가해서 요청을 보내면 된다.
여러번 보내는게 아니라 CORSRule을 필요한만큼 넣어서 보내야한다!
CORS 설정이 완료되니 업로드가 가능하다 ㅎㅎ
나머지 로직을 짜고 사진을 업로드해봤다.
짜란! 올라온다!!! 히히히
그룹 목록에서도 그룹 썸네일이 잘 보인다.
7시에 이미지 업로드 성공!!! 빠샤!!!
이미지 업로드가 쉬울줄 알았는데 생각보다 오래걸렸다...
참고할 자료가 많지 않아서 많은 구간에서 막혔다.
그래서 우리와 같은 문제를 겪는 사람들이 검색을 통해 이 글을 발견해서 잘 해결하면 좋겠다 ㅎㅎㅎ
작성자의 멘탈을 잡아준 김서진 캠퍼님
이번 문제에 해답을 선사해준 김찬희 캠퍼님
응원의 메시지를 보내준 신효근 캠퍼님
그리고 참고자료를 만들어주신 개발자 선생님들
모두 감사합니다!!!!!
네이버 클라우드 플랫폼 - Object Storage 개요 : https://guide.ncloud-docs.com/docs/storage-storage-6-1
네이버 클라우드 플랫폼 - Javascript SDK : https://guide.ncloud-docs.com/docs/storage-storage-8-4
boostcamp-2020/Project13-Web-Video-Editor의 Object Storage 글 : https://github.com/boostcamp-2020/Project13-Web-Video-Editor/wiki/Object-Storage
네이버 클라우드 플랫폼 - PutBucketCORS : https://api.ncloud-docs.com/docs/storage-objectstorage-putbucketcors
AWS 참조 안내서 - 서명 키 생성 방법 : https://docs.aws.amazon.com/ko_kr/general/latest/gr/signature-v4-examples.html#signature-v4-examples-javascript
Postman으로 AWS Signature 생성하기 : https://blog.knoldus.com/how-to-generate-aws-signature-with-postman/