Node.js | Multer 를 이용한 AWS S3 파일 업로드 구현(1)

1. aws에 접속하여 IAM 사용자를 생성한다

 

 

2. 권한으로 AmazonS3FullAccess를 할당해준다.

 

3. 해당 Access key ID, Secret access key를 알고 있어야 한다.

 

4. aws s3 화면에 접속해서 버킷을 만들어준다.

 

 

5. 퍼블릭 액세스 차단을 해제하고 만들어준다. (차후에 필요하면 수정 가능)

추가로 버킷정책과 CORS까지 설정해주자.

버킷정책

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicListGet",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:List*",
                "s3:Get*"
            ],
            "Resource": [
                "arn:aws:s3:::00nomubucket1",
                "arn:aws:s3:::00nomubucket1/*"
            ]
        }
    ]
}

 

CORS

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

 

 

이제 버킷까지 만들었으니 node.js 로 파일 입출력 하는 로직을 구성해보자.

 

6. node.js 프로젝트에 필요한 패키지를 설치해준다.

npm i multer aws-sdk --save

 

7. 클라이언트에서 파일 업로드에 필요한 state를 만들어준다.

(file_location은 나중에 받아올 데이터입니다.)

    // ----- 파일 상태값 -----
    const initFileState : any = {
        file_object: "",
        file_url: "",
        file_location: ""
    }

    function fileReducer(state: any, action: any) {

        switch (action.type) {
            default:
                return {
                    ...state,
                    [action.name]: action.value
                }
        }
    }

    const [fileState, fileDispatch] = useReducer(fileReducer, initFileState)

 

8. 클라이언트에 file input을 만들어준다 ( Next.js Mui 사용했으나 일반 input 태그도 가능합니다 )

<WrapperDiv
    kindOf={`input`}
>
    <TextField
        label={`사업자등록증`}
        type='file'
        color='primary'
        size='small'
        InputLabelProps={{
            shrink: true,
        }}
        name={`file_object`}
        onChange={(e: any) => {
            let reader = new FileReader();
            let file = e.target.files[0];
            reader.onloadend = () => {
                fileDispatch({ name: e.target.name, value: file });
                fileDispatch({ name: 'file_url', value: reader.result });
            };
            reader.readAsDataURL(file);
        }}
    />
</WrapperDiv>
{fileState.file_url !== '' &&
    <WrapperDiv>
        <img style={{ width: "100%", height: "100%" }} src={fileState.file_url} />
    </WrapperDiv>
}

 

9. 대충 이런 모습을 볼 수 있다. ( 스타일은 신경쓰지 않아도 됩니다. 아래는 사진 미리보기  )

10. 백엔드에 데이터를 전송하는 로직을 구성해준다. ( 저장하기 버튼 클릭 시 )

const formData = new FormData();

formData.append("file_customer_code", infoState.customer_code); // 파일의 고유 코드 (임의로 지정 가능)
formData.append("file_object", fileState.file_object);
formData.append("file_url", fileState.file_url);

const config = {
    headers: {
        "content-type": "multipart/form-data",
    },
};

axios.post('/api/fileupload', formData, config)
    .then(({ data }) => {
        if (data.success) {
            alert('파일 업로드에 성공하였습니다.')
        }
        else {
            alert('파일 업로드에 실패하였습니다.')
        }
    })

 

클라이언트에서 파일을 업로드하고 백엔드로 데이터를 전송하였다. 다음 포스트에서는 백엔드에서의 파일 저장을 살펴보겠다.