[WEB] 이미지 업로드

이미지 업로드 프로세스

가장 기본적인 이미지 업로드 과정은 다음과 같다.

1. 브라우저에서 사용자가 업로드 하고싶은 이미지를 골라 선택한다.

2. 선택한 파일을 변수에 저장한다. 이 때 변수에 담긴 내용을 파일 객체라고 부르며 파일에 대한 정보가 있다.

3. 브라우저가 파일 객체를 백엔드에 업로드 요청을 한다. 물론 이 때 백엔드에는 파일 업로드 하는 API가 있어야 한다.

4. 백엔드 서버가 전달 받은 파일을 DB에 저장한다.

 

하지만 이렇게 모든 이미지 파일을  DB에 저장하게 되면 비효율적인 방식이다. 그래서 오늘은 클라우드 스토리지에 이미지 파일을 저장하는 방법에 대해서 간단하게 알아보도록 한다. 

1. 브라우저에서 이미지 파일을 선택 한 후 요청을 보내면 cloud storage에 파일을 저장한다.

2. cloud storage에서는 파일을 저장한 결과로 사진을 다운로드 할 수 있는 이미지 URL을 반환한다.

 

GCP Cloud Functions 을 사용해서 Google-storage 버킷에 사이즈를 조절하여 사이즈 별로 이미지가 저장되는 코드를 작성 해보자.

const sharp = require("sharp");
const { Storage } = require("@google-cloud/storage");
exports.GenerateThumbnail = async (event, context) => {
    const gcsEvent = event;
    if (event.name.includes("thumb/")) return; // 안쓰면 안됨 무려 폴더증식 20개 까지 확인 .....

    console.log("aaaaaaaaaaaaaaaaaaaa", gcsEvent);

    const dirSize = [
        { dir: "s", width: 320 },
        { dir: "m", width: 640 },
        { dir: "l", width: 1280 },
    ];

    const storage = new Storage().bucket("juju-storage"); // GCP계정에 버킷 이름

    const results = await Promise.all(
        dirSize.map((ele) => {
            return new Promise((resolve, reject) => {
                storage
                    .file(gcsEvent.name)
                    .createReadStream()
                    .pipe(sharp().resize({ width: ele.width })) // sharp() 함수를 사용해서 이미지 사이즈 조절
                    .pipe(
                        storage
                            .file(`thumb/${ele.dir}/${gcsEvent.name}`)
                            .createWriteStream()
                    )
                    .on("finish", () =>
                        resolve()
                    )
                    .on("error", () => reject("실패"));
            });
        })
    );
    return results;
};

GCP Cloud Functions에 사용방법은 다음에 자세하게 포스팅 하도록 하겠다.