✨소개

이번에는 Heroku에서 AWS S3를 사용하는 법에 대해 알아볼 것입니다. S3는 파일이나 이미지 같은 것들을 저장할 수 있는 저장소라고 보시면 됩니다.

✨설정하기

먼저 aws 사이트에 가서 S3를 생성해줍시다. 그 다음은 aws 사이트에서 S3 설정을 좀 해주고 Node에서는 aws-sdk와 multer-s3라는 패키지를 받게 될겁니다.

🎐AWS S3 설정

처음에는 S3 설정을 aws 사이트에서 해줄겁니다.
만든 S3를 클릭하면 권한 버튼을 누르시고 CORS 구성에 들어가주시면 코드를 입력하는 부분이 있는데 이 코드를 추가해줍시다.

<?xmlversion="1.0"encoding="UTF-8"?>
<CORSConfigurationxmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

이 코드를 적어주시면 Heroku에서 S3를 사용할 수 있을겁니다. 참고로 이 코드는 Heroku의 S3 관련 글에 적혀져있는 코드입니다.
거기에 추가로 권한도 설정해줄 수 있는데 만약 웹사이트를 사용하고 있는 모든 사람이 사용할 수 있게 하고 싶으시다면 권한 버튼을 누르시고

{
    "Version": "2012-10-17",
    "Statement": [
 {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:PutObject"
 ],
            "Resource": "arn:aws:s3:::kihat-blog/*"
 }
 ]
}

이 코드를 써주면 됩니다. 저 Resource 부분에 ::: 다음 부분은 여러분의 S3 이름을 적어주시면 됩니다.

Node.js 코드 입력

이제는 Node 부분을 코드를 입력할겁니다.

🎉AWS 액세스 키 발급

그 전에 액세스 키를 만들어야 합니다. 우측 상단에 여러분의 닉네임을 누르시고 '내 보안자격 증명'을 누르시고 액세스 키를 누르시고 새 액세스 키 만들기를 누르시면 파일을 받으실 수 있는데 그 파일에 앞으로 Node에 쓰실 ID와 PASSWORD가 있습니다. 남에게 보여지지 않게 주의하세요.

aws-sdk와 multer-s3를 npm 또는 yarn을 통해 받으시고 이 코드를 써줍시다.

const multerS3 = require('multer-s3');
const AWS = require('aws-sdk');

AWS.config.update({
    accessKeyId: process.env.S3_ACCESS_KEY_ID,
    secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
    region: 'us-east-1',
});

const upload = multer({
  storage: multerS3({
    s3: new AWS.S3(),
    bucket: 'kihat-blog',
    key(req, file, cb) {
      cb(null, `original/${Date.now()}_${path.basename(file.originalname)}`);
      //original이란 폴더를 만들고 그 곳에 넣는 것
    },
  }),
  limits: { fileSize: 20 * 1024 * 1024 },
});

이 코드를 입력하시고 multer를 사용하시는 것처럼 해주시면 자동으로 AWS S3에 파일이 저장될 겁니다.

만약 파일이 저장된 url이 필요하시다면

router.post('/image', upload.single('image'), async (req, res) => {
    return res.json(req.file.location);
});

req.file.location에 해당 파일의 url 경로가 들어있습니다.

📌마무리

이렇게 이번 포스팅은 heroku에서 s3를 사용하는 방법을 알아보았습니다. 참고로 AWS EC2에서 하실 때에도 CORS 부분만 빼고 위에 나와있는 것처럼 하시면 됩니다.