항해 99 87일차 12/14일

사진 용량이 커서 이미지 로딩 속도가 느려서 이미지 리사이징을 해야겠다고 생각했고 

검색을 해보다가 람다를 이용한 이미지 리사이징과 sharp 라이브러리를 이용해서 이미지 리사이징을 하는 방법

두 가지 있었고 sharp를 이용해서 진행했다.

기존 코드는 동일 하고 

멀터s3를 통해 이미지 업로드후 받아온 url주소에 키값을 가지고 해당 파일을 불러온후 입축하고 다시 업로드 하는

방법으로 구현했다.

//userCo.ts
updateUser: async (req: Request, res: Response, next: NextFunction) => {
    try {
      const { location, size } = req.file as Express.MulterS3.File //멀터의 타입을 사용함
      const { userId }: Users = res.locals.user;
      const { nickname }: Users = req.body;
      if(size >= 1000000){
         resizing(location)
      }
      const profileImg = location
      console.log(req.file as Express.MulterS3.File ,"<=파일정보")
      await userServ.updateUser({nickname, profileImg, userId });
      res.status(201).send({ message: '수정 완료' });
    } catch (err) {
      next(err);
    }
  },

 //multer.ts
 //이미지 리사이징
  export const resizing = async (location:string) => {
    try {
      const s3 = new AWS.S3({
        accessKeyId: process.env.S3_ACCESS_KEY!, //방급받은 ACCESSKEY
        secretAccessKey: process.env.S3_SECRET_KEY!,//방급받은 SECRETKEY
      })
     const key = location.slice(48)
     //원본 파일 버캣과 키값
      const originalFile = {
        Bucket: process.env.S3_bUCKET!,
        Key: key
      }
    //리사이징 파일 버캣과 키값
      const resizedFile:any = {
        Bucket: process.env.S3_bUCKET!,
        Key: key
      }
      // fetch(원본 파일 불러오기)
      const imageData:any = await s3.getObject(originalFile).promise()
      console.log(imageData.Body,"사이즈 변경 전 버퍼")
    // resizing(원본 파일 body의 버퍼값 변경)
      const imageBuffer = await sharp(imageData.Body).resize({ width: 600, height:600 }).toBuffer();
      console.log(imageBuffer,"사이즈 변경 후 버퍼")
      resizedFile.Body = imageBuffer;
      
    // upload
      await s3.putObject(resizedFile).promise();
    } catch(error) {
      console.log('AWS에러: ', error);
    }
  }

파일 사이즈가 1메가가 넘는다면 이미지 리사이징을 하는쪽으로 받아온 url이 넘어오고 s3.getobject 함수로 해당 파일을

불러와서 body값에 담긴 buffer를 뽑아서 sharp 라이브러리로 사이즈를 줄여서 다시 업로드 한다.

기존 파일 경로를 재활용 할꺼기 때문에 따로 구별을 두지않고 바로 수정 하는 방법으로 진행 했다.

로컬환경에서는 잘 작동이 되었는데 서버 배포를 하니깐 서버가 다운되어 버렸다.(프리티어를 썻고 메모리가 부족해서 서버가 다운된거 같다.) 그 후 서버를 다시 켰지만 ip주소가 바뀌어서 다시 발급 받아야 했고 ssl 인증서가 갱신이 되지 않아서 재배포를 하기로 하고 람다를 이용해서 리사이징을 해보자고 생각 했다.

 

그러면서 알게 된게 aws에 swap 메모리를 지정 할 수 있다. 라는 글을 보게되었고 RAM이 부족 할 경우 HDD의 일정공간을 RAM처럼 사용 하는 방법이였다.

swap 메모리를 지정 할때는 인스턴스에서 사용 가능한 메모리 보다 작아야 한다고 한다.

https://aws.amazon.com/ko/premiumsupport/knowledge-center/ec2-memory-swap-file/

//dd 명령에서 스왑 파일은 4GB(128MB x 16)입니다. 32까지 사용 가능한거 같다.
sudo dd if=/dev/zero of=/swapfile bs=128M count=16

//스왑 파일 읽기 및 쓰기 권한을 업데이트 한다.
sudo chmod 600 /swapfile

//리눅스 스왑 영역을 설정
sudo mkswap /swapfile

//스왑 공간에 스왑파일을 추가해서 즉시 사용 할 수 있게한다.
sudo swapon /swapfile

//정상 작동 하는지 확인하고
sudo swapon -s

//명령어를 통해 편집기를 열어서
sudo vi /etc/fstab

//i 눌러 마지막줄에 추가하고 빠져나온다.
/swapfile swap swap defaults 0 0

free 멍령어를 통해 확인하면 끝이다.

재배포를 하면서 기존에는 EC2에 MYSQL을 설치해서 사용을 했는데 RDS로 바꾸기로 했다.

처음에 EC2를 사용하게 된 가장 큰 이유는 비용이였기 때문에 EC2에 설치해서 사용 했지만 방법이 까다롭고 데이터 백업이 불가능 해서 백업 기능 있고  복잡한 관리 프로세스는 자동으로 관리해주는 RDS를 사용하기로 했다.

이전에도 사용한적이 있어서 크게 무리없이 진행 했었는데 사용을 할려고 하니 우분투 ip가 접속을 거부 당했다.

포트번호도 잘 열었고 보안 그룹도 잘 설정 했는데 외부에서 접속이 불가능 해서 당황 했던거 같다. 외부 접속이 불가능 했던 이유는 VPC에 라우팅 테이블에 있는 RDS 라우팅에 0.0.0.0/0 즉 외부 접속을 안해 줬던 것이였다.

RDS 누르기

선택후 라우팅 편집을 누른다

들어와서 0.0.0.0/0 선택후 인터넷 게이트웨이를 선택하면 igw-ㅇㅇㅇ 라고 하나가 뜰탠데 선택하고 저장하면 끝이다.

 

RDS설정을 하면서 VS코드에서 사용 하는 로컬 MYSQL과 출동이 생겨서 포트도 껏다 켜보고 많은 일이 있었다.

하나가 되면 다른게 안되고 시간에 쫓겨서 진행 했던거 같다.