AWS에 S3에 웹 호스팅 하는 방법

 

오늘은 AWS 홈페이지에서 S3에 웹 프로젝트를 호스팅 하는 방법을 소개해 드리겠습니다!

회원가입부터 배포까지 아주 자세하게 설명해 두었습니다!

 

그전에! 자주 나오는 단어에 대해 먼저 알아보겠습니다.

 

• 배포 : 사용자들이 인터넷을 통해서 실제로 실행 가능한 상태로 만드는 것
• S3 : 파일 저장 및 다운로드 서비스 (웹 호스팅)
• 버킷 :파일과 폴더를 업로드할 하나의 저장소             ⇒ 객체를 저장하는 곳
• 객체 : 버킷에 저장되는 파일과 그 파일에 대한 정보   ⇒ 버킷에 업로드된 파일

---

 

AWS에 S3에 웹 호스팅 하는 방법

 

 

 

먼저 AWS를 검색해서 AWS 홈페이지에 방문한다.

aws 홈페이지 들어가자마자 프리 티어가 뜨는데 "무료 계정 생성" 버튼을 클릭해서 회원 가입을 해준다.

회원 가입을 하고 나면 아래 화면이 나오는데 주황 버튼을 눌러주면 된다.

이동하면 아래 화면이 나온다.

오른쪽 맨 위에 나는 시드니로 설정되어 있어서 서울로 바꿔줬다.

이제 왼쪽 상단 검색창에 s3를 검색해서 들어가준다.

클릭하면 아래 화면이 나오는데 바로 "버킷 만들기"를 클릭한다.

이제 버킷 이름을 정해야 하는데 자기 상황에 맞게 정하면 된다.

나는 연습용이라 일단 unongweb으로 지었다.

나중에 바꿀 수 있기 때문에 너무 큰 걱정 안 해도 된다.

아래 친구는 그냥 두고

퍼블릭 액세스는 익명의 사용자가 내 버킷에 접근하고 조회하고 사용해도 괜찮은지 물어보는 것

나는 연습용이라 차단 설정을 해제해 봤다.

나머지 사항은 슈슈슉 넘기고 바로 "버킷 만들기"를 눌러줬다.

 

아래 화면이 나온다면 버킷 생성 완료!

이제 버킷 정책을 설정할 거다.

버킷 이름 (unongweb)을 클릭해서 권한 -> 버킷 정책 -> 편집

"편집" 버튼을 누르고

"새 문 추가" 버튼을 누른다.

편집을 누르면 AWS에서 기본적으로 제공하는 코드가 나오지만 무시하고

검색창에 S3를 검색해 클릭

검색창에 getobject를 검색하고

액세스 수준에 나오는 GetObject 체크박스 표시를 하면

왼쪽 코드에 뭐가 막 추가되어 있는 걸 확인할 수 있다.

오른쪽 메뉴에서 스크롤바를 내리면 "리소스 추가" 버튼이 나오는데 클릭

리소스 추가 모달창이 뜬다!

리소스 유형은 object로 해준다.

리소스 ARN은 Bucket Name에 내 버킷 이름 (unongweb)을 넣어주고

ObjectName에 파일 이름을 넣어 준다.

*은 모든 파일을 허용하겠다는 것!

"리소스 추가" 버튼을 눌러주면 다시 정책 페이지로 돌아오는데

Resource 부분이 추가된 걸 볼 수 있다.

 

Action(기능)을 Effect -Allow(허용) 할 건데

Principal(누구)에게 허용할 것인지 설정을 해줄 거다.

 

나는 모두에게 허용할 거라 Principal에 *을 넣어줬다.

이제 정책 설정이 끝났으니 오른쪽 하단에

"변경 사항 저장" 버튼을 눌러준다.

버킷 정책에 우리가 설정한 정책이 들어온 걸 확인할 수 있다.

이제 파일(객체)를 업로드해 줄 거다.

 

객체를 눌러주면 업로드를 할 수 있다.

나는 테스트용으로 index.html 파일을 만들어 두었다.

업로드하려는 파일을 "업로드" 버튼이 있는 쪽으로 끌고 온다.

 

그럼 아래 같은 화면이 나오는데 끌고 온 파일을 둔다.

그럼 이런 화면이 나오는데 "업로드" 버튼을 눌러준다.

업로드가 성공했다면 아래와 같은 화면이 나온다.

 

오른쪽 상단 "닫기" 버튼을 눌러준다.

이제 마지막으로 배포를 해볼 거다!

 

속성으로 이동을 해준 뒤,

스크롤바를 제일 하단으로 내리면 정적 웹 사이트 호스팅이 나온다.

오른쪽 "편집" 버튼을 눌러준다.

 

 

 

정적 웹 사이트 호스팅 "활성화" 버튼 눌러주고

인덱스 문서에 index.html을 넣어둔다.

(저 부분은 기본 페이지로 웹사이트 방문 시 제일 첫 페이지에 뜨는 부분이다.)

 

완료되었으면 하단 "변경 사항 저장" 버튼을 눌러준다.

 

변경 사항 저장 버튼을 누르고 다시 속성 페이지로 돌아왔는데

스크롤을 젤 하단으로 내려서 정적 웹사이트 호스팅으로 오면

하단에 링크가 생긴 걸 볼 수 있다.

.

링크를 복사해서 새 탭에 붙여넣기를 해보면

 

자신이 넣은 파일 내용이 잘 나온다면

배포가 잘 되었다는 것!