[TIL] 210712

백엔드에서 기초적인 기능들은 다 만들어졌기 때문에 추가적인 기능을 구현해보자고 해서,
1.뉴스 크롤링
2.소셜 로그인
3.이미지 업로드 (AWS S3)
이렇게 나왔다.

기초반때 또 이미지 업로드를 해봤고 이번엔 로컬저장소가 아닌 AWS S3를 이용해서 가상서버에 따로 올리는 기능이기때문에 이걸 택했다.

일단 이미지 업로드 기능을 middleware로 만들었다. 직접 코드를 적는 부분은 기존 multer기능이랑 많이 다르진 않다. 대신 이미지 저장소인 "bucket"을 AWS에서 하나 새로 만들어서 연결시켜줘야한다.

📂 이미지 업로드 middleware

import multer from "multer";
import multerS3 from 'multer-s3'
import aws from 'aws-sdk'
import path from 'path';
const __dirname = path.resolve();
aws.config.loadFromPath(__dirname + '/config/s3.json');

  const S3 = new aws.S3();
  const upload = multer({
      storage: multerS3({
          s3: S3,
          bucket: '',	//자기 버켓 이름
          acl: 'public-read-write', // Access Control List (public에서 읽고 쓸수있다)
          contentType: multerS3.AUTO_CONTENT_TYPE, //통신하는 content type지정
          metadata: function (req, file, cb) {	// 데이터에 metadata 추가
            cb(null, { fieldName: file.fieldname }) 
          },
          key: function(req, file, cb){ 	// 저장경로
          cb(null, 'profilePic/' + Date.now() + '.' + file.originalname.split('.').pop()); 
          },
      }),
      limits: { fileSize: 5 * 1024 * 1024 },	//이미지 최대크기
  });

  
 export { upload, S3 };

📂이미지 업로드

이미지는 회원가입할때 같이 할수있도록 했다.
이미지를 저장할때 키를 같이 지정해주는 이유는 나중에 삭제할때 .key를 이용해서 삭제하기 때문에 따로 저장했다.

router.post("/", upload.single('image'), async (req, res) => {
  try {
    const { loginId, nickname, password } = req.body

  if (!req.file) {			//유저가 이미지를 안올렸을때
    profileImage = '기본이미지 url'
    profileImageKey = "basic"
  await User.create({
    loginId,
    nickname,
    password,
    profileImage,
    profileImageKey,
  });
  return res.status(201).send({ message: "회원가입을 축하합니다." })
}else{			
  const profileImage = req.file.location;		//유저가 이미지를 올렸을때
  const profileImageKey = req.file.key
  await User.create({
    loginId,
    nickname,
    password,
    profileImage,
    profileImageKey,
  })
  return res.status(201).send({ message: "회원가입을 축하합니다." })
  }
}catch (err) {
  console.error(err);
  res
    .status(400)
    .send({ errorMessage: "회원가입 양식이 올바르지 않습니다." });
}
});

📂AWS S3 설정

1. https://s3.console.aws.amazon.com/AWS S3 버켓에 가서 새로운 버켓을하나 만든다.
2. 퍼블릭 엑세스를 모두 열어준다.
3. 버킷 정책에도 public으로 만들어주는 정책을 써준다 (찾으면 금방나온다)
4. IAM에 가서 오른쪽 메뉴에서 내 엑세스 키를 생성해준다.

📂엑세스 키

생성한 엑세스 키는 절대절대절대 밖으로 노출되면 안된다. 어떤 대학생이 실수로 노출했다가 1000만원정도 나왔다고 들었다. 노출을 안시키는 방법은 여러가지가 있는거같다. dotenv 라이브러리를 쓰거나 아니면,

"config" 폴더 하나를 만들고 거기 안에 "S3" 파일을 만들어준다(이름은 상관없다). 거기 안에다가 이렇게 넣어주고 .gitignore에 꼭 /config 넣어주자.

{
    "accessKeyId" : "",
    "secretAccessKey" : "",
    "region" : ""
}

그리고 이걸 이미지 업로드 middleware에 보면 위에 이렇게 불러와서 쓴다.

aws.config.loadFromPath(__dirname + '/config/s3.json');