[11] #Bonus Time - 1) AWS S3

AWS S3

이번 시간에는 AWS S3을 활성화하는 것을 해볼 것이다.

AWS(Amazon Web Service)의 S3은 파일을 업로드할 수 있는 서비스이다.

우린 이제 이것을 통해서 우리의 로컬에 데이터베이스에 비디오나 유저의 프로필사진 이런 것들을 저장하지 않고 아마존에다가 올리게 되는 것이다!

 

🍔AWS 가입하고 퍼블릭으로 버킷 만들기

 

https://s3.console.aws.amazon.com/s3/home?region=us-east-2#

https://s3.console.aws.amazon.com/s3/home?region=us-east-2

여기 AWS에 가입하고 진행하면 된다.

버킷을 퍼블릭으로 만들어주면 된다. (다른 블로그 참조해서 했음)

 

🍔 aws 사이트> IAM으로 가기

여기서 뭘 할거냐면 새로운 유저를 만들 것이다. 

새로운 유저를 만들고 다 만들고 나면 key ID와 secret access key를 준다.

이것을 .env 파일에 AWS_KEY, AWS_PRIVATE_KEY라는 이름으로 만든다.

 

🍔 aws-sdk, multer-s3 설치하기

우리가 하려고 하는 건 우리 서버가 파일을 업로드할 수 있게 하는 것이다.

multer를 이용해서 파일을 버킷에 업로드하게 할 것이다. (영상,프로필 사진 등등 모든 자료를)

그러므로 aws-sdk, multer-s3을 설치한다.

-설치 : npm install aws-sdk multer-s3

 

🍔middlewares.js 수정하기(업로드를 담당하는 middleware를 바꿀 것임)

업로드를 담당하는 middleware를 바꿀 것이다.

multer의 업로드 방식을 바꾸려고 하는 것이기 때문이다.

multer 대신에 multer-s3를 쓸 것이다.

그 전에 import를 해준다.

 

import multerS3 from "multer-s3";

import aws from "aws-sdk";

↑middlewares.js

지난 시간 마지막에 설치했던 aws-sdk와 multer-s3을 미들웨어에 import해준다.

 

🍔s3유저에 관한 것을 초기화해주기

const s3 = new aws.S3({
    secretAccessKey: process.env.AWS_PRIVATE_KEY,
    accessKeyId: process.env.AWS_KEY
	region: "ap-northeast-2"

});

↑middlewares.js

지난시간에 .env에 저장해놓은 비밀키와 키id를 사용해준다.

지역은 나는 서울로 했다.

이제 초기화된 s3를 갖게 되었다.

이게 잘 작동하는지 테스트해볼 것이다.

 

🍔영상 관련한 multer를 수정하기 + 아바타 관련 multer 수정

const multerVideo = multer({

    storage: multerS3({

        s3,

        acl: "public-read",

        bucket: "mytube1213/video"

    })

});

↑middlewares.js

다양한 storage를 multer에 설정할 수 있다. 디폴트는 node.js의 파일 시스템이고 이 경우에는 multerS3로 해준 것이다. 우리가 만든 버켓 아래에 /video라는 하위 폴더로 넣겠다는 말이다.

 

아바타도 마찬가지로 작성해준다.

const multerAvatar = multer({

    storage: multerS3({

        s3,

        acl: "public-read",

        bucket: "mytube1213/avatar"

    })

});

↑ middlewares.js

 

 

🍔 이제 영상을 업로드해보면 → 에러! (req.file.location에 담겨있기 때문)

aws 콘솔을 확인해보면 영상은 잘 올라갔는데, 우리 개발툴의 콘솔에서는 fileUrl이 필요하다고 에러가 뜬다. 그 부분을 수정해준다.

 

그 부분을 수정해주기 위해서 비디오를 업로드하는 함수(postUpload)로 가서, console로 req.file을 확인해본다.

export const postUpload = async(req, res) => {

    const {

        body: {title,description},

        file: {path}

    } = req;

console.log(req.file);

    const newVideo = await Video.create({

        fileUrl: path,

        title,

        description,

        creator: req.user.id

    });

    req.user.videos.push(newVideo.id);

    req.user.save();

    res.redirect(routes.videoDetail(newVideo.id));

};

↑ videoController.js

 

새로 수정한 코드는 req.file.path를 가지고 있는 것이 아니라 req.file.location에 주소가 담겨있었다.

path라고 작성된 부분을 전부 location으로 바꾼다.

**multer가 뭔가를 우리 서버에 저장할 때 그 파일의 path를 받는다. 하지만 s3처럼 외부의 서버에 저장할 때는 location을 받는다.

 

🍔req.file.location으로 전부 수정해주기

유저와 관련된 것에서도 file을 location으로 수정해준다.

(userController.js > postEditProfile에서 수정한다)

 

🍔비디오 경로를 수정해주기

이제 업로드는 잘 된다. 대신에 비디오가 화면에서 보이지 않는데, 이건 비디오 경로에 문제가 있다.

videoPlayer.pug에서 src부분을 다음과 같이 수정하면 된다.

.videoPlayer#jsVideoPlayer

        video(src=video.src)

 

이제 아주 잘된다.

프로필도 마찬가지다.