[AWS] S3 - 버킷 생성 및 웹호스팅

박하늘·2025년 3월 31일

AWS

목록 보기

1/4

AWS (Amazon Web Services)

AWS는 아마존에서 제공하는 클라우드 컴퓨팅 플랫폼으로, 서버, 데이터베이스, 스토리지, AI, 네트워킹 등의 다양한 클라우드 서비스를 제공하는 플랫폼
기업이나 개발자는 물리적인 서버 없이도 AWS의 인프라를 활용하여 애플리케이션을 구축, 운영
실제 컴퓨터가 아닌 원격으로 컴퓨터를 빌려서 사용할 수 있게 해주는 서비스 즉, 이를 클라우드 서비스라고 한다.

[S3]

클라우드 스토리지 서비스 로, 객체(Object) 단위로 데이터를 저장하고 관리할 수 있는 저장소입니다.

정적 웹사이트 호스팅(=배포), 백업 및 복구, 로그 저장, 데이터 아카이빙 등에 사용
저장된 데이터는 버킷(Bucket) 단위로 관리되며, 각 버킷 내에서 객체(파일) 을 업로드하거나 접근 권한을 설정
데이터 내구성이 뛰어나며, 사용량 기반으로 과금되는 방식

	[배포]
	개발한 소프트웨어를 실제 사용자에게 제공할 수 있도록 운영 환경에 올리는 과정 (다른 사용자들이 인터넷을 통해서 사용할 수 있게 만드는 걸 의미)

	* EX 1) 개인적으로 개발할 때는 localhost 라는 주소로 테스트 및 개발을 진행하지만 이는 본인 외의 다른 컴퓨터에서는 접근이 불가능한 주소이다.
    		이를 배포하게 되면 IP 주소나 도메인과 같이 고유의 주소를 부여받게 되며 다른 컴퓨터에서도 해당 주소로 접속할 수 있도록 하는 것이 배포이다.

	* EX 2) 웹 브라우저 주소창에 naver.com으로 접속하면 그 웹 페이지를 운영하고 있는 컴퓨터로 접속하는 것처럼 보이지만,
    		웹페이지를 운영하고 있는 서버로 부터 HTML, CSS, JS 등을 다운 받아와서 브라우저에 끼워 넣어 실행시키는 방식이다.
            이처럼 파일을 다운 받아와서 사용해야 하기 때문에 S3을 활용

▪️ 버킷 생성 (Create Bucket)

1️⃣ 버킷 생성 하기

" Create Bucket "

버킷 생성 ( Create a bucket )

S3의 모든 객체는 버킷에 저장됩니다. 
S3에 파일과 폴더를 업로드하려면 객체가 저장될 버킷을 생성해야 합니다.

버킷
깃허브에서 만드는 레포지토리처럼 S3 에서도 여러개의 저장소를 만들 수 있음
객체
S3 버킷에 업로드된 파일

2️⃣ 버킷 이름 설정

Bucket name : 원하는 이름 설정 및 추후 변경 가능

3️⃣ 액세스 설정

S3 해당 버킷에 익명의 사용자 접근 여부 설정 - 파일 조회 가능 여부 및 다운 가능 여부에 대한 접근을 열어줄 것이냐.

Block all public access : 모든 퍼블릭 액세스 차단 체크 해지
Turning off block all public access might result in this bucket and the objects within becoming public
: 차단 비활성화 시 이 버킷 안의 객체가 퍼블릭 상태가 될 수 있음을 알리는 안내창 체크하기

4️⃣ 버킷 만들기

제일 하단에 Create bucket 클릭

▪️ 정책 설정

1️⃣ 정책 설정

생성된 Bucket 클릭 후 Permissions 탭 들어가기

Bucket policy : 정책 작성 (Edit)

정책 : 권한을 정의하는 JSON 문서 , 어떤 권한을 부여할 지에 대한 코드
AWS 는 기본적으로 권한이 주어져있지 않아서 특정 소스에 접근을 하려면 권한을 허용 해주어야 함
ex) ~~ 이런 기능만 ~~ 사용자가 사용하였으면 좋겠어요 !

Add new statement (새 정책문 추가)

옆에 작은 검색창에 S3 -> GetObject 검색 및 클릭하면 코드 자동 생성

Add resource
Resource type : object
Resource ARN : arn:aws:s3:::{BucketName}/{ObjectName}
{BucketName} - 해당 버킷 이름 (insta-web-neul) / {ObjectName} - 버킷 에서 허용할 객체 (파일) * 은 모든 파일을 의미

2️⃣ 작성된 정책 해석

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "Statement1",
			"Principal": "*",
			"Effect": "Allow",
			"Action": [
				"s3:GetObject"
			],
			"Resource": [
				"arn:aws:s3:::insta-web-neul/*"
			]
		}
	]
}

Principal : 허용할 주체 → "*" : 전체를 의미
Effect : Allow → 허용하겠다
Action : 허용할 Action → 파일을 다운받는 기능을 허용하겠다 . 모든 사용자에게 .
Resource : S3 중에서 insta-web-neul 이라는 버킷 안에 있는 모든 객체에 대해서만 파일을 다운받겠다.

▪️ 웹호스팅 설정

1️⃣ 객체 업로드

객체(파일)이 들어있는 폴더 전체를 업로드 하면 안 되고, 객체(파일)만 따로 업로드 해야 함 !
메인이 되는 페이지의 객체 이름은 index.html 으로 지정하는 것을 추천

2️⃣ 정적 웹사이트 호스팅 활성화

Propertie 탭으로 이동
Static website hosting : Enable 로 선택 → 정적 웹사이트 호스팅 활성화하기
Index document : 메인이 되는 객체명 넣어주기

3️⃣ 정상 적용 확인

해당 버킷에 대한 URL 복사 후 웹브라우저 URL 창에 넣어주면 메인 html 객체 내용 확인할 수 있음
http://insta-web-neul.s3-website-us-west-2.amazonaws.com

S3 프로젝트 배포

▪️ CRA 이용한 React 프로젝트 생성 및 배포

▫️ 프로젝트 생성 및 파일 번들링

1. [프로젝트 생성]
npx create-react-app insta-web-cra

2. [번들링 작업]
npm run build

[번들링 작업]
이미 React에 맞춰진 src 파일들이 존재하지만, 비효율적인 구성으로 되어있음
build 라는 과정을 거쳐서 배포하기 좋은 형태로 패키징 및 가공을 하여 가공된 파일을 S3 에 업로드
여러 개의 모듈을 하나의 파일(또는 여러 개의 최적화된 파일)로 묶음
이렇게 build 폴더 안에 번들링 된 파일이 생성됨 (정적파일)

▫️ 객체 (파일) 업로드

여기서도 중요한 점 build 라는 폴더 자체를 업로드하면 안 됨 !! 해당 폴더 안의 파일들을 업로드 !

▪️ Vite 이용한 React 프로젝트 생성 및 배포

▫️ 프로젝트 생성 및 파일 번들링

1. [프로젝트 생성]
npm create vite@latest

2. [프로젝트에 필요한 패키지를 설치] 무조건 설치 후 npm i 먼저 !!
npm i 

3. [번들링 작업]
npm run build

[번들링 작업] 후 Vite 는 dist 폴더 생성

▫️ 객체 (파일) 업로드

▪️ Next.js 이용한 프로젝트 생성 및 배포

1. [프로젝트 생성]
npx create-next-app@latest

2. [next.config.mjs 에 아래 내용 추가]

const nextConfig = {
    output: 'export'
};

3. [번들링 작업]
npm run build

Next.js 는 정적/동적 배포 방법이 모두 존재하지만 동적 배포는 S3를 통해 불가하다 ( CRA , Vite 는 정적 웹페이지 )
next.config.mjs 파일에 아래 내용 추가 하여 옵션 설정 후 build
[번들링 작업] 후 Next.js 는 out 폴더 생성