[ AWS ] - s3 사용하여 node.js 환경에서 이미지 저장하기

전체 코드

import AWS from "aws-sdk";

const {AWSREGION , AWSBUCKET, AWSACCESSKEY, AWSSECRETKEY } = process.env;
const region = AWSREGION as string
const bucket = AWSBUCKET as string
const accessKey = AWSACCESSKEY as string
const secretKey = AWSSECRETKEY as string

export const s3 = new AWS.S3({
    accessKeyId: accessKey,
    secretAccessKey: secretKey,
    region: region
});

// params 설정
const ReturnParams = (data: any, category: string, name: string) => {
    const params = {
        Bucket: bucket,
        Key: `${category}/${name}`,
        Body: data.data,
        ContentType: "image/png",
        ACL: "public-read"
    }
    return params
}

// s3 이미지 등록하기
export const putObject = async (data:any, category: string, name: string) => {
    try {
        const params = ReturnParams(data, category, name);
        return new Promise((resolve, reject) => {
            s3.putObject(params, (err:any) => {
                if(err) return reject(err);
                return resolve(`${category}/${data.name}`)
            })
        });
    }catch(e) {
        console.log(e)
    }
}


// 생성한 s3 object 정보 가져옴
export const getObject = async ( outData: any, category:string) => {
    try {
        const params = {
            Bucket: bucket,
            Key:`${category}/${outData.name}`,
        }
        return new Promise((resolve, reject) => {
            s3.getObject(params, (err, data) => {
                if(err) return reject(err);
                return resolve(data);
            })
        })
    } catch(e) {
        console.log(e)
    }
}


// 생성한 s3링크 얻기
export const getUrlFromBucket = async (filename:string) => {
    try{
    const regionString = region.includes('us-east-1') ?'':('-' + region)
    return `https://${bucket}.s3${regionString}.amazonaws.com/${filename}`
    }catch(e) {
        console.log(e)
    }
};

1. aws-sdk 모듈을 통해 s3 를 구현하였습니다. 

🔥 aws s3 사용을 위해 aws에서 발급받은 accessKey나 secretKey는 보안을 위해 환경변수에 기록해둔 후 github 등의 공개된 공간에는 올라가지 않도록 주의하여야 합니다.

 

2. s3 설정 관련 코드

// params 설정
const ReturnParams = (data: any, category: string, name: string) => {
    const params = {
        Bucket: bucket,
        Key: `${category}/${name}`,
        Body: data.data,
        ContentType: "image/png",
        ACL: "public-read"
    }
    return params
}

- Bucket:  해당 s3를 저장하는 특정 영역이라고 생각하면 됩니다.

- Key: s3이미지 생성 후 링크를 구성하는 일부가 됩니다.,

- Body: 생성된 이미지 데이터를 이곳에 넣어줍니다.

- ContentType: 생성되는 s3데이터가 어떤 데이터 타입인지 지정해줍니다.

- ACL: 일종의 접근성을 제한하는 것으로 볼 수 있습니다. public-read로 설정할 경우 s3이미지 생성 후 별도의 설정없이 해당 링크에 접근할 수 있습니다.

 

3. 이미지 등록하기  ( putObject )

// s3 이미지 추가
export const putObject = async (data:any, category: string, name: string) => {
    try {
        const params = ReturnParams(data, category, name);
        return new Promise((resolve, reject) => {
            s3.putObject(params, (err:any) => {
                if(err) return reject(err);
                return resolve(`${category}/${data.name}`)
            })
        });
    }catch(e) {
        console.log(e)
    }
}

s3는 putObject 메서드를 통해 이미지를 등록하는 s3 링크를 생성 할 수 있습니다.

 

4. 생성한 s3의 객체 정보 가져오기 ( getObject )

// 생성한 s3 object 정보 가져옴
export const getObject = async ( outData: any, category:string) => {
    try {
        const params = {
            Bucket: bucket,
            Key:`${category}/${outData.name}`,
        }
        return new Promise((resolve, reject) => {
            s3.getObject(params, (err, data) => {
                if(err) return reject(err);
                return resolve(data);
            })
        })
    } catch(e) {
        console.log(e)
    }
}

5. 생성된 s3링크 얻기

export const getUrlFromBucket = async (filename:string) => {
    try{
    const regionString = region.includes('us-east-1') ?'':('-' + region)
    return `https://${bucket}.s3${regionString}.amazonaws.com/${filename}`
    }catch(e) {
        console.log(e)
    }
};

 

6. s3 이미지 등록을 위해 express-fileupload모듈을 사용하였다.

서버 구성 파일에서는 다음과 같이 해당 모듈 사용할 수 있게끔 설정해둔다.

// server.ts 파일에서 다음과 같이 세팅해준다.
import express from 'express';
import fileUpload from 'express-fileupload';

const app = express();

app.use(fileUpload());

app.listen(3000,()=>{
	console.log('server start 3000')
})

실제 파일 데이터를 받을 때는 req.files.[파일명]으로 하여 값을 받습니다.

req.files!.banner