[Node]Instagram Clone - 4. multer와 AWS S3를 사용한 게시물 업로드 API

• multer와 AWS S3을 사용해 사용자가 텍스트와 이미지를 포함한 게시물을 업로드할 수 있는 API를 만들어 보자.
• 이미지는 AWS S3에 저장되고, 저장된 이미지의 URL은 MongoDB에 함께 저장됨.
• 사용자는 로그인 후 게시물을 업로드할 수 있음!
• 사용자는 게시물을 업로드할 때 최소 한 장의 이미지를 포함해야 함(텍스트는 비어도 괜찮음)!
  
  

1. 게시물 업로드 라우트

• auth 미들웨어를 사용해 로그인된 사용자만 접근할 수 있도록 제한함.
• multer를 이용해서 최대 10개의 이미지를 메모리 저장소에 저장하고 AWS S3 버킷에 업로드함.
• 각 이미지는 고유한 파일 이름을 가지고, S3에 저장된 후 URL이 생성됨.

1) 코드

// uploadPost.js

const express = require("express");
const router = express.Router();
router.use(express.json());

const { Post } = require("../../models/Post");
const { auth } = require("../auth");
const cookieParser = require("cookie-parser");
router.use(cookieParser());

const multer = require("multer");
const { PutObjectCommand } = require("@aws-sdk/client-s3");
const storage = multer.memoryStorage();
const upload = multer({ storage }).array("images", 10); // 최대 10장의 이미지 업로드
const s3 = require("../../config/s3"); // S3 클라이언트 가져오기

// 게시물 업로드
router.post("/", auth, upload, async (req, res) => {
  const { text } = req.body;
  const userId = req.user._id; // 로그인된 사용자 ID 가져오기

  if (!userId) {
    return res.status(401).json({
      message: "로그인된 사용자만 게시물을 업로드할 수 있습니다.",
    });
  }

  // 이미지가 최소 한 장 이상 포함되었는지 확인
  if (!req.files || req.files.length === 0) {
    return res.status(400).json({
      message: "최소 1장의 이미지를 포함해야 게시물을 업로드할 수 있습니다.",
    });
  }

  try {
    // S3 업로드할 이미지 URL 배열 생성
    const imageUrls = [];

    for (let file of req.files) {
      const filename = `${Date.now()}_${file.originalname}`;
      const uploadParams = {
        Bucket: "post-jae",
        Key: filename,
        Body: file.buffer,
        ContentType: file.mimetype,
      };

      // S3에 파일 업로드
      await s3.send(new PutObjectCommand(uploadParams));
      const imageUrl = `https://${uploadParams.Bucket}.s3.${process.env.AWS_REGION}.amazonaws.com/${filename}`;
      imageUrls.push(imageUrl);
    }

    // 새로운 게시물 생성 및 저장
    const newPost = new Post({
      user: userId,
      text: text || "",
      images: imageUrls,
    });

    await newPost.save();

    return res.status(201).json({
      message: "게시물이 성공적으로 업로드되었습니다.",
      post: newPost,
    });
  } catch (err) {
    return res.status(500).json({
      message: "게시물 업로드 중 오류가 발생했습니다.",
      error: err.message,
    });
  }
});

module.exports = router;

// auth.js

const { User } = require("../models/User");

let auth = (req, res, next) => {
  // 클라이언트로부터 쿠키 가져오기
  let token = req.cookies.x_auth;
  console.log("Received token:", token); // 토큰 로그

  // 토큰 복호화 후 user 찾기
  User.findByToken(token)
    .then((user) => {
      if (!user) {
        throw new Error("유효하지 않은 토큰입니다."); // 사용자 없음
      }
      console.log("Authenticated user:", user); // 사용자 로그
      req.token = token;
      req.user = user;
      return next();
    })
    .catch((err) => {
      console.error("Authentication error:", err.message); // 에러 로그
      return res.status(401).json({
        isAuth: false,
        message:
          err.message === "유효하지 않은 토큰입니다."
            ? "로그인이 필요합니다."
            : err.message,
      });
    });
};

module.exports = { auth };

 

2) 기능 세부 흐름

1. multer와 memoryStorage를 이용해 이미지를 메모리에 저장하고, 배열 형태로 파일 받음.
2. 로그인 여부를 학인하기 위해 auth 미들웨어 호출함.
3. 사용자가 업로드한 각 파일에 대해 고유 파일 이름을 생성하고, PutObjectCommand를 통해 S3에 업로드함
4. S3 업로드 후 각 이미지 URL을 수집해 MongoDB Post 컬렉션에 함께 저장함.
   
   

3) 데이터베이스와 AWS S3 연동

• MongoDB에 저장되는 데이터 구조
  • user: 게시물 작성자의 ID
  • text: 게시물 내용
  • images: S3에 업로드된 각 이미지의 URL 배열
  • createdAt: 생성 일시 (자동 생성)

# mongoDB에 저장된 게시물 구조

{
  "_id": "게시물 ID",
  "user": "사용자 ID", 
  "text": "게시물 내용", 
  "images": [
    "https://post-jae.s3.ap-northeast-2.amazonaws.com/test.jpg"
  ],
  "createdAt": "2024-11-02T06:59:29.107+00:00",  # 게시물 작성 시간
}

 

2. 결과 🎉

• Postman으로 로그인 후, POST 보내기

1) POST 실패

• 로그인이 되어 있지 않을 경우

• 이미지가 없는 텍스트 게시물을 업로드하려고 하는 경우

2) POST 성공

• MongoDB

• AWS S3 버킷