본문 바로가기

GCP 버킷에 이미지 올리는 방법 본문

개발/nest.js

GCP 버킷에 이미지 올리는 방법

자전하는명왕성 2024. 4. 26. 12:12

GCP 버킷을 세팅하는 방법은 구글에 많이 나와 있으니,  Nest.js 환경에서 GCP storage keyFile 을 활용하여 파일을 업로드 하는 방법을 다룬다.

필요한 라이브러리

yarn add multer @nestjs/platform-express @google-cloud/storage
yarn add -D @types/multer

multer // 파일 업로드 처리 미들웨어 라이브러리
@nestjs/platform-express // nest.js 환경에서 express의 모든 기능을 사용하게 해주는 라이브러리

 

소스 코드 길이가 짧지 않으므로, 필요한 설명은 주석으로 대체한다.

 

// file.controller.ts

import {
  Controller,
  Post,
  UploadedFiles,
  UseInterceptors,
} from '@nestjs/common';
import { FilesInterceptor } from '@nestjs/platform-express';
import { ApiTags } from '@nestjs/swagger';
import { FileService } from './file.service';

@Controller('file')
@ApiTags('file')
export class FileController {
  constructor(private readonly fileService: FileService) {}

  @Post('upload')
  // multer 미들웨어에서 사용하는 인터셉터 (최대 10개까지 업로드 가능)
  @UseInterceptors(FilesInterceptor('files', 10)) 
  uploadFiles(@UploadedFiles() files: Array<Express.Multer.File>) {
    return this.fileService.uploadFiles(files);
  }
}

 

 

// file.service.ts

import { Storage } from '@google-cloud/storage';
import { Injectable } from '@nestjs/common';

@Injectable()
export class FileService {
  async uploadFiles(files: Array<Express.Multer.File>) {
    // GCP 에서의 storage 정의
    const storage = new Storage({
      projectId: process.env.GCP_STORAGE_ID, // gcp.json 파일에서의 projectId
      keyFilename: process.env.GCP_STORAGE_KEYFILE, // gcp.json의 파일 이름
    }).bucket(process.env.GCP_STORAGE_BUCKET); // gcp 환경에서 설정한 버킷 이름

    // 다수 파일 업로드는 아래 로직을 따른다.
    const uploadPromises = files.map(async (file) => {
      const gcsFile = storage.file(file.originalname); // 파일 객체 생성
      
      // 파일 버퍼를 GCP cloud에 저장
      await gcsFile.save(file.buffer, {
        contentType: file.mimetype,
      });
      
      // 업로드된 파일의 공개 URL 정의
      const publicURL = `https://storage.googleapis.com/${process.env.GCP_STORAGE_BUCKET}/${file.originalname}`;
      // 파일 정보를 객체로 반환
      return {
        fileName: file.originalname,
        publicURL,
      };
    });
    
    // 모든 파일 업로드 작업 완료까지 기다림
    const uploadedFiles = await Promise.all(uploadPromises);

    return {
      files: uploadedFiles,
    };
  }
}

 

 

 

포스트맨에서 테스트

파일 key 입력을 files 로 지정한다.

 

 

GCP 버킷 업로드 확인

정상적으로 업로드되었음을 확인할 수 있다.

Comments