S3 버킷 만들고 프론트엔드단에서 사용해보기 (Next.js)

 

이 글은 AWS를 처음 써보는 사람이 쓴 글입니다.

대충 이런 단계를 거쳐 만드는구나~ 라는 생각으로 참고만 해주세요!! 

 

상황

사진을 불러오는 과정에서 발생하는 문제를 최적화 하고 있었는데, 프로젝트 기간이 끝나 서버가 닫혀버렸다.

로컬에서 백엔드 코드를 실행해보려 했는데 엘라스틱 서치 등 내가 모르는 기술과 관련해서 설정할 게 많은 것 같았다(백엔드 팀원에게 물어봤음).

나는 그냥 S3에서 사진 한장과 개인정보를 받아오는 API만 쓰면 되는데. 그래서 그냥 내가 S3 버킷 직접 만들고 API 라우터써서 비슷하게 만들어보려고 한다. 이전에 해보고 싶었던거라 오히려 잘됐다!

 

원래 최적화 과정을 기록하면서 S3 버킷 만드는 과정도 함께 썼는데, 생각보다 과정이 길어서 따로 글을 분리했다.

---

1. S3 버킷 만들기

1-1. 리전 설정

AWS에 로그인 후, 리전을 서울로 설정해준다.

서버와 데이터를 저장한 S3 버킷의 위치가 내 위치와 멀어지면 네트워크 지연으로 인해 응답 시간이 길어질 수도 있다고 한다. 우측 상단에서 리전을 바꿀 수 있다.

 

 

1-2. 버킷 만들기

검색창에 S3를 검색하고 버킷 메뉴로 들어와서 버킷 만들기 버튼(노란색)을 클릭한다.

 

 

기존 버킷이 없으므로 버킷 선택은 생략하였고, 이름만 설정해주었다.

아래로 내리면 암호화 등 설정 옵션이 보이는데, 나는 간단한 테스트를 위해 혼자 쓰는거라 퍼블릭 액세스 설정을 제외하고 비활성화 하거나 디폴트값을 설정해줬다.

 

퍼블릭 액세스 설정은 '새 퍼블릭 버킷 또는 액세스 지점 정책을 통해 부여된 버킷 및 객체에 대한 퍼블릭 액세스 차단'으로 했다.

 

 

설정을 마치고 버킷 만들기 버튼을 클릭한다.

 

 

버킷이 생성되었다. 이제 사진을 업로드해볼거다.

 

 

1-3. 사진 업로드

이름을 클릭하면 이런 창이 뜨는데, 우측의 업로드 버튼 클릭 >  파일 혹은 폴더를 추가 > 맨 아래에 있는 업로드 버튼 클릭

 

 

업로드 성공이 떴으면 끝이다.

 

 

이름을 클릭하면 이렇게 객체 URL이 뜨는데, 클릭하면 AccessDenied가 뜬다.

 

 

 

---

2. 버킷 정책(권한) 설정

다시 이 페이지로 돌아와서 권한 탭에 들어간다.

 

 

버킷 정책에 왜 퍼블릭 액세스가 차단됐는지 써있었고, 위의 퍼블릭 액세스 차단 편집을 통해 모든 체크를 해제한 후 저장했다.

 

 

 

이제 버킷 정책 편집 버튼을 누르고 버킷 ARN을 클릭해서 복사한 후 정책 생성기를 누른다.

 

 

정책 생성기에서 노란 네모칸만 수정하면 된다. 다음 값을 넣어준다.

 

Select Type of Policy : S3 Bucket Policy

Principal : *

Actions : GetObject

ARN : 아까 복사한 ARN/*

 

수정 후 Add Statement > Generate Policy 클릭

 

 

그럼 이런 JSON 형태의 무언가 뜨는데 복사한다.

 

 

다시 버킷 정책 편집창으로 돌아와서 저 노란 박스에 붙여넣기 하고 저장한다.

 

 

그리고 사진 객체 URL을 다시 눌러주면 사진이 잘 뜬다!!

 

 

---

3. CORS 설정하기

이제 클라이언트쪽에서 S3 버킷의 리소스를 요청할 수 있도록 CORS 설정을 해줘야한다.

 

다시 권한 탭으로 들어가 맨 아래를 보면 CORS 설정하는 부분이 있고, 편집을 눌러 JSON 형태의 CORS 구성을 입력한 후 저장해준다.

 

 

나는 AWS 공식 가이드 문서를 참고하여 도메인 origin 범위만 http://localhost:3000로 변경해주었다.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://localhost:3000"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-meta-custom-header"
        ]
    }
]

 

 

 

---

4. Next.js에서 사진 불러오기

이제 next.js에서 S3 링크만으로 간단히 사진을 불러오는 작업을 해보자.

우선 next.config.mjs 파일에서 다음과 같이 설정해준다. 나는 jsx 파일을 사용하였기 때문에 pageExtension 설정도 해줬다.

/** @type {import('next').NextConfig} */

const nextConfig = {

    pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],

    images: {

        domains: ['opt-s3-test.s3.ap-northeast-2.amazonaws.com'],

    },

};

export default nextConfig;

 

 

jsx 파일에서는 이렇게 코드를 짰다. 사진이 잘 왔는지 확인하기 위해 정말 띄우기만 했다.

이제 동일한 CSS, 동일한 코드 구조로 API를 호출하여 사진을 불러오게 변경해야한다. 우선 오늘은 여기까지만!!

'use client';

import Image from 'next/image';
import { useState, useEffect } from 'react';

const imageURL = 'https://opt-s3-test.s3.ap-northeast-2.amazonaws.com/resized_IMG_2528.jpg';

export default function Mypage() {
    const [image, setImage] = useState('');

    useEffect(() => {
        if (imageURL) {
            setImage(imageURL);
        }
    }, [imageURL]);

    return <Image src={image} width={150} height={150} alt="프로필 이미지 입니다." />;
}

 

 

 

---

참고 문서

AWS - S3 사용하기 (버킷 만들기)

AWS - S3 사용하기 (버킷 만들기)