blog - AWS S3에 이미지 업로드하기

blog 프로젝트에서는 사용자가 게시글에 첨부할 사진을 저장해 놓을 공간이 따로 필요했다. 이를 위한 클라우드 스토리지 서비스를 찾아본 결과 AWS S3와 cloudinary 등의 서비스를 알게 되었다. 사용하기에는 cloudinary가 더 가볍고 편해보였지만 이 프로젝트를 결과적으로 AWS EC2에 deploy할 예정이었기 때문에 인프라 서비스 간 호환성을 생각해 AWS S3를 사용해 보기로 결정했다. AWS IAM 설정 및 s3 bucket 설정 방법에 관한 정보는 인터넷에 굉장히 많으니, 이 글에서는 설명을 생략하도록 하겠다.

아래는 이미지 업로드를 핸들링하는 함수이다.

    const handleImageUpload = async (e) => {
        const file = e.target.files[0];

        const s3 = new AWS.S3({
            accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY,
            secretAccessKey: process.env.REACT_APP_AWS_SECRET_ACCESS_KEY,
            region : 'ap-northeast-2',
        }); //s3 configuration

        const param = {
            'Bucket' : 's3.geunyoung.image',
            'Key' : `blog/image/${file.name}`,
            'ACL' : 'public-read',
            'Body' : file,
            'ContentType': 'image/png'
        }; //s3 업로드에 필요한 옵션 설정

        s3.upload(param, (err, data) => { //callback function
            if(err) {
                console.log('image upload err : ' + err);
                return;
            }

            const imgTag = `<img src=${data.Location} width="100%" />`;

            const action = {
                type : 'content',
                value : `${postState.content} \n ${imgTag}`
            };
            postDispatch(action)
        });
    };

굉장히 간단하다. AWS에서 IAM을 생성한 후 액세스 키를 발급받고 S3 bucket을 생성한다. 그 다음 관련 정보를 적절히 실어서 s3 서버에 업로드 요청을 보내면 된다. 그런 다음 이미지가 업로드된 주소를 img tag로 감싸서 브라우저에 적절히 뿌려주면 끝!