진행중인 프로젝트에서 사진을 처리할 일이 생겼다. S3, Cloudinary 등 이미지를 처리할 수 있는 다양한 클라우드 스토리지 서비스가 있다. 예전에 AWS를 사용하면서 사용하지 않은 부분에 대해 과금한 적이 있어서 이번에는 Google Cloud Storage를 써보려고 한다.

프론트에서 사진을 업로드하면 Google Cloud Storage에 업로드 하고, 해당 사진에 접근할 수 있는 고유 주소를 반환해준다.

패키지 설치

• @google-cloud/storage
  • Google Cloud Storage에 이미지를 업로드하기 위해 필요
• @types/multer
  • multer 라이브러리를 이용해 서버에 저장
• uuid
  • 이미지 고유 이름 부여

Google Cloud Storage 설정

1. 구글 클라우드 콘솔에 접속후 프로젝트 생성

2. Cloud Storage 메뉴 에 접속

3. 버킷 생성

4. 버킷 > 권한 에서 공개 액세스 방지를 삭제 후 액세스 권한 부여 클릭

   4-1. 새 주 구성원 allUsers, 역할 선택 저장소 개체 뷰어 입력 후 저장 (공개 액세스 방지를 삭제하지 않으면 allUsers를 추가할 수 없다.)

5. IAM 및 관리자 > 서비스 계정 에서 서비스 계정 만들기 클릭

   5-1. 역할 선택 저장소 개체 생성자 선택 후 완료

6. 해당 서비스 계정에서 작업 > 키관리

   6-1. 아무 키가 없을텐데 키 추가 > 새 키 만들기에서 키 유형을 JSON으로 생성한다.

   6-2. 키를 생성하면 ~~~.json 파일이 다운받아질텐데 잘 가지고 있는다.

Project 설정

1. 방금 발급받은 ~~~.json 파일을 프로젝트 폴더에 추가

2. .env에 GOOGLE_APPLICATION_CREDENTIALS=[발급받은 .json파일의 경로] 추가

3. next.config.js 에 아래 코드 추가

const nextConfig = {
  // ...
  serverRuntimeConfig: {
    googleApplicationCredentials: process.env.GOOGLE_APPLICATION_CREDENTIALS,
  },
  // ...
};

사용 방법

업로드 된 파일을 메모리에 임시로 저장한다.

const multerStorage = multer.memoryStorage();

FormDate의 이름이 'file' 인 것 들을 업로드한다.

const multipleUpload = multer({ storage: multerStorage }).array('file');

Google Cloud Storage에 업로드

const storage = new Storage();
const filename = `{uuid등을 활용해서 고유 filename을 생성}`;
const bucket = storage.bucket(bucketName); // bucketName은 Google Storage Cloud에서 버킷 만들때 사용한 이름을 사용한다.
const blob = bucket.file(filename);
const stream = blob.createWriteStream({
  metadata: {
    contentType: file.mimetype,
  },
});

주의사항

• 파일 이름이 겹치면 Google Cloud Storage에 업로드 되지 않으니 uuid를 활용해서 항상 다른 파일 이름을 쓸 수 있도록 해야한다.

• 파일 이름에 특수문자등의 문자가 들어가면 Google Cloud Storage에서 데이터를 확인할 때 오류가 생길 수 있다. 웬만하면 숫자와 영어를 활용해서 파일 이름을 만들도록 하자