AWS S3를 이용하여 정적 웹페이지(index.html) 호스팅하기

AWS S3를 이용해서 html 파일을 업로드해두면 누구나 정해진 url로 접속하여 접근할 수 있다. 단순히 파일만 저장해둘 수 있기 때문에 정적 페이지를 업로드하기 적절하다.

포트폴리오를 html로 작성해두고 올려두거나 할 때 좋을 것 같다.

 

 

1. 버킷(Bucket) 생성

AWS 홈페이지에 접속, 로그인 후 스토리지 밑으로 가보면 S3가 있다. 클릭.

 

 

 

 

 

버킷이 나온다. 버킷은 S3에서 제일 기본 단위로 생각하면 될 것 같다. 본인은 하나 만들어 둔게 있어서 이렇게 뜬다.

새로운 웹페이지를 업로드하고 싶으니 버킷 만들기를 클릭.

 

 

 

버킷 이름을 설정. 버킷 이름은 다른 버킷이랑 이름이 겹치면 안된다! 자신만의 이름을 지어주자.

 

 

 

퍼블릭 액세스 설정. 기본값은 모든 퍼블릭 액세스 차단이다.

정적 웹사이트 호스팅용으로 사용할 것이기 때문에 체크를 해제. 추후에 변경 가능하다.

 

 

 

퍼블릭 상태가 될 수 있음을 알고 있다고 체크해주자.

 

 

 

엄청 중요한거 올릴거 아니니 밑에는 다 기본값으로 해준다.

그리고 버킷 만들기 클릭!

 

 

 

그러면 버킷에 새로운 버킷이 생성된 것을 확인할 수 있다.

 

 

2. 파일 업로드

이제 파일을 올려보자. 생성한 버킷 이름을 클릭해준다.

 

 

업로드를 눌러 만들어둔 html 파일을 업로드한다.

이미지를 사용했다면 경로 유지하면서 업로드 해주면 된다.

CSS나 Javascript도 사용했으면 같이 묶어서 몽땅 다 올려주면 된다.

본인은 네이버 모바일 페이지 클론 코딩한 파일을 올려보았다.

 

 

 

다 올렸으면 업로드를 눌러준다.

 

 

 

업로드 성공!

이제 URL을 찾으러 가보자.

 

 

 

버킷에 들어와서 속성 탭으로 들어간다. 그리고 스크롤을 쭉~ 밑으로 내리면

 

 

 

정적 웹 사이트 호스팅이 있다. 편집을 눌러서 활성화 시켜주자.

 

 

정적 웹 사이트 호스팅에서 활성화에 체크해준다.

 

 

인덱스 문서는 index.html로 작성했으므로 index.html을 기입.

에러 페이지는 딱히 만들어 둔게 없어서 그냥 index.hmtl 그대로 기입.

그리고 변경사항 저장을 눌러준다.

 

그리고나서 다시 속성탭으로 들어가서 맨 밑으로 내리면 아까는 없던 주소가 생성되었을 것이다.

이 주소를 배포하면 다른 사람들도 접근할 수 있다.

 

 

 

3. 권한 설정

다음은 권한 설정. 다른 사람들도 접근할 수 있도록 설정해주어야 한다. 버킷을 클릭하고 권한 탭으로 들어간다.

 

 

밑으로 내리면 버킷 정책이 있다. 편집을 눌러서 정책을 추가해준다.

 

 

백지에다가 버킷 정책을 쓸 정도로 고수는 아니니 정책 생성기를 눌러준다.

 

 

1. Type of Policy를 S3 Bucket Policy로 설정

2. principal에 * 입력

3. Actions에서 GetObject 선택

4. ARN에 arn:aws:s3:::<bucket_name>/<key_name> 입력.

   본인은 버킷 이름이 testprtest이고 모든 key에 대해 적용할 것이므로

  arn:aws:s3:::testprtest/* 를 입력하였다.

그리고 Add Satatement를 클릭하고. 밑의 Generate를 클릭하면 팝업창이 뜬다.

 

 

 

내용을 복사해서 아까 편집창에 붙여넣는다. 그리고 변경 사항 저장.

 

 

그러면... 짜잔!

 

 

퍼블릭 액세스 가능이라는 빨간 뱃지가 생겼다. 이제 아무나 접근할 수 있다.

 

이제 위에서 생성된 주소로 접속하면... 짠!

 

 

 

내가 만들었던 그대로 뜬다! 이제 친구한테 링크 공유해서 자랑할 수 있다!

 

 

계속 놔두면 과금될 수 있으니 필요할 때만 설정해두고 사용하지 않을 때는 삭제해두는 것이 좋을 것 같다.

버킷을 삭제할 때는 일단 안에 들어있는 모든 파일을 삭제해야 한다.

파일을 다 삭제했으면 버킷 탭에서 삭제할 수 있다.