DogKaeBi

[Next.js] 구글 드라이브를 Storage로 사용하기

파일을 저장하는 저장소를 고려하다가 구글 드라이브를 사용하는 방법을 모색해봤다

[Next.js] 구글 드라이브를 Storage로 사용하기

서론

Database는 고민할수록 어려운 것 같다.

이상적인 구조는
24시간 켜져있는 컴퓨터가
서버와 DB를 담당하는 것 같다.

AWS 같은 클라우드 컴퓨팅을 사용하는 것이 정석이겠지만...
테스트로 만들어보는 사이트에 비용을 어디까지 투자할지 애매한 것 같다.


데이터 형태는
정보를 저장하는 DB와 (Database)
파일을 저장하는 DB가 (Storage) 필요하다.

예시로
Blog 정보 데이터는 일기의 제목, 작성일, MD파일의 주소 등이 있고..
Blog 파일은 markdown 파일이다.

'구글 드라이브를 storage로 사용할 수 없을까?'라는 생각이 들었다.



구글 드라이브

구글 드라이브에 파일을 요청하는 법은 간단하다.

  • 파일에 접근하는 주소와
  • 공유한 파일의 해시번호

를 사용하면된다.


접근 주소

파일에 접근하는 주소는 고정이다.

const driveUrl = "https://drive.google.com/uc?id=";

파일 ID

파일 id는
공유한 파일만 사용이 가능하다.
파일을 공유하면 공유 링크를 확인할 수 있다.

이미지 파일은 아래같은 형식이다.

https://drive.google.com/file/d/file-id/view?usp=drive_link

만약 편집이 가능한 문자 파일의 경우

https://docs.google.com/document/d/file-id/edit?usp=drive_link&ouid=...&rtpof=...&sd=...

같은 형식이다.

중간 /d/ 다음에 위치한 path부분이 해당 ID이다.
위에 예시에서는 file-id으로 대체했다


예시 테스트

강아지 사진을

// 페이지에서 사용

const driveUrl = "https://drive.google.com/uc?id=";
const fileId = "1hm2QhpQzavfKF4tgpFarFgeovfRtOhNw";

return <Image width={500} height={500} src={driveUrl + fileId} alt="테스트" />;
Markdown에서 사용

![테스트](https://drive.google.com/uc?id=1hm2QhpQzavfKF4tgpFarFgeovfRtOhNw)

아래처럼 이미지가 사용된다.

테스트



결론

꼼수에 가까운 방법 같다.

원래 사용하던 구글 드라이브를 사용하고
추가 비용이 들지 않는다는 장점이 있지만..
세팅을 잘 못하거나
편집 링크를 잘 못 사용하면
보안 리스크도 큰 것 같다.

개인적으로는
Firebase의 Cloud Storage보다
사용 방식은 쉽고,
사용 비용도 적다고 생각한다.
(투자 비용 및 시간)