[E-Commerce App with REST API] (20) Product에서 cloudinary 로 이미지 업로드하고 관리하기

<본 블로그는 Developers Corner 의 유튜브를 참고해서 공부하며 작성하였습니다 :-)>

=> Node.js E-Commerce App with REST API: Let's Build a Real-Life Example!

 

🌷 Cloudinary

 : 웹사이트 및 모바일 애플리케이션용 이미지와 동영상을 관리, 최적화, 전송할 수 있는 플랫폼을 제공하는 클라우드 기반 서비스

: 서버에 이미지를 저장하지 않고 storage에 따로 이미지 파일을 저장하고자 함

npm i multer sharp cloudinary

✅ .env 파일에 따로 저장하기

// Configuration 
cloudinary.config({
  cloud_name: "~~~",
  api_key: "~~",
  api_secret: "~~~"
});

 

✅ Multer

: 파일을 업로드 하기 위한 node.js 미들웨어

 

✅ Sharp

: node.js에서 이미지를 처리하기 좋은 패키지

: 이미지의 사이즈를 변경 가능

 

✅ Path

: 파일/폴더/디렉터리 등의 경로를 편리하게 설정할 수 있는 기능

 

🌷 Product에 이미지 업로드하기

 

🌷 코드

✅ utils/cloudinary.js

const cloudinary = require("cloudinary");
// Cloudinary API를 사용하기 위해 필요한 정보들
cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.API_KEY,
  api_secret: process.env.SECRET_KEY,
});

const cloudinaryUploadImg = async (fileToUploads) => {
  return new Promise((resolve) => {
    // cloudinary에 임시 저장된 이미지를 업로드
    cloudinary.uploader.upload(fileToUploads, (result) => {
      resolve(
        {
          url: result.secure_url,
        },
        {
          resource_type: "auto",
        }
      );
    });
  });
};

module.exports = cloudinaryUploadImg;

 

✅ middleweares/uploadimages.js

// 파일을 업로드 하기 위한 node.js 미들웨어
const multer = require("multer");
// 이미지를 처리하기 좋은 패키지
const sharp = require("sharp");
// 파일/폴더/디렉터리 등의 경로를 편리하게 설정할 수 있는 기능
const path = require("path");

// 이미지 저장소
const multerStorage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, path.join(__dirname, "../public/images"));
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + "-" + Math.fround(Math.random() * 1e9);
    cb(null, file.fieldname + "-" + uniqueSuffix + ".jpeg");
  },
});

const multerFilter = (req, file, cb) => {
  // mime type : 파일이 어떠한 종류의 파일인지에 대한 정보가 담긴 라벨
  if (file.mimetype.startsWith("image")) {
    // 반환받은 Mime Type에 대한 데이터가 image 인지 체크
    cb(null, true)
  }
  else {
    cb(
      {
        message: "Unsupported file format",
      },
      false
    );
  }
};

const uploadPhoto = multer({
  storage: multerStorage,
  fileFilter: multerFilter,
  limits: { fieldSize: 2000000 },
});

// 이미지 사이즈 조정
const productImgResize = async (req, res, next) => {
  if (!req.files) return next();
  await Promise.all(
    req.files.map(async (file) => {
      await sharp(file.path)
        .resize(300, 300)
        .toFormat("jpeg")
        .jpeg({ quality: 90 })
        .toFile(`public/images/products/${file.filename}`);
    })
  );
  next();
};

const blogImgResize = async (req, res, next) => {
  if (!req.files) return next();
  await Promise.all(
    req.files.map(async (file) => {
      await sharp(file.path)
        .resize(300, 300)
        .toFormat("jpeg")
        .jpeg({ quality: 90 })
        .toFile(`public/images/blogs/${file.filename}`);
    })
  );
  next();
};

module.exports = {
  uploadPhoto,
  productImgResize,
  blogImgResize
};

 

✅ controllers/productCtrl.js

const Product = require("../models/Product");
const User = require("../models/User");
const asyncHandler = require("express-async-handler");
const slugify = require("slugify");
const { validateMongodbID } = require("../utils/validateMongodbID");
const cloudinaryUploadImg = require("../utils/cloudinary");

// 상품 등록
const createProduct = asyncHandler(async (req, res) => {
  try {
    if (req.body.title) {
      // slugify : 텍스트를 url 주소로 변환해주는 라이브러리
      // slug : 이미 얻은 데이터를 사용하여 유효한 URL을 생성 (URL과 의미있는 이름을 사용)
      req.body.slug = slugify(req.body.title);
    }
    const newProduct = await Product.create(req.body);
    res.json(newProduct);
  } catch (error) {
    throw new Error(error);
  }
});

// 상품 수정
const updateProduct = asyncHandler(async (req, res) => {
  const { id } = req.params;
  validateMongodbID(id);
  try {
    if (req.body.title) {
      // slugify : 텍스트를 url 주소로 변환해주는 라이브러리
      // slug : 이미 얻은 데이터를 사용하여 유효한 URL을 생성 (URL과 의미있는 이름을 사용)
      req.body.slug = slugify(req.body.title);
    }
    const updateProduct = await Product.findOneAndUpdate(id,
      req.body, {
      new: true,
    });
    res.json(updateProduct);
  } catch (error) {
    throw new Error(error);
  }
});

// 상품 삭제
const deleteProduct = asyncHandler(async (req, res) => {
  const { id } = req.params;
  validateMongodbID(id);
  try {
    if (req.body.title) {
      // slugify : 텍스트를 url 주소로 변환해주는 라이브러리
      // slug : 이미 얻은 데이터를 사용하여 유효한 URL을 생성 (URL과 의미있는 이름을 사용)
      req.body.slug = slugify(req.body.title);
    }
    const deleteProduct = await Product.findOneAndDelete(id);
    res.json(deleteProduct);
  } catch (error) {
    throw new Error(error);
  }
});

// 상품 id 조회
const getAProduct = asyncHandler(async (req, res) => {
  const { id } = req.params;
  validateMongodbID(id);

  try {
    const findProduct = await Product.findById(id);
    res.json(findProduct);
  } catch (error) {
    throw new Error(error);
  }
});

// 모든 상품 조회
const getAllProduct = asyncHandler(async (req, res) => {
  try {
    // 1) Filtering => t?price[lt]=50000
    const queryObj = { ...req.query };
    const excludeFields = ["page", "sort", "limit", "fields"];
    excludeFields.forEach((el) => delete queryObj[el])
    console.log(queryObj);

    // JSON.stringify : JavaScript 값이나 객체를 JSON 문자열로 변환
    let queryStr = JSON.stringify(queryObj);
    // Create operators ($gt, $gte, etc)
    queryStr = queryStr.replace(/\b(gt|gte|lt|lte)\b/g, (match) => `$${match}`);
    // JSON.parse : JSON 문자열을 인자로 받고 결과값으로 JavaScript 객체를 반환
    let query = Product.find(JSON.parse(queryStr));

    // 2)Sorting => ?sort=-category,-brand
    if (req.query.sort) {
      const sortBy = req.query.sort.split(",").join(" ");
      query = query.sort(sortBy);
    } else {
      query = query.sort("-createdAt");
    }

    // 3) Limiting the fields => ?fields=-title,-price,-category
    if (req.query.fields) {
      const fields = req.query.fields.split(",").join(" ");
      query = query.select(fields);
    } else {
      query = query.select("-__v");
    }

    // 4) pagination  => ?page=4&limit=5
    // 페이지 나누기, 쿼리의 결과값으로 리턴된 리소스를 분할하여 전달
    const page = req.query.page;
    const limit = req.query.limit;
    const skip = (page - 1) * limit;
    query = query.skip(skip).limit(limit);
    if (req.query.page) {
      const productCount = await Product.countDocuments();
      if (skip >= productCount) {
        throw new Error("This page does not exists");
      }
    }
    // console.log(page, limit, skip);

    const product = await query;
    res.json(product);
  } catch (error) {
    throw new Error(error);
  }
});

// 위시리스트에 상품 넣기
const addTowishList = asyncHandler(async (req, res) => {
  const { _id } = req.user;
  const { prodId } = req.body;
  try {
    const user = await User.findById(_id);
    const alreadyadded = user.wishList.find((id) => id.toString() === prodId);

    if (alreadyadded) {
      let user = await User.findByIdAndUpdate(_id, {
        $pull: { wishList: prodId },
      }, {
        new: true,
      });
      res.json(user);
    } else {
      let user = await User.findByIdAndUpdate(_id, {
        $push: { wishList: prodId },
      }, {
        new: true,
      });
      res.json(user);
    }
  } catch (error) {
    throw new Error(error);
  }
});

// 상품 별점 매기기
const rating = asyncHandler(async (req, res) => {
  const { _id } = req.user;
  const { star, comment, prodId } = req.body;

  try {
    const product = await Product.findById(prodId);
    let alreadyRated = product.ratings.find(
      (userId) => userId.toString() === _id.toString());

    if (alreadyRated) {
      const updateRating = await Product.updateOne(
        {
          ratings: { $elemMatch: alreadyRated },
        }, {
        $set: { "ratings.$.star": star, "ratings.$.comment": comment },
      }, {
        new: true
      });
      // res.json(updateRating);
    } else {
      const rateProduct = await Product.findByIdAndUpdate(
        prodId,
        {
          $push: {
            ratings: {
              star: star,
              comment: comment,
              postedby: _id,
            },
          },
        });
      // res.json(rateProduct);
    }

    // 총 별점 평균내기
    const getallratings = await Product.findById(prodId);
    let totalRating = getallratings.ratings.length;   // 개수
    let ratingsum = getallratings.ratings
      .map((item) => item.star)
      .reduce((prev, curr) => prev + curr, 0);
    let actualRating = Math.round(ratingsum / totalRating);
    let finalproduct = await Product.findByIdAndUpdate(
      prodId, {
      totalrating: actualRating,
    }, {
      new: true
    });
    res.json(finalproduct);
  } catch (error) {
    throw new Error(error);
  }
});

const uploadImages = asyncHandler(async (req, res) => {
  const { id } = req.params;
  validateMongodbID(id);
  try {
    const uploader = (path) => cloudinaryUploadImg(path, "images");
    const urls = [];
    const files = req.files;
    for (const file of files) {
      const { path } = file;
      const newpath = await uploader(path);
      urls.push(newpath);
    }
    const findProduct = await Product.findByIdAndUpdate(
      id,
      {
        images: urls.map((file) => {
          return file;
        }),
      },
      {
        new: true,
      }
    );
    res.json(findProduct);
  } catch (error) {
    throw new Error(error);
  }

});

module.exports = {
  createProduct,
  updateProduct,
  deleteProduct,
  getAProduct,
  getAllProduct,
  addTowishList,
  rating,
  uploadImages
};

 

✅ routes/productRoute.js

const express = require("express");
const { createProduct, getAProduct, getAllProduct, updateProduct, deleteProduct, addTowishList, rating, uploadImages } = require("../controllers/productCtrl");
const { isAdmin, authMiddleware } = require("../middlewares/authMiddleware");
const { uploadPhoto, productImgResize } = require("../middlewares/uploadimages");
const router = express.Router();

router.post("/", authMiddleware, isAdmin, createProduct);
router.put("/upload/:id", authMiddleware, isAdmin, uploadPhoto.array("images", 10), productImgResize, uploadImages);
router.get("/:id", getAProduct);
router.put("/wishlist", authMiddleware, addTowishList);
router.put("/rating", authMiddleware, rating);

router.put("/:id", authMiddleware, isAdmin, updateProduct);
router.delete("/:id", authMiddleware, isAdmin, deleteProduct);
router.get("/", getAllProduct);

module.exports = router;