[Apollo-Server]GraphQL 파일 업로드 + Google Cloud Storage 파일 업로드

Apollo-Server, GraphQL을 사용해 파일을 전달받고, 전달받은 파일을 Google Cloud Storage에 업로드하는 연습을 해봤다.

1. Cloud Storage 버킷 생성

2. 사용자 권한 부여

조회, 등록 권한을 부여해줬다.

3. graphql-upload 모듈 설치

graphQL로 파일을 받기위해 graphql-upload 모듈 설치

사용법 : https://www.apollographql.com/docs/apollo-server/data/file-uploads/

npm install graphql-upload 

4. Apollo-Server 생성

import { ApolloServer } from "apollo-server-express";
import resolvers from "./graphql/resolvers";
import typeDefs from "./graphql/typeDefs";
import { ApolloServerPluginLandingPageGraphQLPlayground } from "apollo-server-core";
import { graphqlUploadExpress } from "graphql-upload";
import express from "express";
async function startServer() {
  const server = new ApolloServer({
    typeDefs,
    resolvers,
    plugins: [ApolloServerPluginLandingPageGraphQLPlayground()],
  });

  await server.start();
  const app = express();
  app.use(graphqlUploadExpress());
  server.applyMiddleware({ app });
  await new Promise<void>((r) => app.listen({ port: 4000 }, r));
  console.log(`🚀  Server ready at http://localhost:4000`);
}

startServer();

5. uploadFile Mutation 생성

uploadFile: async (_: any, {file} : any) => {
      const { createReadStream, filename } = await file;
      const stream = createReadStream();
      const out = require('fs').createWriteStream(`./temp/${filename}`);
      await finished(out);
      uploadFile(file, `./temp/${filename}`);
  
  	  require('fs').unlink(`./temp/${filename}`, (err: any) => {
        if(err) console.log(err.message);
      })
    },

파일을 저장하지 않고 buffer에서 바로 넘겨주는 방법이 있을 것 같은데......
일단 서버에 저장하고 바로 삭제하는 방식으로 구현
stream에 대해 다시 공부한 후 수정할예정.

6. google-cloud/storage 모듈 설치

npm install @google-cloud/storage

7. 파일 업로드 코드 작성

import { Storage } from "@google-cloud/storage";

const projectId = '프로젝트명'
const keyFilename = '키파일경로'
const storage = new Storage({projectId, keyFilename});
export async function uploadFile(file:any, path: string) {
    await storage.bucket("bucket이름").upload(path, {
      destination: file.filename,
    });

    console.log(`${path} uploaded to ${file.filename}`);
  }

8. 키 발급

9. 업로드

브라우저에서 input 태그를 통해 파일을 입력받아 업로드 요청을 보냈다.

결과

이렇게 파일을 선택해서 백엔드로 보내주면

Google Storage에 정상적으로 업로드된걸 확인할 수 있다.

참조

https://cloud.google.com/nodejs/docs/reference/storage/latest?hl=ko

https://github.com/googleapis/nodejs-storage/blob/main/samples/uploadFile.js

https://www.apollographql.com/docs/apollo-server/data/file-uploads/