Next.js와 AWS S3 파일 스토리지 연동

18 Oct 2023

nextjs

Next.js는 React 기반의 서버 사이드 렌더링 프레임워크로, 다양한 프로젝트에서 사용되고 있습니다. AWS S3는 클라우드 기반의 파일 스토리지 서비스로, 대용량 파일을 저장하고 관리하는 데에 효과적입니다. 이번 글에서는 Next.js와 AWS S3를 연동하여 파일 업로드와 다운로드를 구현하는 방법에 대해 알아보겠습니다.

1. AWS S3 버킷 생성

우선 AWS Management Console에 로그인한 후, S3 서비스로 이동합니다. 새로운 버킷을 생성하고 필요한 권한 설정을 완료합니다. 버킷의 이름과 리전을 잘 기억해두세요.

2. AWS SDK 설치

프로젝트 폴더에서 다음 명령어로 AWS SDK를 설치합니다.

npm install aws-sdk

3. AWS 인증 정보 설정

AWS 인증 정보를 설정하기 위해 .env 파일을 생성합니다. 파일 내에 다음과 같이 AWS 액세스 키와 시크릿 키를 입력합니다.

AWS_ACCESS_KEY_ID=your_access_key_id
AWS_SECRET_ACCESS_KEY=your_secret_access_key
AWS_REGION=your_bucket_region
AWS_BUCKET_NAME=your_bucket_name

4. 파일 업로드 기능 구현

Next.js 프로젝트 내에서 파일 업로드 기능을 구현합니다. 예를 들어, upload.js 파일을 생성하고 다음과 같이 작성합니다.

import AWS from 'aws-sdk';

const s3 = new AWS.S3();

export default async function uploadFile(file) {
  const params = {
    Bucket: process.env.AWS_BUCKET_NAME,
    Key: file.name,
    Body: file.data,
  };

  return new Promise((resolve, reject) => {
    s3.upload(params, (error, data) => {
      if (error) {
        reject(error);
      } else {
        resolve(data);
      }
    });
  });
}

위 코드에서는 uploadFile 함수를 정의하고, AWS SDK를 사용하여 파일을 S3 버킷에 업로드하는 작업을 수행합니다.

5. 파일 다운로드 기능 구현

Next.js 프로젝트에서 파일 다운로드 기능을 구현합니다. 예를 들어, download.js 파일을 생성하고 다음과 같이 작성합니다.

import AWS from 'aws-sdk';

const s3 = new AWS.S3();

export default async function downloadFile(fileName) {
  const params = {
    Bucket: process.env.AWS_BUCKET_NAME,
    Key: fileName,
  };

  return new Promise((resolve, reject) => {
    s3.getObject(params, (error, data) => {
      if (error) {
        reject(error);
      } else {
        resolve(data.Body);
      }
    });
  });
}

위 코드에서는 downloadFile 함수를 정의하고, AWS SDK를 사용하여 S3 버킷에서 파일을 다운로드하는 작업을 수행합니다.

6. 파일 업로드 및 다운로드 테스트

위에서 작성한 파일 업로드와 다운로드 기능을 테스트해보기 위해 Next.js 페이지에서 해당 함수들을 호출합니다. 예를 들어, 다음과 같이 index.js 파일을 수정합니다.

import React, { useState } from 'react';
import uploadFile from '../utils/upload';
import downloadFile from '../utils/download';

export default function Home() {
  const [file, setFile] = useState(null);

  const handleFileChange = (event) => {
    setFile(event.target.files[0]);
  };

  const handleUpload = async () => {
    if (file) {
      try {
        await uploadFile(file);
        console.log('File uploaded successfully!');
      } catch (error) {
        console.error('Failed to upload file:', error);
      }
    }
  };

  const handleDownload = async () => {
    try {
      const fileData = await downloadFile(file.name);
      console.log('File downloaded successfully!', fileData);
    } catch (error) {
      console.error('Failed to download file:', error);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
      <button onClick={handleDownload}>Download</button>
    </div>
  );
}

위 코드에서는 파일 업로드와 다운로드를 위한 버튼과 인풋 태그를 제공하며, 해당 버튼이 클릭될 때 uploadFile과 downloadFile 함수를 호출하여 파일을 업로드하고 다운로드하는 기능을 구현합니다.

마치며

위에서는 Next.js와 AWS S3를 연동하여 파일 업로드와 다운로드 기능을 구현하는 방법에 대해 알아보았습니다. Next.js의 강력한 SSR 기능과 AWS S3의 확장성 있는 파일 스토리지 서비스를 결합하여 더욱 효율적인 웹 애플리케이션을 개발할 수 있습니다.

#Developers #Next.js #AWS #S3